Oceana

#StopOverfishing

Overfishing is one of the major environmental problems that humans face today.
To set a focus on this global issue we developed an interactive online experience for the ocean environmentalist organisation, Oceana.

It is time to get the fish back

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.

The evolution of the idea

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.

Count me in!

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 webspecial, 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.

Real-time data

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.

Joining the swarm

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.

Real-time data
Stubborn on vision, flexible on details

At Demodern we always seek out projects for the greater good, it was a privilege to help do our part in spreading the message. We addressed a serious issue in a playful manner, putting great effort in every detail, from the music to the most realistic fish representation possible in order to deliver an out of schemes experience.

Oceana

#StopOverfishing