For my project this week I knew I wanted to do something related to water. I decided to pick rain, something I miss when in this country. Below you can see the program I created, and you can view the full code on my GitHub here.
The program is simple, it generates raindrops that will fall down the screen. There are sliders to modify the rain’s density and the wind’s speed “blowing” the rain either left or right. To do this, there is an array containing a Drop object that stores a position, velocity, and acceleration vector, that will update itself when step() is called. In the draw() function, there is a loop to iterate through the rain array to update the position of each raindrop. To simulate wind, the acceleration vector is given an x-value based on the current value of the wind slider. This makes the vector move along the x-axis to emulate wind blowing the rain particles. After updating the position, it will draw a line based on the length of the raindrop and its previous x position. The Drop class can be seen here:
class Drop { constructor(vel, acc, angle) { this.len = random(10, 15); this.pos = createVector(random(width), -this.len); //slightly varying velocity so they all dont fall at the same exact speed this.vel = createVector(0, random(0.5, vel)); this.acc = createVector(angle, acc); } step() { this.vel.add(this.acc); this.pos.add(this.vel); //make sure the drops stay in bounds of screen if (this.pos.x > width) { this.pos.x = -this.len; } if (this.pos.x < -this.len) { this.pos.x = width; } } show() { //draw raindrop stroke(209, 255, 251); line( this.pos.x, this.pos.y, this.pos.x - this.vel.x, this.pos.y - this.len ); } }
Overall, I don’t think there is much else I can do to improve this program. One idea I had was to try to have an effect such as a ripple when the drop would hit the ground. Perhaps it would also be interesting to try to emulate the rain in three dimensions, which would allow for wind to blow in two different dimensions.