Jellyfish
A jellyfish jumps, springs, and floating motion.
An interactive canvas that uses conductive ink and animated projections.
I am fascinated by jellyfish and their graceful movement through the water. Watching them is calming and satisfying; they float and dance with the ocean currents as if they are soaring underwater. Inspired by this, I'm drawn to an interactive canvas that uses conductive ink and animated projections. My aim is to create an "alive" jellyfish that people can gently interact with by poking around.
Code Reference : https://dev.to/mijim/creating-an-animated-jellyfish-in-js-39e9
By Medusa
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.
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.
Soft body
I currently use soft body physics to simulate the gentle, floating movement of jellyfish, introduce multiple jellyfish into the scene, and explore the effects of water currents on their movement.
Reference
