Maths and Motions

Today we went a little deeper into p5.js. We made things MOVE, literally. Turns out, math is the trick behind making things move, which triggers all my old high school math memories. We played with things like sin(), frame rate, and modulo (%) to create different kinds of movement. It was interesting to see how equations that used to feel so abstract can actually turn into something visual and interactive on the screen.

截屏2026-09-09 19.47.20.png

截屏2026-09-09 19.46.31.png

My work: My world keeps raining

https://editor.p5js.org/rootallroot/sketches/6kcX-lE1S

截屏2026-09-15 18.37.33.png

1. What’s related to what?

The mouse, cloud, person, and rain are all related. The mouse controls the cloud, the person follows the cloud, and the rain appears underneath the cloud.

2. How are they related?

They are mainly related through their positions. I use mouseX to control cloudX, and then use cloudX to control the x-position of the person and the rain.

3. Is it a positive or negative relationship?