https://mango-media.eu/media/pages/creative-coding/meridian/102091aaf1-1619350898/meridian.png
Mango Media - Meridian

Meridian

2021

Computer vision with Javascript manipulating an animation.

The focus of this project was to highlight the correlation between increased human activity + pollution using a metaphorical representation of how over-population in cities impacts the environment.

Date

25/11/2018

Client

Self Directed

Location

Planet Earth

Service

Interaction design, computer vision + immersive technology

Tools

Javascript, html, css

Concept

A camera captures the number of people in view which is then translated into an interactive animation that changes in vibrancy + energy depending on the number of people engaging with the installation. The graphics that form the visuals represent toxic particles generated by humans: Sulphur Dioxide, Nitrous Oxide, Carbon Monoxide + Methane.

When there are many people in view of the camera, the animation transforms into a kinetic burst of colours + shapes, when zero people are in view, the animation lessens. Every year approximately 4.6 million people die from air pollution. When the fumes + toxic gases cannot be seen it is easy to ignore the effect our lifestyle choices are having. My aim in creating this project was to provide a poignant visual depiction of this.

Computer Vision

Below are 2 links that allow you to view the project in order to see the use of tracking.js + javascript. Both links use computer vision to detect human faces. The first simply alerts human presence, whilst the second uses the same code to initiate a particle animation that symbolises the 4 toxic chemicals that are a bi-product of overpopulation in cities. The more people detected the more particles are displayed.

Without Animation    With Animation

Other Animations

Throughout the process I experimented with multiple animations, here are a few of my favourites. These work by the user inputting a value that changes the animation depending on the number submitted. I have also included the particle animation shown above used for the compute vision experiment so you can see how it would look when multiple people are engaging with the software.

See Project

Related Projects

Start creating an award
winning website today!

Anything is possible,
Let's make dreams a reality.

Get Me Started!