Usually, when I physically paint, my go-to painting is the night sky. So I wanted to replicate that idea in this assignment. I created 4 classes: Rain, Moon, Sun, and Grass. The Rain class is the one I’m most proud of. With the help of the coding train, I displayed many drops falling from the sky using a fall function and a draw function at different x and y positions as well as different speeds. Here is the code:
class Rain {
constructor(yspeed) {
//random so drops dont fall in the same position/speed
this.x = random(400);
this.y = random(-500, -50);
this.yspeed = random(5, 7); //how fast it falls
}
// function for raindrops
fall() {
this.y = this.y + this.yspeed;
//ensures that rain is constantly falling
if (this.y > height) {
this.y = random(-200, -100);
}
}
//shows raindrop
draw() {
stroke(255, 255, 255);
line(this.x, this.y, this.x, this.y + 10);
}
}
After this, I developed the moon and grass class. I then created a sun class that displays when the mouse is pressed. Furthermore, when the mouse is pressed it makes it turns from nighttime to daytime and stops the rain. I also created two people to stand there and look at each other. I attempted to make a tree however after a few hours it still wasn’t working so I ended up just putting an image of a tree in the art to add more details.
This is my sketch:
Future Improvements:
- I would like to build my own tree rather than upload an image from the internet.
- I would like to animate the two people to make it seem like they are hugging/kissing
- I’d also like to make the rain look more realistic (maybe have rain closer to the screen look bigger and rain in the back look smaller and splashes on the grass).