Final Project- Color Dash

Play Color Dash!Hi,

Based on the feedback given by the class and the professor on my previous project proposal, I identified a few factors for improvement. Employing the strategy of the instrument in the core of the artwork was one of the essential elements. The Strategy of Instrument suggests that the actor(s) in the artwork with the help of an interface drives the entire story. Right from filling life into the scene to progressing it further is all determined by the player’s interaction with the artwork. So in the improved version, I’ve given the player more liberty and authority as compared to the earlier version. Now, the artwork is given life only when the player interacts with it. This ensures that the artwork uses and progresses according to the strategy of instrument.

Going away from the notion of ‘Game’ which slightly digressed the focus of the project from instrument to game, the version 2 now focuses only on color and particle system. The artwork explores mixing of colors via blending colorful particles in space. The objective of the project is to create a playful environment of colorful particles for the user wandering through which they discover the different shades of colors. The artwork is explorable with the use of a mouse or the keyboard; both could be equally engaging. I’m calling the artwork ‘Color Dash’.

The user is first presented with a canvas (black or white) full of colorful circles with varying sizes and colors. The colors and the sizes of the circles are randomly generated. The user’s pointer is a small white circle with a black border placed at the center of the screen. From here, the user starts his journey towards mixing and discovery of colors. There are two important stages of user interaction: movement and join. The user can move  their white circle and dash other circles around by moving either the mouse or the keyboard buttons up, down, left or right. They can further create a join with another circle by clicking the mouse left button. This adds up their sizes and also their colors. The resulting circle is the color combination of both the colors of these two spheres. The user then continues dashing other circles and becoming bigger and bigger. Finally, they create a final gigantic circle  which is the combination of all the colors of circles present on the canvas. The beauty of the artwork is that the user starts with a white colored circle and ends up in something completely different every time. The user will also be offered with a set of settings to letting them play with the number of circles, their colors, sizes and the canvas size.


This slideshow requires JavaScript.


I rearranged the given questions as follows to give a more story-like flow to my essay:

About the artwork (Intro):

  • What do you want to communicate with/through your work?
  • Please use your own words to define the term strategy and the strategy you employed for this project.
  • How does your work encourage exploration, experimentation and/or discovery?

Interaction and Experience (Body):

  • Do you think your project is clear and focused and is the intended interaction interesting?
  • Does it incorporate visible forms of navigation? If so explain the navigation included in the work and how it promotes exploration.
  • Did you consider the mouse interaction? If so, how so. If not, why not?
  • If the mouse interaction is a click – why did you choose that form of interaction?

Reflection (Conclusion):

  • How did your final work change from your original proposal?
  • What changes did you make after the critique and what would you improve now
  • What concepts addressed in this class influence your project?
  • What is the most successful part of your final project?

ColorDash- A journey of designing interactive explorations

ColorDash is an interactive exploration of the spectrum of colors through the particle system. The artwork communicates the metaphor of color and size. The particles act as color carriers and the player’s particle has a unique ability to grow its size by eating other particles. With every dash the player’s particle acquires the color of the dashed particle and its size increases, getting a makeover every time. The dashboard enables the player to guess the resulting color even before dashing another color. The objective of the exploration is to dash as many particles as you can while learning how colors mix with each other. As the author, Kluszczynski, rightly states in his article titled ‘Strategies of Interactive art’ that an artwork is not merely a collection of objects but a field of activity wherein the users can immerse to bring the event alive. Similarly, a strategy, I believe is simply the way of arranging the elements in this field of activity creating different avenues of user interaction. When employed in an artwork, a strategy defines the direction in which the artwork will proceed. In this artwork, the strategies employed are the Strategy of Instrument (Primary) and the Strategy of Game & Rhizome (Secondary). The strategy of instrument could be defined as the plan of action for an artwork which enables the user to generate audio-visual elements by interacting with an instrument (interface). The user uses the mouse as an instrument to move around the world creating different colors every time they hit a particle. Also, the user by dashing other particles creates a different scenario every time, thus employing the strategy of rhizome. The entire experience is packaged in a game like structure where the user is displayed their score and the objective is to dash as many particles as they can. The catch here is that the artwork is strictly not a game as there’s isn’t a state of win and lose, it’s always neutral. However, the score keeps the user encouraged to continue discovering and dashing more particles.

The game starts with the score of Zero and the user’s particle color being White- the neutral color. It proceeds when the user starts dashing other particles and acquiring their size and colors. Throughout the journey, the dashboard on the right keeps the user updated with the current score and the current color. Interestingly, it also displays the Name of the nearest color helping the user better match the color and it’s nearest name. The game ends after the user has dashed all the particles and has acquired a final color. At the end, the size of the particle is quite large and the color just speaks aloud. This reinforces the color in the user’s mind with its nearest name, hex code and the rgb code. It acts like a take away from the game and also as a testimonial that the message of learning colors is being conveyed to the user.

During the game play, the interaction is quite interesting. It’s very minimal and yet keeps the user engaged throughout. The user only has to move the mouse to dash the particles. That’s it. No clicking, no hovering and no fancy key pressing and stuff like that. This ensures that the experience is seamless and does not have any hindrances in its flow. Further, the direction of motion is very intuitive, move the mouse left to go left, right for right, up to go up and down for down. Simple.

My final work did not change much as compared to its previous versions. I started with the core idea of particle system, color mixing and a mouse enabled interaction. The changes I made were to eliminate mouse click and just use the scroll, and change a couple of visual elements. The most successful part of my artwork would be a complete implementation of a complex idea. I struggled a lot initially to come up with the algorithms that made such type of explorations possible. But with some help from Daniel Schiffman’s Coding Rainbow and other tutorials on the web, I could make it happen. As far as my learnings are concerned, I believe the strategies helped me understand the underlying interaction models of artworks. Now I can strongly propose ideas and back them up by creating robust interaction strategies. Secondly, the programming assignments were a great chance to learn and dive deep into web animations. I now feel confident about creating web animations and reverse engineer the animations which I see on the web. Thanks to CSS3, HTML5 Canvas and P5.js. Lastly, this course was extremely helpful for me in knowing the subtle differences between Art and Design. As a designer, I always used to put the user in the centre of my frame of reference. This often kept me under constraints of heuristics and limited my ability to innovate. However, this class taught me how to balance between art and design (constrained art). A special shout out to my peers and the Professor. 🙂

Check out the live version here: Play Color Dash!


Daniel Shiffman’s tutorial:
XColor library:
Dat.Gui Library:–Basic-Usage

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s