Rainbow Ribbon: A Web Based Drawing tool

by Chris Clavio

Home | Gallery | Draw Now

Rainbow Ribbon is a JavaScript based drawing tool allows the user to create, save, and print digital drawings on the web. The tool follows the mouse wherever it goes on the canvas, creating a continuous line and a color trail that reaches from the initial to the current cursor position. The line and trail change color inversely in a rainbow-like fashion relative to X and Y position of the cursor on the canvas. A click of the mouse draws a circle of random size and resets the initial position from which the trail is created. A click also prevents the trail preceding it from changing color with movement of the mouse. There are  four user selectable blending modes to change how the color trail interacts with what has already been drawn on the canvas. Two of these modes change whether the trail is drawn in-front-of or behind what has already been drawn. The other two modes change how the color trail will react when it is overlapped by making everything drawn since the last click either lighter or darker.

The tool may seem overly simple with only one primary function and four blending modes, however, because the tool is not as intuitive as we would expect it to be, it requires us to think about drawing in an entirely new way. After the learning curve of figuring out how to draw without taking your “pen off the paper,” there is a whole new scope of possibilities to be explored. The drawing tool  changes based on its position on the canvas affecting what has already drawn. A click creates a circle at the point of the click and resets the trail position.

This functionality, creating one element that continually affects or creates another, makes us think differently about the way we draw and create works of art. Because you can't draw one element without drawing another at the same time, it requires us to think about what we are going to draw ahead of time and plan how elements will react with one another, similar to a game of chess. It is also so unintuitive that we often can't anticipate what the results of our actions will be, and we get something completely unexpected, whether we like what happens or not. This concept parallels our daily lives in many ways.

This drawing tool not only requires us to think in new ways to create works of art, but it also reminds us of how all of our actions are connected. Everything we do effects something or someone else, in either a small or a big way. We also live in a world with a given set of physical parameters and everything we do must be done with respect to those parameters. We have to learn how to live in a world with these constraints, and act accordingly. However, we often forget or take for granted how connected our actions are and how sometimes the constraints we live within can be bent or altered allowing us to create and discover ideas that we never would have thought were possible. So go ahead, grab the mouse, and see what you can create.