Drawing Melody

Individual work,  12.2015

KEYWORDS: Web application, Collaborative drawing app, Play piano

TOOLKITS: Node.js, Socket.io, P5.js

Drawing Melody is an online drawing application. The interface of the application is designed as a canvas+piano key. Users can actually use exterior devices including mouse and drawing board to draw on the canvas. In doing so, the users’ drawing will trigger the corresponding keys to play their notes. The drawings will go down to the bottom of the screen after being generated by the users. And every time the drawing reach the edge of the screen, it will bounce for a while until slowly disappears. Meanwhile, the app will generate harmony echo for the note being played. 

Drawing Melody can be played by single user or multiple users. Users go to the same website at the same time with different devices may play with each other on a same stage. Drawings and melodies will be generated on all devices  in real time. P5.js is used to generate the drawing functions, sounds and physical effects. Socket.io, Node.js and Express.js are used to realize the multiple-stage features.


Back to Work