Concept:
This week’s assignment represents water droplets falling on the ground. They are visually represented as ellipses and they exhibit natural falling and splashing behavior.
It is inspired by the following slow-motion video:
Demo:
Code: https://editor.p5js.org/bdr/sketches/YS6DBtNOH
Process:
https://imgur.com/WlcV5ZmCode Walkthrough:
Drop Class:
Constructor: The constructor initializes a new water drop object with the following properties:
– Position: A 2D vector representing the initial position of the raindrop on the canvas. It is set to a random location within the boundaries.
– Velocity: A 2D vector representing the initial velocity of the raindrop. It starts with no horizontal velocity and a downward velocity of 5 pixels per frame.
– Acceleration: A 2D vector representing the acceleration of the raindrop. It starts with no horizontal acceleration and a vertical acceleration of 0.2 pixels per frame.
– Length: The length of the water drop, which is a random value between 10 and 20 pixels.
– r: Control the size of the splash.
– Opacity: Set a smooth transition for the splash.
– Landed: A boolean variable to indicate whether the water drop landed on the ground.
Methods:
– Update(): Update the water drop’s position based on the velocity and acceleration. It also limits the raindrop to a certain velocity.
– Display(): Draw the drop on the canvas as an ellipse. The color is white with an opacity of 120. When landed, its length is gradually reduced to create a disappearing effect.
– Land(): Display a landing effect. It is a shrinking ellipse with decreasing opacity.
Setup(): Create the canvas 640×640, and initialize an array of water drops (40 droplets).
Draw(): Call the object’s methods, and replace the drops that have landed with a new one creating a continuous simulation.
Challenges:
One of the challenges is certainly creating the perfect splashing effect, it took some trial and error before landing on the ideal parameters.
Improvements:
– Add water splash sound.
– Allow the user to control where the drops are originating from using mouseX and mouseY.