I was inspired by the appearance of the project ‘Time in Color’ by Scott Thrift. Scott tries to create a clock which represents a 24 hour day using sunrise / sunset like colors.
I wanted to take it further and make the gradient change according to time.
A sketch of what I wanted to make.
Top: AM
Bottom: PM
As I began to code, the gradient became too overwhelming so I focused on the changing of color based on the mouse position.
I did this by tracking the angle of the mouse in relation to the center of the circle. However, the top and bottom were the same. Therefore, I had to use the ‘if’ function to distinguish the two.
To present the function ‘random’, I made the background different in greyscale each time the code is run.
To make it more fun and aesthetically appealing I experimented with the tracing of the mouse. This resulted in a Kandinsky mobile feel.
This is the final output.
version 1: https://editor.p5js.org/embed/HywwAYpu7
version 2: https://editor.p5js.org/embed/SkeehRTuQ
