BLUE TIDES——A Web Based Interaction Experience Exploring Bioluminescence

An outcome video for my group project at school.
--Concept Description and Design Intentions:
Blue Tides is an interactive project that simulates bioluminescent jellyfish drifting in the deep sea.The project focuses on the relationship between nature and human interaction, and is based on the idea that light is not something the jellyfish always possess, but something that appears as a response to environmental disturbance.The inspiration comes from real marine bioluminescence, where light is often triggered by movement or contact. In this project, jellyfish remain calm and relatively dim when left undisturbed, while user interactions cause visible changes in light and motion.The main design intention of Blue Tides is to explore how code can be used to represent the subtle beauty of marine ecosystems. Through multimodal interaction, the project aims to create an immersive experience and demonstrate a form of responsive interaction, where human actions do not control nature directly, but instead trigger environmental reactions.

--Interaction Design Explanation:
The interaction design of Blue Tides is organised across three connected webpages, with each page introducing a different type of interaction. Together, these pages form a gradual progression from observing the environment to actively interacting with it.
Page 1 serves as the entry page. The visual design uses a dark blue gradient background combined with a semi-transparent user interface box to create a calm and immersive atmosphere. At this stage, users mainly observe the scene, with only a navigation button available to move forward. This limited interaction helps establish the mood and introduces the narrative of a quiet, undisturbed deep-sea environment.
Page 2 introduces mouse-based interaction. Users can click on the jellyfish to trigger a larger and longer-lasting ripple-like particle explosion. This visual effect represents the idea of bioluminescence being activated by disturbance. In addition, the jellyfish gradually change colour over time, shifting between blue, pale yellow, and light green. This reinforces the sense of a living system that reacts both to time and to user input.
Page 3 focuses on gesture-based interaction using webcam input through MediaPipe Hands. Different hand gestures are mapped to different behaviours: a closed fist forms jellyfish swarms, an open hand disperses particles, and a pinch gesture allows the user to form a mobius strip that symbolizes the unity of man and nature. In this page, we explored and self-learned how to use Three.js to make advanced 3D spatial interaction, and employs a Three.js–based 3D particle system, allowing real-time spatial transformation driven by the user’s physical gestures.
Overall, the project combines at least two interaction modes—mouse and webcam input—with each mode serving a clear purpose in the experience. The interaction design gradually moves from passive observation to active control, supporting the project’s theme of responsive interaction between humans and the sensitive environment.

Видео BLUE TIDES——A Web Based Interaction Experience Exploring Bioluminescence канала Young Doriane