Project 2 (Proposal)- Color Snow


The second project in the interaction design class aims at creating a digital/physical artwork using tools like Processing/P5.js and/or Arduino. I chose P5.js as the tool to create an art piece demonstrating the Strategy of Instrument. Following is my project proposal:

Proposal 1:
The Strategy of Instrument can be defined as the strategy wherein an Interface, which is the central entity of the interactive experience, generates visual/audiovisual events when the player interacts with it. The interface allows the player to control the motion and flow of these audio-visual elements. In my project, I wanted to explore three important concepts along with the strategy: color, particle motion, and winter! After fiddling with many ideas, I settled down with a game which could test the color sense of the player through particle motion in the winter season. I call the game ‘Color Snow’.

Color Snow is a color testing game where the player uses the color pad (interface) to identify the correct snowflake. The aim of the game is to help people build a strong color sense by mapping and identifying subtle differences in color. The canvas is presented with a background of a snowy region on top of which the player stats appear. The player starts with five (5) lives and an initial score of Zero (0). The snowflakes then start appearing from the top one by one. Their distinct color can be immediately seen on the color pad (right bottom) which acts as an interface to achieve the goal. The player has to first quickly identify the color of the flake and then immediately turn towards the color pad to choose the same color. After finalizing the color, the player has to click on one of the color blocks as their final choice. If the color is correctly identified, a feedback is provided by distinctly sparkling the snowflake along with a one-point increase in the score. If the chosen color is incorrect, the snowflake in observation starts falling rapidly on the ground until it disintegrates and vanishes. Poor snowflake 😦 This sequence continues until either the player has lost all the lives or they have reached the final level (Level 35). As the level progresses, the difficulty increases via the addition of more similar looking colors and their total number. Level one starts with 4 color blocks (2X2) of 2 colors in the color pad, level 11 starts with 9 (3X3) color blocks of 3 colors, and level 25 starts with 16 (4X4) color blocks of 4 colors. Level 35 is the final level in the game. The player loses one life if they fail to choose the correct color.

The participant or the player plays a very important role in the game. They either act as the protagonist who can successfully move the game forward or the antagonist who doesn’t love winter and snowflakes. Yes, by interacting with the snowflakes, the player actually builds a rapport with them which increases the contextual and emotional conversation between the two entities. The picture of a real snowy place in the background gives the entire event a more realistic feel of winter. Through this art piece, I want to help people build a strong color sense by identifying subtle color differences. I also want them to perceive winter as colorful as summer by engaging with the colorful snowflakes in a playful way. The whole concept here revolves around the theme of color exploration and identification with the help of gamification. Not to forget, the strategy of instrument still plays an important role as the player tends to have an intimate conversation with the snowflakes via the interface (color pad).

Shown below are the images of the game in level 1 and level 2:

Color Snow- Level 1
Color Snow- Level 2
Color Snow- Level 3

Sketch: Color Snow!

Proposal 2

The Ripple Effect: Since the above project did not completely employ the Strategy of Instrument, I revised the proposal and came up with a more relevant idea. The new proposal is an interactive artwork which deeply employs the strategy of instrument by enabling the player (user) to generate audio and visual elements by actively engaging with it. The new project called The Ripple Effect is an interactive exploration of ripples on a dark water surface. The artwork incorporates the metaphor of the ripples generated when a stone is thrown in water. The mouse click resembles the stone throw which in turn generates the ripples. To make it more socially engaging (which makes me recall my experiences as a child of throwing stones and creating ripples in calm water 🙂 ), the artwork also proposes multiplayer interaction. So, many users can generate ripples at the same time on the same canvas. This increases the user engagement with themselves and the artwork. The realistic background creating a truly mesmerising effect. Through this artwork I want the participant to recall their childhood memories of creating water ripples!

Ripple Effect

Live version:

The live version has been adopted from Ed Ball’s Rain landing animation.

Responses to HTML5 Canvas tag

  • Define what the canvas element is in html5?
    • The Canvas element in HTML5 is a way to draw graphics on the web using JavaScript. Canvas enables the user to create a container for the graphics and then start drawing on the fly using JS.
  • What is the purpose of the canvas element and how can it be used?
    • The purpose of the canvas element is to enable the user to draw graphics on the fly using JavaScript. The user can quickly draw shapes like circle, line, rectangle, polygon and also play with their orientation and colors using canvas.
    • HTML Syntax: <canvas id=”myCanvas” width=”200″ height=”100″></canvas>
      JavaScript Syntax:
      var c = document.getElementById(“myCanvas”);
      var ctx = c.getContext(“2d”);
      //draw your graphics here
  • Find an example of how artists and/or designers have used canvas for their work.
    • Interactive text by Tim Holman
  • How do you think this element has changed what can be accomplished on the web?
    • The canvas element along with the limitless possibilities of the JavaScript programming language has created unconstrained opportunities for designers and artists. With simple tags like lineTo(), arc() anyone can create static graphics of all kinds. Moreover, with a few math tweaks, these static graphics can be further animated. I think a lot can be accomplished using the canvas tag in the field of web animation.

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