kennyxli / PictureWaves

PictureWaves is a lighthearted drawing and music application. Users can draw images that produce sounds. They can play back these sounds to see what they have created. It is built with vanilla Javascript, Tone.js and HTML5 Canvas.

PictureWaves

Brief Overview:

PictureWaves: Allow the user to draw shapes that produce sounds. You can put it into a loop or allow sound while drawing.

Functionality & MVP

In PictureWaves, users will be able to:

• Draw on a canvas. Each drawing will produce a sound
• Play the sounds in a loop. It will sound off each of the drawings from left to right.
• Change the sound/color/brush size of the drawing

Architecture and Technology

PictureWaves will be using Javascript, html, css, canvas and tone.js

Wireframe

Implementation Timeline

Day 1:

• Set up file structure.
• Read documentation on canvas and tone.js
• Make Navbar

Day 2:

• Work on the canvas
• Allow users to draw on the canvas

Day 3:

• Connect it to tone.js to allow users to draw objects that will produce a unique sound

Day 4:

• Allow users to reset drawings and/or loop the sound maker