SonicCanvas

Social. Music. Art.

Experience art in a new form

Create art. Create music. Hear. See. Discover.

SonicCanvas lets you make music as you create art. You can create a canvas, or join a canvas someone has already created, and finger-paint your heart's desire, shaping and nuturing a piece of music as you go.

Motivation

As an artist, I'm always looking to create new things, and find new ways to express myself.
The project was to craft a social music experience, and I wanted to explore a fusion of audio and visuals.
So I asked myself, what if you could paint music?

Experiential Design

Let's start with the creation experience. The user is presented a canvas, on to which the can paint on with their fingers, and control the color and size of the brush if they choose to. And as they paint, each stroke of their brush generates music, where each color has a distinctive sound, whose dynamics increase as you use it more. This results in an almost surreal method of artistic expression, where you can keep painting and explore more, or revel in the moment and enjoy the experience.
And then there is the social experience. One interesting dynamic is through the fact that people are interacting and creating works of art with complete strangers, which resulting in a whismical social scenario, a mixture of shyness, hesitation, and also healthy collaboration.
And always, there are the observers. The observers who experience the art being created, whether it is at its nascent form, or whether it has evolved to an artistic behemoth. They float around the world of SonicCanvases, experience the newest form of social, mobile art.

System Architecture

Warning: Technical stuff. Feel free to completely ignore, or bother me with emails if interested.
The app is built using a hybrid Javascript stack, allowing it to be built for any mobile device that supports WebKit browsers.
I've used Ionic + AngularJS for my front-end, along with Firebase for a real-time datastore, and the Cordova platform for device level APIs. The canvases are implemented using Sketch.js, a library which leverages the HTML5 Canvas API to generate touch compatible graphics. All audio is being synthesized on device using the MIDI.js library and Web Audio API by rendering soundfonts (yes, this required a gnarly battle with Cordova to support WebKit webviews).

 

SonicCanvas: Coming soon to an App Store near you!

However, as I put finishing touches and test the app, feel free to explore the source code, or test out the app. The entire project is available on Github, and you can run the app either in the browser, or in an iOS simulator (check online on how to run Ionic apps, or ping me).

About me!

Yes, here is the part where I bore you with details of me. But I won't, except with the fact I'm Trijeet, the amazing person who built this, and if you want to know, click here!
Feel free to ping me if you want to banter, or have some feedback.