With some learning this assignment went okay.
I started off thinking it would be nice to create a scene of windy day, with leaves falling down. By setting the variables and creating the list I begun the assignment.
I created the class in another js file. I originally think that the class should probably have some variables in the constructor, but I then realized that I don’t need any, speacially when I want to have random variations in its speed/size, then there is the classic functions of update/display.
Moving on to the main sketch, by calling the functions I encounter error. I understand that this may look like I did not call the class’s js file, but I did have it set in the index.html file, so that was not the case.
Then I came to realized after some reasearch, to call functions in objects in a list, there requires a specific way of writing the code, which is like this.
At this point I just use ellipse as a substitute for leaf.
I quickly realized that the ellipse flee out of the screen in a blink of the eye, and it leaves an empty screen for the rest of the time, this is not acceptable, so I decided to add another function call checkEdges, which let the leaf’s position be reseted in a random place on the x axis, and some pixels above the canvas which cannot be seen on the y axis.
This did not come to work at first. The leaf never re-enter the canvas. Then I realizedd that this is the problem of speed. The leaf did have its position be reseted above the canvas, but it never fall down, so I added a line to mult(0) in the update function.
Then I realized, I didn’t code in the required ES6 format, so I changed some of my codes.
In the end, I find a transparent image of leaf and import it on p5 editor, here is the end product.