My concept:
When it came to thinking of what my concept should be this week, I wanted it to somehow relate it to current times. It might not be apparent in this country, but it is autumn season and I decided to portray the fall aesthetic to this assignment. Using classes and arrays, I wanted it to create an interactive scenery. My idea was, having leaves falling off a tree while also having the user have the ability to click the screen and add even more leaves. I wanted the overall code to give off warm and calm vibes in order to emphasize the true feeling of autumn. I used mostly brown, oranges, and yellows to achieve this. In my last assignment I said if I could do anything to elevate my code, it would be randomness, and that’s exactly what I did. The colors of the leaves are all random. I also added a windy motion in order for the falling to look more realistic.
Highlight of my code:
//leaf class
class Leaf {
constructor(x, y, size, speed) {
this.x = x;
this.y = y;
this.size = size;
this.speed = speed;
// random colors leaves
this.leafColor = random([
"#c85d3a",
"#e58b3a",
"#d9a441",
"#a94432",
"#7a4a00"
]);
}
move() {
// fallinf down
this.y = this.y + this.speed;
// windy
this.x = this.x + 0.5;
// returning to the top
if (this.y > height) {
this.y = 0;
}
}
show() {
I’d like to say that the highlight of my code is my leaf class. This was my first time working with classes, so I was defiently proud on how it all came together and how I made multiple leaves with their own size, color, and speed. I also used random() to choose between different autumn colors, which helped make the leaves look less repetitive. My favorite part is the move() function because it makes each leaf fall while slightly moving to the side to give it a windy effect. I also added an if statement so when a leaf reaches the bottom, it returns to the top and continues falling. I made it so if the leaf goes pass the canvas, it moves back to the top. As the leaf falls, the y gets bigger and bigger, until it becomes bigger than the height. That’s when it goes all the way back.
How this was made:
I started off with just a tree branch and a bunch of leaves falling. It felt very dull and plain, and the opposite of what I wanted the viewer to feel. I went on Pinterest to get some autumn inspiration and got inspired by the pale orange sky and the clouds. So I decided to make some more leaves on the branches and on the ground to give a more alive look, as well as some clouds and a sun, all using ellipses. Besides the overall look, I also worked on creating the leaf class that controlled every leaf. Inside the class, I used a constructor to give each leaf its own position, size, speed, and color. I wanted the falling leaves to give me realism so I added the move and show functions. The move() function makes the leaves fall down while also slightly moving to the right to give the effect of wind. The show() function draws each leaf on the screen. I also used an array to store all the leaves object. And a loop that goes through the array and moves and displays every leaf. I also used mouse pressed so that whenever the user clicks, a new leaf is created at the mouse position. I think a struggle I had was thinking about how I wanted the leaves to fall down. Having them fall all straight looked very unnatural, so I added a small change to their x position to make it look like the wind was pushing them sideways. ( this.x = this.x + 0.5; ). The references helped me significantly when it came to recalling some steps like loops and mouse pressed.
References:
https://www.pinterest.com/search/pins/?q=fall%20and%20autumn%20aesthetic&rs=ac&len=12&source_id=ac_hoiAF6sn&eq=fall%20and%20aut&etslf=5522
https://p5js.org/reference/p5/for/
https://p5js.org/reference/p5/class/
https://editor.p5js.org/Aya_Riad/sketches/Wky6-ythQ
Reflection:
I liked how the ending product ending up looking. It has a moving effect that I’m very proud of, and i’m glad I got to learn how to use class and arrays. I think using random colors, sizes, and speeds helped make the leaves feel less repetitive. I also feel like I paid more attention to the aesthetics in this assignment and I feel like the outcome was defiantly worth the effort of creativity. Maybe if I had to work more on this, I’d play around with the movement of the clouds as well. Or maybe learn how to make a more accurate looking leaf, and different types of leaves. Overall, proud.