Aquatic Resonate
An interactive underwater ecosystem where algorithm meets organism
一个交互式水下生态系统，算法与生命在此相遇
From the first experiments with Perlin noise in p5.js, I felt the allure of simulating natural phenomena in code — a harmony between randomness and structure that feels almost magical.
从第一次在 p5.js 中尝试 Perlin 噪声开始，我就被用代码模拟自然现象的魅力所吸引—— 那种随机与秩序之间的和谐，几乎有种魔法般的感觉。
Live Demo
Click and drag to interact with the particles. Allow camera access for hand-gesture interactions.
点击拖动与粒子互动。允许摄像头访问以启用手势交互。
Camera permission required for hand-tracking. Best experienced in fullscreen or on the p5.js editor.
Overview
Aquatic Resonate is an interactive underwater ecosystem featuring luminous jellyfish that drift and pulse rhythmically, shrimp-inspired Boids whose segmented bodies sway like real crustaceans, and a sea of tiny vehicles tracing the hidden currents of a dynamic flow field.
By weaving together vector physics, spring-mass systems, and real-time hand-pose detection via ml5.js, I sought to create a living painting where every gesture or click generates ripples of color and motion, inviting viewers into a captivating dance between algorithm and organism.
Technical Elements
Flow Field
A grid-based flow field using Perlin noise, with carefully tuned parameters for noise scale, update frequency, and resolution — balancing dynamic activity with visual tranquility.
Jellyfish
Each jellyfish pulses forward using only the positive half of a sine wave, creating motion reminiscent of natural jellyfish propulsion. Randomized base radius, mass, and hue ensure visual diversity.
Shrimp Boids
A chain of interconnected spring-ball systems with varying stiffness and damping properties, combined with Reynolds's flocking rules — alignment, cohesion, and separation.
Hand Interaction
ml5.handPose() translates real-world gestures into virtual ocean disturbances — fingertip movements create expanding ripples, and specific gestures generate drifting bubbles.
Aesthetic Approach
To evoke a vivid underwater dreamscape, careful attention was given to color dynamics, transparency effects, and blending modes. Using the HSB color space, jellyfish radiate gentle purples and pinks, contrasted by particles in complementary blues and greens.
Shrimp Boids transition elegantly from magenta hues at their heads to subtle teal gradients towards their tails, with brightness and opacity tied to their velocity. By drawing particle trails onto a separate graphics buffer with additive blending, each movement leaves behind glowing afterimages, enhancing the sense of depth and dynamism.
Reflections
This project underscored the profound impact of emergent behaviors arising from simple rules and parameters. Even subtle adjustments in numerical settings could dramatically alter the ecosystem's visual and behavioral authenticity.
Integrating gesture detection via ml5.handPose opened exciting avenues for natural and intuitive interaction, while simultaneously highlighting challenges in responsiveness and stability. Ultimately, this experience enhanced my appreciation for the nuanced artistry inherent in creative coding — the delicate interplay between technical precision and aesthetic sensibility.
Special thanks to Professor Moon for helping me conquer many difficult problems and providing inspiration throughout the process.
Future Directions
Moving forward, I envision enriching Aquatic Resonate with interactive audio elements, transforming visual movements into dynamic soundscapes. Implementing user-configurable interfaces through tools like Tweakpane could encourage exploration and personalization. Additionally, integrating AI-driven behaviors and transitioning this simulation into immersive VR environments could profoundly expand its experiential impact.
Built With
- p5.js
- ml5.js (handPose)
- Perlin Noise Flow Field
- Spring-Mass Physics
- Reynolds Flocking