- Working Process
- Inspiration
The moment I finished completing the Week 5 assignment, my inspiration was completely drained. Last night, I pondered over what I should do next. What possesses elasticity? Suddenly, the idea of the jellyfish, often hailed as the “most graceful creature of the ocean,” struck me. It appears soft and boneless, yet it moves with exquisite grace in the water, relying on contraction. In the dead of the night, I found a reference photo and abstracted it into geometric patterns. I devised a rough plan for the code I needed to write and outlined my queries.
- How the Jellyfish Comes Alive
My code consists of 18 circles and 22 strings. At the top sits a large circle, surrounded by 5 medium-sized circles connected to it (5 strings). Each of these medium-sized circles is also connected to its adjacent circles (5 strings in total). Additionally, there are three long tentacles, each featuring three circles connected to the large top circle (resulting in a total of 3 * 4 = 12 strings). I adjusted the code based on an example code, tweaking parameters like radius and stiffness. Thus far, I have created a rigid version of a jellyfish.
At this point, I encountered two problems: 1) The structure is very rigid, and I want to replace the straight lines between the spheres with curves that can bend as the distance and forces between them change; 2) The tentacles often get tangled up and lack fluidity as they float in the sky. I was stuck at that moment, so I reached out to our friend Lisa for help. (Thank you, Lisa!!）
Lisa suggested that for the first issue, I could use curveVertex to create curves between the spheres, and for the second issue, I could try adding gravity to solve it. So, I removed the display function from the “Spring” and replaced the straight lines between each sphere with shapes formed by “curveVertex”. Regarding the second issue, I attempted to add gravity, but I felt that the descent speed was a bit too fast. Therefore, I also added resistance that varies with the speed and direction of movement, constant buoyancy in water, and “water wind” from the boundaries (which is also related to the mass of the object) to affect the jellyfish’s movement, making its swimming effect in the water more realistic. （Now I had the “black black ver”!)
Afterward, I invited my friends to see if they could recognize it as a jellyfish. One friend suggested that I could make some changes to the background color, so I added a function to dynamically change the background color, resulting in a vibrant color version. Some other friends thought that my jellyfish resembled an umbrella, so I recalled the rain function I had previously implemented (in Week 3 Assignment). I adapted that part of the code, aiming to create a raining effect when the objects in the `Class Ball` bounced off the boundaries. I attempted to use `true` and `false` to trigger the rain, but in many cases, even after bouncing, the raindrops didn’t appear. I felt confused, so I consulted David. He explained that using `true` and `false` causes the effect to occur only momentarily, making it easy to miss. He suggested using a timer function to address this issue and taught me how to use the “deltatime” function. By implementing a countdown approach, I achieved the desired effect. I am deeply grateful to him for his help! (Thank you, David!!) Now I have the third version: “Jellyfish? Umbrella?”
At this moment, one of my friends mentioned that she still preferred the initial “black black ver”, but suggested that it would be nice if the jellyfish’s glow changed when it touched the boundaries. This reminded me of the “blendMode(ADD)” function. Utilizing the timer function David taught me earlier, I implemented a mechanism where the jellyfish triggers “blendMode(ADD)” when touching the boundaries, while in other situations, it appears semi-transparent white.
- Finished Work
Ver 1: Black Black
Ver 2: Vibrant Color
Ver 3: Jellyfish? Umbrella?
- Reflections and Lessons Learned
- How to use CurveVertex.
- How to utilize the timer function.
- Of course, how to use spring to mimic realistic movements!
- Link to the sketch (Click them!)
Leave a Reply