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 a 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 reaches 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 a single user or multiple users. Users who go to the same website at the same time with different devices may play with each other on the 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.
