Jellyfish Floating
A jellyfish jumps and springs, emulating its graceful, floating motion.
Inspiration
I like jellyfish and their elegant way of moving through the water. Sometimes, I watch videos of them floating and dancing through the ocean currents, almost as if they are flying through water. This mesmerizing display of elegance and fluidity has inspired me to attempt simulating their behavior.
Shape Variation:
The drawMainShape and drawSecondaryShape functions use Perlin noise to add organic variation to the curves that form the jellyfish's bell and tentacles.
Movement:
In the draw function, Perlin noise is subtly applied to the position (offsetX and offsetY) adjustments. These adjustments simulate the jellyfish drifting in water currents.
Bell Shape : The bell is formed by drawing curves that extend from the center of the jellyfish. Perlin noise is used to modify the curve vertices, making the bell expand and contract in a lifelike manner. curveVertex commands in the drawMainShape function are fed coordinates that are adjusted with noise values to create dynamic, undulating shapes.
Tentacles: Similar to the bell, tentacles are drawn using curveVertex commands in the drawSecondaryShape function. The positions of these vertices are heavily influenced by Perlin noise to create the appearance of gentle swaying in water.
Color Variation:
The strokeColor function calculates color values based on Perlin noise, which varies with the angle and frame count. This method ensures that the colors of the jellyfish change subtly across its body and over time, mimicking how light may reflect and refract through water.
Stroke and Fill Settings:
The noFill() and strokeWeight() settings are used to outline the shapes with strokes rather than filling them with solid colors, contributing to a more delicate and ethereal appearance suitable for representing a jellyfish.
Animation:
Continuous updating of the positions (offsetX, offsetY) and recalculating the shapes within the draw() loop animate the jellyfish in real-time.
Code Reference : https://dev.to/mijim/creating-an-animated-jellyfish-in-js-39e9
By Medusa
Challenge
One of the main challenges was mimicking the way a jellyfish's body changes shape when it is touched or interacts with its environment, such as when being dragged with a mouse in the digital sketch. Implementing this interaction required careful manipulation of shape and motion algorithms, which proved to be a tricky aspect of the project.
Process
I believe that achieving a natural-looking deformation of the jellyfish, particularly when it is "touched" or dragged, was especially crucial. To accomplish this, I utilized Perlin noise, incorporated interactive elements, and manipulated shapes dynamically in response to user interaction.
Drawing the Jellyfish Shape
Main Shape: This is the body of the jellyfish. It's drawn in the drawMainShape function, which uses beginShape() and curveVertex() to create a rounded form. The radius and position of each vertex are influenced by Perlin noise noise() function, which varies with the frame count (i) and angle. This noise makes the edges of the jellyfish move in a non-uniform, organic manner. Secondary Shapes,These are drawn in the drawSecondaryShape function and likely represent the tentacles.
Fluid and Transparent Appearance
Fluid Movement is achieved through continuous recalculation of the jellyfish's position and the use of Perlin noise to alter the shape's vertices smoothly. Transparency, The strokeColor function defines the color and transparency of the strokes used to draw the jellyfish. The alpha value (the last parameter in the stroke function) is set to 60 (out of 255), which provides a level of transparency, simulating the jellyfish's translucent body.
Interaction with Mouse Drag
When the mouse is pressed mousePressed function, dragging is enabled, and the current mouse position is recorded. As the mouse is dragged (mouseDragged function), the displacement from the previous mouse position is calculated and used to update the offsetX and offsetY, which are then applied to the jellyfish's central position. This makes the jellyfish follow the mouse, simulating an interaction where a user might "poke" or push the jellyfish through the water.
The velocity (velocityX, velocityY) is adjusted based on the drag, and damping and elasticity factors are applied to simulate natural aquatic physics, like friction and bounce back when hitting canvas boundaries.
Exploring other forms
Next Step
Next, I plan to simulate a gentle, floating movement for the jellyfish, introduce multiple jellyfish to the scene, and explore the effects of water currents on their movement, capturing the dynamic interplay of marine life with its environment.
