Project #3 Experimental Clock

Description

This project was about creating an experimental clock. I got inspired by one of my favorite things to watch, raindrops falling across the window. My idea was to create a psychedelic background that changes colors as the sky through the day with colored raindrops that move across the canvas. There are three drops in different sizes that represent and move based on seconds, minutes, and hours. They are surrounded by smaller raindrops that represent our memories, as a parallel time that takes us back to a specific moment so vividly that feels that we are traveling in time. The raindrops that represent the memories move quickly as our minds can take us to that moment in time.

Design Process

I start the design process by creating three different sketches on paper. Once I picked the raindrop sketch, I started the pseudocode to organized and structured my code.

Pseudocode

• Start with canvas size and background color
• Create static shapes. Raindrops
• Create three shapes that will move down at different speeds Moving raindrops
• Add detail color in the background and raindrops

The pseudocode, helped me to plan and research the code to create my design. To make my design possible, I researched about Class, Arrays, For loops, Time, and Map. In p5.js I set the variables to start my code. In function Setup, I added value and movement to the variables and array for this I used random which gives the flickering effect to the memory raindrops. Then in function Draw, I created the background, using map and angleMode, this helped me to give the effect of mapped mini-squares with a variation of RGB color per square. Then I created the three ellipses that move and represent the time. To create the movement I used Map to added value on the time position, and to change the color of the time raindrops I used the time position value. This way the raindrops change the color while they slide down through the canvas.

To create the memory raindrops, I used Class, as well as Move and Show functions. On Move, I added a random value; and on Show, I created the ellipse and details of the drawing, such as stroke, fill, and so on.

Reflection

To make this code, I researched different options such as IF or While conditionals, Array of objects, Map, angleMode, Class, Time, and others that I couldn’t use such as Curve Vertex. It was interesting to design this clock because it made me think out of the conventional, how can we represent time, and what is time for us, as well as being able to draw in code and play around with the different options that p5.j5 program offers. My challenge was to make the memory raindrops, I thought that I could use conditionals but then I realized that it wasn’t necessary. Also, I challenge with the direction of the time raindrops, at the beginning, the drops were going straight the canvas and not diagonal, I figured that I could use the time position on the ellipse values, that took me a while to realize but something that I like about this program is that is easy to play with it, fail and repeat.