Link: p5.js Web Editor | NOC-W6 Assignment Structure with Springs (p5js.org)
In this assignment, I created a simulation of a bundle of balloons. The bottom of the string is fixed in the center of the bottom canvas. To interact, users can drag the point where the bundle of strings interests. Then the balloons (circles) would move accordingly with certain elasticity. All of the strings, including the bottom one, are all springs and have certain elasticity that would make the intersection point return to approximately the center of the canvas, and the balloons evenly distribute around the intersection point.
I first created the spring system where all balloons are connected to the intersection point through springs. Then, I added the single spring at the bottom outside the loop that creates the other springs to make sure it’s not affected by the other balls. And the bottom of the string is another fixed ball so that it doesn’t move and is also easy to code (don’t have to create another spring system.
Then to make the balloon seem more natural, I decreased the k and applied floatage to the balloons so that the balloons won’t move too drastically and have a sense of floating in the air. I also added gravitational repulsion force to make the balloons not collide with each other too much, which always happens when moving the balloons left and right before applying the force.