Jellyfish and friends
"Interactive Jellyfish" is an installation where participants interact with a canvas that uses conductive ink and animated projections mapping to simulate the movements of jellyfish and other sea creatures. By touching the canvas, users influence these animations, creating a dynamic, educational experience of marine life and oceanic ecosystems. An integrated augmented reality (AR) component provides additional educational value by offering detailed information about each marine species’ biology and conservation.
Class : Nature of Code | Instructor : Daniel Shiffman
Designed and Developed : Panithan Kasinphila(Penny)
Inspiration
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 them.
P5.js Sketch
The interactive jellyfish installation is created using P5.js. The simulation focuses on three main aspects: shape variation, movement, and color variation. The code uses the drawMainShape() function to create the jellyfish's bell with connected vertices, modified by Perlin noise for an organic shape. The drawSecondaryShape() function draws tentacles with multiple vertex sets extending from the bell, influenced by Perlin noise to simulate gentle swaying. Perlin noise is crucial for generating smooth, natural randomness in the jellyfish's movement and shape. The noise() function produces these values, which are mapped to position and shape adjustments, resulting in a lifelike and dynamic animation of the jellyfish.
Code Reference : https://dev.to/mijim/creating-an-animated-jellyfish-in-js-39e9
By Medusa
Jellyfish 1
Stingray
School of fish
Code
Shape Variation
Bell Shape: The bell is drawn with curves extending from the center of the jellyfish. Perlin noise modifies the curve vertices, making the bell expand and contract in a realistic manner. The curveVertex commands in the drawMainShape function use coordinates adjusted with noise values to create dynamic, undulating shapes.
Tentacles: Tentacles are drawn using curveVertex commands in the drawSecondaryShape function. The vertices' positions are influenced by Perlin noise, giving the appearance of gentle swaying in the water.
Movement
In the draw function, Perlin noise is applied to position adjustments (offsetX and offsetY) to simulate the jellyfish drifting in water currents. This subtle application of noise makes the jellyfish's movements appear natural and fluid.
Color Variation
The strokeColor function calculates color values based on Perlin noise, which varies with the angle and frame count. This method ensures the jellyfish's colors change subtly across its body and over time, mimicking the way light reflects and refracts through water.
Animation
Continuous updating of the positions (offsetX, offsetY) and recalculating the shapes within the draw() loop animates the jellyfish in real-time. This real-time animation makes the jellyfish appear alive and responsive to the environment.
Projection Mapping
I used Madmapper software to manage and control animations created with P5.js. These animations were recorded and imported into Madmapper. I also integrated MIDI control within Madmapper, allowing scene changes triggered by a touch board from Bare Conductive. The touch board is connected to copper tape and conductive ink. When users touch the black ink painted on the physical canvas, the touch board detects the touch and sends a signal to change the animation in Madmapper. This setup enables an interactive experience where touching the canvas triggers different animations.
Fabrication
I used a foam board and painted it with conductive ink that was connected to copper tape. All of these elements were connected to a touch board from the Bare Conductive company.
Spring Show 2024
This installation, ideal for museums, galleries, and educational centers, engages visitors in marine biology and conservation through interactive, augmented reality. It's both an educational tool and interactive art. Audiences noted it’s perfect for toddlers and babies to learn through touch and see immediate responses.
