top of page

The Whale

An interactive installation to encourage people to use less plastic and protect the environment


Valen Qiu,

Chloe Chen(me)


p5js, processing


3 months, Sep - Dec 2021

Plastic pollution has become a major and unavoidable issue. Every bit of plastic in our lives has the potential to poison the ocean. To avoid further mutilation of marine life, I call on people to use less plastic and to protect the ecology and wildlife through an interactive installation.

​【Open the code with a webcam computer to access the complete experience】

Concept - Ocean Waste Awareness

Why did we pick this topic?

The ocean occupies one-third of the earth's area, but now, the marine debris in the Pacific alone has reached 3.5 million square kilometers, even more than India's land area. It affects at least 260 species worldwide. 


Due to the reason that marine animals often mistakenly consume plastic garbage as food, their organs sometimes are cut by the garbages; some of them end up dead because they can’t eat any food since their stomachs are already filled with garbage. Marine debris can also entangle certain marine organisms such as cetaceans, making it impossible to break free.


Every piece of plastic in our lives may eventually flow to the ocean and pollute the sea. In addition to reducing domestic sewage discharge, pesticide pollution, factory waste and plastic pollution. We should not discard plastic domestic garbage on the beach within our capacity to prevent more marine life from being killed.



How do we approach the topic? What are we trying to express?

After deciding on the topic, my teammate and I further explored ways to express the concept. We had plans to use this project as a showcase at the school exhibition, so "playability" was also taken into consideration. Combined with what we have learned about poseNet in the course, we decided to combine postNet and the movement of the whale to allow audiences to feel the experience in an immersive way. 

Finally, our goal is this: By creating an interactive installation, helping people to understand and feel the importance of protecting the environment with an immersive experience. Pick up garbage, and protect the ocean!


Research and Study

Research on relative works

Before coding the actual program, we did research on similar works to study and analyze the process and animation. 

Plastic Reflective

Inspiration concept.

The reflection will follow the audience.  

Oceanic Aquarium

Great fish animation. 

The fish will follow the mouse.

Programming Console

The Code

My teammate and I coded the program altogether. The code was formed by three major parts: setting up Posenet, creating backgrounds and random garbage, and lastly the animation of the whale.





Insert ML5 library and define the wrist position 


Background, ending, garbages

The Whale

Animation, interaction, changing color, countdown


​【Open the code with a webcam computer to access the complete experience】

Final Thoughts

Environmental protection is a serious subject. When I was doing research for this project, the photographs of marine life deeply touched my heart. I created two projects relative to the environmental protection and plastic hazards during last year, both of which urged everyone to take action to protect the environment because I believe safeguarding the environment is everyone's responsibility. Environmental protection should begin immediately.


The Whale is an interactive installation. My teammate and I confronted numerous difficulties while doing this project. The most difficult task was implementing the whale animation. We explored several different approaches, yet since this was really beyond our abilities, our professor suggested we look for open-source whale animation to help us. Understanding someone else's code and translating it to our own can be challenging because the code we found, itself is written in another language(processing) that we must understand. Eventually, we got there and were able to show what we wanted to show. Yeeeah:D

Speaking of which, I'd want to highlight the most interesting aspect of this project: it has provided me with new perspectives on the world. As said before, using code to achieve a smooth 3D effect of fish requires a great deal of knowledge, such as 3D, and WebGL, but we eventually used this code implemented in a fake-3D method: we used a loop of 50 cylinders of different perimeters that are overlayed to form the shape of the whale. In this technique, even while the whale is moving, we can generate an animated whale by calculating the cylinder of the remaining body section based on the cylinder on the whale's head.

I hope you can try the project yourself and enjoy the experience we bring. Thank you for stopping by. 

bottom of page