Category A11. Charities & Non-profit
Product/ServiceOCEANA EUROPE
Idea Creation DEMODERN Cologne, GERMANY
Idea Creation 2 PANTHALASSA Hamburg, GERMANY
Production DEMODERN Cologne, GERMANY
Production 2 PANTHALASSA Hamburg, GERMANY
Additional Company GERMAN WAHNSINN Hamburg, GERMANY
Name Company Position
Vivien Schulze Demodern Digital Agency Art Director
Giulia Pignataro Demodern Digital Agency UX Designer
Eduardo Marzionna Demodern Digital Agency Art Director
Patrick Heintzmann Demodern Digital Agency Creative Technologist
David Nemes Demodern Digital Agency Developer
Fernanda Sabaudo Demodern Digital Agency Art Director
Steffen BrĂ¼ning Demodern Digital Agency Digital Producer
Emile Harmel Demodern Digital Agency Creative Technologist
Philpp Feit German Wahnsinn Sound Design
Kristian Kerkhoff Demodern Digital Agency Creative Director

The Campaign

Based on the idea of replenishing the ocean through responsible fishing, and the urgency of creating and spreading awareness of depleting fish stocks, we aimed at an engaging stop-overfishing web experience that sends a message, pushing the mass into taking action and educating the population about the endangered status of overfishing. The web special is an immersive ocean experience, highlighting the beauty of the underwater world with its fish on the one hand, and educating the users about the danger of overfishing on the other hand. In contrast to the serious tones most campaigns are based on, we took a playful approach into the web-experience; prompting users to create and introduce individual fish in the ocean through the interface and influencing the experience by talking about it on Twitter. All this in parallel to learning about Overfishing through the experience itself.

Creative Execution

We wanted to achieve a recognisable behaviour of fish within a swarm. Additionally, we wanted the swarm to be reactive through user-input like a mouse movement. Therefore, we used a mix of basic boid and flocking algorithms in JavaScript to handle the three common dependencies in a swarm behaviour like alignment, cohesion and separation which are also influenced by mouse interaction. We decided to go with WebGL/Three.js. We spent some time to find a good workflow for porting animated 3D Models from Cinema4D to Three.js and switched to Blender and moved on. Due to the freedom and faster implementation of skinned animated Collada models in Three.js, we chose Collada over JSON. To keep the memory low and the FPS up implemented render pauses where possible, custom shaders for materials and textures, minimised draw calls to keep a low memory footprint.

The web special was launched on World Ocean Day on June 8th and more than 10.000 fish were added to the swarm since.

The commitment of the supporter is translated into a fish generated in real time: whether supporting the cause on social media using the official hashtag or submitting their message in the web special, their contribution is added into the virtual ocean through the appearance of a fish. In this way, each fish is a stored message from the growing community that can be rediscovered at any time by catching a fish. We are frequently running a node.js service which is looking for tweets on Twitter and Instagram that contain the #StopOverfishing. That data gets injected into our Firebase structure which takes care of storing and synchronising the data across all clients in real-time. The Client just listens to the Firebase stream and receives the info that someone used the hashtag StopOverfishing or created a fish on the page itself.