P5.js { createVector / vector Math / array / class / display/ move/ fall/ bounce / isDone / gradientColor }
Click here to play the live project~!
My inspiration for this dynamic stroke came from the ginkgo biloba style, which was mainly applied to my shape and color choices.
First, I created some basic shapes, which I gave a gradient color change through the gradientColor function to simulate a ginkgo biloba leaf with a gradient color change from the edge of the leaf to the center of the leaf.
In terms of interaction, I used the mouseIsPressed code I learned earlier and the bouncing linear code I learned this time, and combined the two to show the bouncing effect of the ginkgo biloba leaf as it keeps touching the frame edge.
At the same time, I solved the problem of setting the center as the point to touch the edge during the bouncing process, as this would make the leaf incomplete and a bit strange when placed on my ginkgo biloba. I solved this by adding a radius to the center point. Also, I set the speed change.
On the leaf size, I gave it a breathing effect by correlating the size change to the frameCount via the sin() function. Because the sin function only takes values between (-1,1) and the change is too insignificant, I overlayed the use of the map() function to visualize its breathing effect.
Finally, considering that I couldn’t keep adding too many leaves to the screen, I used splice, but after experimenting with it, I realized that the leaves were simply clearer, and the effect wasn’t obvious to the naked eye for the first few leaves each time I made them clearer.
So I experimented with using if and isDone on top of each other, and set several methods in the class: fall(), move(), bounce(), to be used on different blades. Whenever there are more than 20 blades in the screen, the first 20 blades will automatically stop triggering move() and bounce(), and trigger fall() instead, so that they can fall out of the screen smoothly.
In fall(), I simply set this.pos.y to fall at first, but then I realized that the fall of the blade is too mechanical. In order to add some animation to the blade fall as much as possible, I tried to apply the equation of sin() to this.pos.x as well. However, considering that the size of the blade is also changing with time, I tried to associate these two variables, so that the change of this.pos.x changes with the change of this.size, so that no matter how big or small the blade is, the change of x during its fall is always more obvious, avoiding the situation that the diameter is big, but the change is too small, which makes it impossible to be seen.
Future Potentials: In the future, I think this project can make more efforts to imitate the real blade falling trajectory and shape, and properly combined with 3D effect may also bring more possibilities to this work.
Leave a Reply