Our second assignment for ICM was to include the following three aspects into a p5.js sketch:
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.
I wanted to stick with simple shapes and color schemes in order to easily highlight what was interactive and what wasn’t. A minimalist at heart, I decided to go with circles and lines.
The mouse controls the size of the lines and circles, and color of the circles. The mouse Y position controls the color of the circles (the “inner” circles” have the opposite color of the bigger “outer” circle). The X position of the mouse changes the size of the circles; they are paired diagonally opposite in order to avoid circle overlapping when growing.
The X position also determines the size of the crossed lines. This was my one allowed “cheat” to use something new: abs(). This makes any integer an absolute value: any negative number turns into a positive, but any positive stays positive. With a little bit of tricky math, I was able to determine the following: the closer the mouse is to the horizontal center of the screen, the larger the lines, while the closer to the edge of the sketch makes them smaller.
The stroke of the circles changes over time.
The background is a different level of darkness each time the sketch is run. There is a rect with half alpha that sits on top of the entire sketch, that chooses a different color each time the sketch is run. Since everything below is gray scale, this produces a new monochromatic color scheme each time.
A fun error with mouse position:
I noticed that p5.js was keeping track of the mouse position outside of the canvas itself. This was most dramatic when I was scaling the size of my browser window as the sketch was running, causing the image above. Good to note this behavior, as in the future I’ll have to remember to build in safe guards against unexpected mouse position values (when we get into for loops).
Here is the sketch:
And here is the link:
https://alpha.editor.p5js.org/projects/HkTF0Khh
You can replicate the error described above. Simply hovering your mouse over the sketch keeps all variables within the expected bounds. However, while hovering over the sketch and clicking your mouse, if you hold down the mouse button and go anywhere else on your screen outside the sketch’s bounds, p5.js will still keep track of the mouse position. Good to know!