Archives for February 2024

P5.js { attraction / repulsion / gravity / resistance / buoyance }

Inspiration: 

To create an imaginary environment based on this inspiration, I first tried to draw the fish shape and put two fish on the canvas to do tests. 

To visualize the fish leader and her advocates separately, I have thought about many ways to realize it. I first tried to create two different classes, so that there attributes would affect each other, but when finishing the coding, I found it quite redundant. So, I decided to apply the same class, but to push them separately and utilize the “this” and “other” concept we have learned in class to do the between object attraction. 

But the attraction and repulsion turn out to be quite fast, and for my visualization, I need to let those advocates be attracted to the fish leader but stay surrounded by her. So I determined a different mult coefficient to accelarator in attractedTo and repelledFrom function to control this. In repelledFrom fuction, I made the acc really small to make them move but still surrounding the fish leader once they come close to the leader. 

 

To add more fun, I also divided the canvas into two parts and applied different resistances to each of them. The above part would be the shallow sea water, and the down part would be the deep sea, and I put the resistance of deep sea pretty high, so that the fish shoal would move much slower in the deep sea area. 

If I had more time, I would like to try building a more sophisticated and complicated atmosphere where some sea plants would exist to enrich the sea environment. Also, I could apply the attraction and repulsion forces between fishes and different kinds of plants, respectively. Or probably build a game on it, where people could use mouse or key interaction to drag certain fish to certain plant, and if this kind of fish do not like eating the chosen sea plant, a repulsion effect would be applied, and that player would lose one point~ something like that hhhh. 

https://editor.p5js.org/TinaZhang226/sketches/AB0SGAY-n

P5.js { gravity / velocity / acceleration / mass / applyForce() / mousePressed / mouseDragged / mouseReleased }

Click here to play the live project~!

Speaking of natural phenomena, the first thing that pops up in my mind is the Physics models I have learned in senior high school. And one that I would like to try this time is the spring with a bob. 

First, to realize this model, I need to create two different objects, one is the spring, and the other is the bob. And I have to make the 

Since I have to link the two objects together, I wrote a connect function to make the spring forces linked to the position of bob. 

       

At the same time, I set the constraint of how long the spring can be to make it look closer to the reality world. 

Minimum Length Constraint (minlen): If the distance between the bob and the anchor point of the spring is less than a specified minimum length (minlen), the method adjusts the bob’s position to ensure that the distance becomes exactly minlen. This prevents the bob from getting too close to the anchor point.

Maximum Length Constraint (maxlen): If the distance is greater than a specified maximum length (maxlen), the method adjusts the bob’s position to ensure that the distance becomes exactly maxlen. This prevents the bob from moving too far from the anchor point.

About the bob object, I practiced what we have learned in class about velocity, acceleration, and mass to apply a force. 

 

Finally, to realise the effect of freely dragging the bob on canvas, I add 3 functions in the bob class:

handleClick(mx, my): to detect whether the user has clicked on the bob – let d = dist(mx, my, this.position.x, this.position.y) calculates the distance between the mouse click coordinates (mx, my) and the current position of the bob; and this.dragOffset.x = this.position.x – mx; and this.dragOffset.y = this.position.y – my records the offset between the position of the bob and the mouse click. 

stopDragging(): to stop the dragging state of the bob;

handleDrag(mx, my): to update the position of the bob during dragging – if (this.dragging) { … } checks if the bob is currently being dragged; this.position.x = mx + this.dragOffset.x and this.position.y = my + this.dragOffset.y updates the position of the bob based on the mouse coordinates and the recorded offset.

 

Future Potentials: In the future, I would like to make the spring a soft line to create more elegant and changeable effects when dragging the bob. 

Notes: I used an online emulator “Spring 2D” to test on different numbers of gravity, mass, damping, spring length to choose suitable ones to be applied in my project: https://www.myphysicslab.com/springs/2d-spring-en.html.

 

 

 

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.