I have animated the sketch that I drew last week. There were three requirements to this new animated sketch:
- one element controlled by the mouse
- one element that changes over time, independently of the mouse
- one element that changes everytime the sketch starts up
By utilizing the mouseX and mouseY constants, I am able to change the size of the spirals, the color of the background, and the positioning of the tetris pieces, all based off the positioning of the mouse.
The element that changes over time, independently of the mouse, would be the rotating tetris pieces and the forever growing circle that is added in the middle of the sketch.
The element that changes everytime when the sketch is started would be the color of the growing ellipse and the color of one one of the tetris pieces.
I added these previous additions to the sketch because I wanted the tetris pieces to look like they are actually falling or spiraling down into whatever hole they've fallen into. And because vertigo is a state of disorientation, the mouse does not do what the user expects it to do.
In addition to these animations, I also removed almost all the instances of any hardcoding. Variables are used instead of constant values, so this sketch could easily be changed to another canvas side.
The trickiest thing about the project was the rotation of the pieces. I eventually had to restart my progress for the rotating pieces, because I was essentially using trial and error to find the correct positions. When I started on a fresh slate, it allowed me to clearly position the pieces exactly where I wanted them.