Bikolor Project: Biking through Colors

A visualization project exploring colorful portrayal of bike tracks.

Example image from Bikolor Project visualization.

I love biking, especially in the San Francisco bay area. There are so many scenic routes in the vicinity for bikers of all levels. Below is an amazing view from one of my favorite rides, Hawk Hill (when Karl is not around, that is!).

One of the forgotten works of art (well, at least for me) are tracks left on the ground by bikes. With carefully designed patterns from a variety of bike types (road bikes, mountain bikes etc.), bike tires can sometimes leave some stunning works of art on the ground:

Example photo showing bike track art on the ground. Source

However, these masterpieces are often lost forever in mud and/or rain. So I decided to take a stab at designing a visualization to recreate and preserve these works of art in a “colorful” fashion.

The premise behind the visualization is very simple. Imagine if you were riding bikes over a circle with hidden colors, and as you bike over the circle, the colors are revealed. How will the end result look like? Here’s a simulation of this scenario:

Simulation showing bike tracks over a single color wheel. (Please wait for the animation to load)

In this simulation, bike tires can have one of six patterns, and to simplify matters, all tracks were drawn in the shape of circular arcs, and only one wheel was drawn per ride. A color wheel was used to layout different colors in a circle. When a bike moves over a certain part of the color wheel, the corresponding color is exposed.

Now, to take this to the next level, how would it look like if there were a collection of such color wheels and bikes could move over many of them at once? Here’s a simulation of that scenario:

Simulation showing bike tracks over many color wheels. (Please wait for the animation to load)

Note: The animations above are using GIF format and they don’t show all the detailed steps. Here is a web-based version of the above animation showing full details.

Personally, I think these simulations and final images are super interesting. Even if the individual patterns, shapes and colors are very simple, a collection of them laid out in a logical and natural fashion gives life to something larger. Agree/disagree? Please leave your comments below.

Like what you see? Please recommend, like, tweet and/or share with your friends. I have also put up some of my favorite designs onto posters, t-shirts and phone cases at Zazzle. Hope you like them!

Technical Details

1. For building the web application showing animated renderings, I used a combination of JavaScript, HTML5 Canvas and D3.js. Full source code is published on GitHub.
2. The web application is designed to render from any arbitrary configuration file in JSON file format specifying the parameters of color wheels and bike tracks. An example configuration file is here.
3. Source code also includes a companion web application that can be used to generate configuration files meeting certain criteria (e.g. resolution, number of color wheels, and number of bike tracks). The default generation algorithm tries to maximize size of color wheels while avoiding overlaps between color wheels.