Here is the link to the sketch: https://editor.p5js.org/WentaoWang/sketches/3P2nNrOD3
The topic I chose to express is “expend & shrink” and “hard & soft”.
I chose to use mouse to control the movement of the shapes. The more the mouse moves to the center, the small circles will move toward the center, while the circle in the middle will expand to the edges of the canvas. The movement of the mouse also rotates and changes the square in the middle.
I drew two squares in the middle to form a star with 8 angles. At first, I couldn’t get the two square to rotate at the same speed but with different starting angle. To solve this problem, I put the two squares in two separate push and pops, which worked in the end. I guess the rotation function might disturb each other when put together.
Great practice with different kinds of variables this week, as well as rotation. Regarding your comment, “I guess the rotation function might disturb each other when put together,” you are absolutely correct! Tansformations of the canvas, such as rotation, are cumulative, so push( ) and pop( ) are a way to “isolate” those changes in order to not impact the rest of the sketch in the same way.
With the effect of the shapes changing, I’m reminded of this Coding Train challenge on circle morphing: https://codingtrain.github.io/website-archive/CodingChallenges/081.1-circle-morphing-part-1.html