For this assignment, I chose between 3 ideas: a fishpond simulator, a fizzy drink, a popcorn machine, and an ant smasher game. I ultimately decided to go with a fishpond simulator. I thought it would be cool, and I also kind of missed my fish back home.
I started by looking at a particle simulation example from p5. I then wrote my own and modified it so that each particle was a fish rather than a particle. I then worked on making classes for the lilies, lilypads, and finally, the ripples.
A few things I added on were the camera that allows you to see your reflection on the fishpond, a star function to more easily draw the patterns on the lilypads, and some light rotations on the fish.
The code I’m most proud of is probably the lilypad part because I finally got to understand how to rotate, push, and pop the petals without destroying everything.
fill("#f0f0f0") translate(this.x, this.y) for (var i = 0; i < 10; i++) { ellipse(0, 40, 25, 32); rotate(PI / 5); } fill("#ffffff") for (var i = 0; i < 10; i++) { ellipse(0, 30, 20, 32); rotate(PI / 5); }
In the end, I’m pretty happy with the final work! It generates a new pattern of lilies and pads whenever it’s run, and the fish just drift aimlessly throughout the pond. It definitely has the vibes of a fishpond. With a bit of music, it would be a very chill and zen piece to stare at and contemplate life with.
Final output (Open in P5js to show your reflection!)
The most difficult part was trying to make certain elements rotate without making the entire piece rotate around the origin. I still wish I did better on that aspect and will probably try to improve it still.
I want to improve my piece by adding a few things: a particle simulator for bubbles rising up in the background (here’s one I’m looking at from Nature of Code), an interaction where the fish move towards a hovering cursor then scatter off when clicked, and rotating / subtly floating lilies and lilypads. I also wish the fish pointed in the direction they were swimming.
Other minor things I would add are speckled or multi-colored fish, lily buds and stems, and a way to “ripple” the camera photo when the screen is clicked.
Awesome! To have the fish face in the right direction you can use angleBetween to calculate the angle and push -> translate -> rotate -> drawFish() -> pop
The drawFish() function would draw a fish at 0,0. Basically you would translate to the x,y you want the fish at, rotate the drawing coordinates and then draw the fish. The push/pop would ensure the translation/rotation is only for that one fish.
https://p5js.org/reference/#/p5.Vector/angleBetween
https://p5js.org/reference/#/p5/rotate
https://p5js.org/reference/#/p5/push