Interactive Music Application from Data related to Water Crisis to build awareness Worldwide.

Project Goal

To design and develop an Interactive web application for release of an upcoming book which provides better understanding using data related to water pollution targeted mainly towards key policy makers and NGOs.

Project Background

With better understanding of the depth and importance of this project, we were handed over a huge 200Mb file created by an illustrator, along with around 60 data(csv) and sound(wav) files. We engaged key stakeholders to understand the information and designed several wireframes with the aim of making the datasets interactive and accessible for any user on platforms such as Desktop, Tablet and Mobile. From day-1 we wanted the project to be open-source and community led and hence the project is entirely built and supported by open source platforms and is currently hosted on Github with multiple collaborators across research, design and development of the project.

The project has reached it's phase 1 release and is currently travelling worldwide in galleries and key events such as KHOJ, India and Mardin Biennial respectively.

Client

As a collaboration with artist and community

Solution

An interactive WebApp where users get a visual and sound experience by horizontally scrolling through a long visual where every part of the graphic is clickable, denoting the data along with it's detailed description and introduction of sound at various levels.

Results

Users get to learn about the existing state of the water crisis & by composing their own soundtracks which is shared on social media, every user can engage more users to use the app and spread the awareness.

Discovery

The main challenge with such a project was making a complex vector file compatible for the web platform. This required us to explore loading simplified svgs and raster while maintaining the quality of the visual and a way for the illustrator to make appropriate changes to each data file so that it can be tested and automatically published. We build a simple dashboard application for this and hosted all the files and subsequent changes automatically on Github using private tokens.

Data Prototype

Click on any image to see in it fullscreen
Loading...

Visual Data Explorations

Loading...
Click on any image to see in it fullscreen
Loading...
Click on any image to see in it fullscreen

Technology

This is a client-side application which relies on Javascript ES6 and babel transpiler to make it compatible to most modern browsers. The graphics are made using the help of another great open-source project called PixiJS which is very performant for interactive applications and games alike meanwhile the audio is generated and modified realtime on the browser using ToneJS.

The present app is completely open-source and the code for the entire application is freely hosted on Github. Since the app is to be maintained by the community we have made sure of hosting it on Github pages which offers us flexibility to keep the app running with out any disruptions in service for non-payment and additionally contributors and maintainers can update the code without dependency of sharing any server access. Furthermore settings to the app can be changes via it's dashboard which requires Authorised Github Token, once changes are published the app automatically builds and publishes the changes on Github Pages.

No items found.

Installation

To raise awareness on the water crisis, this body of work has been exhibited at galleries such as KHOJ Studios and Mardin Biennial. This work is exhibited as an interactive sound score accompanied with a print of the scroll and multiple QR codes which opens various dataset on the mobile.

14880

Test Rides

02

Experience Centres

Design

The app was designed with a aspects of user exploration, being informative and sound creation in mind. The artwork and the book is divided into 7 chapters combined in a single image. We needed a simple scrolling and pinch-zoom interface which users are used to for navigating an image on smartphones. We also designed it such that users can click anywhere to popup information about the visual. Further the user can easily play with the sound files, pick interesting ones by adding it to cart like feature and finally create their own tracks in the compositor window which gets shared on social-media platforms.

No items found.
No items found.
Timeblur small icon 5

Previous Project

Next Project

Timeblur small icon 5

Personalised Data Signatures

No items found.

Results

12 Million

Data points Visualised

14000

Impressions

5600

Signatures

Exhibitions

12 Million

Data points Visualised

14000

Emails sent

5600

Signatures

Media Coverage

No items found.

Awards

No items found.

Blogs

Yoga, its Kinetics and form

These forms have an underlying rhythm and dynamics that we particularly wanted to capture. To further elaborate, we were interested in capturing the body forms in between the start and finish postures, and how the body segued with the breath.

Read more

Future Scope

Our motion tracking tool has been able to provide consumers with a mindful and immersive experience like no other. Located at the intersection of new media, creative technology and the gamification of virtual participation; our Nadi Project aims to provide customer experiences that promote wellness, creativity and social belonging. By further developing such generative experiments and artistic visuals to suit the preferences of clients, Timeblur offers digital consulting solutions in order to capture the attention of new age consumers.

Loading...
No items found.

FOR OUR NEWSLETTER

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Facebook IconEmail us iconMap location icon
Timeblur small icon 6

A Studio for Data and Stories

Copyright © 2020 TIMEBLUR. All Rights Reserved