Live Web Wk 11-13: Final


Final code: here


Sound of Color is a web and mobile app that visualizes the relationship between color and sound frequency.


Final project proposal


Steps for this week: a.) fix the line animation on the “draw” page/finally get that to work properly, b.) style the page: resize the pixelate canvas to be full width, c) animate the playhead, d.) fix the mouse move sizing issue, e.) get ipad camera to be facing out/ not user, f.) Billy to work on converting the sound frequency I have into midi notes, g.) the speed plays back faster every time you play and pause in ‘playback’ mode

a.) fix the line animation on the “draw” page/finally get that to work properly

It now animates! Many thanks to Shawn’s logic advice! It needed to go in a main draw loop and also needed an array that the sine lines selected would be pushed into.

But other issues emerged…for ex: it draws the full history of the lines selected. meh! this took way too long to figure out. but perhaps this is the solution?

Tried a bunch of things with the “” and “socket.removeEventListener” but still not working. Need to ask Shawn/Mimi.

Screenshot 2019-11-29 09.03.33.png

Great, asked and turns out it was a simple solve! canvas.removeEventListener was the right code to use! Turns out I was just removing the line that draws the sine wave, when i needed to remove the whole function. Below is the winning script that works (this seriously took way too long to get)!

   redSelect.addEventListener('click', () => {

        evl = drawRedSine;

        let removeRed = (e) => {

            console.log('evl for red: ' + evl)


            let p = {

                x: e.clientX,

                y: e.clientY


            socket.emit('sendRedData', p);

            console.log("EMITTED RED");

            canvas.removeEventListener('click', removeRed);


        var listener = canvas.addEventListener('click', removeRed);


b.) Resizing context + canvas to be full width (see d for answer)

Question: when i resize the canvas to be full width, the mouse pick is still picking from the same context size. it is not picking from the right pixel/ context didn’t seem to scale with the canvas.

c.) Animating the shape in playback mode

How to return value from a setInterval()? Having issues with the rectangle drawing across the screen…when it is drawing in setInterval(), it disappears too quickly because it is drawn every 500 miliseconds.

Never mind! fixed. All I had to do was draw the shape in the loop function.

d.) the mouse move was not choosing from the canvas.

The issue was that the canvas width was set at 100vh in css. so the actual video that was being drawn into the canvas was not the full window width. Figured out that you have to set the canvas width and height in the javascript.

the key code:

   ctx.canvas.width = window.innerWidth;

    ctx.canvas.height = window.innerHeight;

    //set video full width

    video.width = window.innerWidth;

    video.height = window.innerHeight;

e.) to get camera to face out I had to use ‘facingMode: ‘environment”

  let constraints = {

    audio: false,

    // video: true,

    video: {

      facingMode: "environment"

      // facingMode: 'environment'



f.) Converting frequency sounds to notes. Thank you Billy for converting the frequency to actual notes! woo!

g.) Fixing speed increase! This took so long but thank you Craig for helping troubleshoot this one! so the issue was that the enableFakePick() already has an event listener so it just kept adding to it when I was doing another event listener in the drop down selection part. What needed to happen was just to get rid of the event listener in this drop down part. part below is the winning code!

if (i === 1) {





if (evl!=null) {




//playButtonDiv.addEventListener('click', enableFakePick); //enable play button


//remove mouse pick function

document.removeEventListener('mousemove', enableMouseMove);

} else if (i === 2) {

//document.removeEventListener('click', enableFakePick);


if (evl!=null) {

// show color with pick function

console.log('mouse move');

document.addEventListener('mousemove', enableMouseMove);


letplayButtonDiv=document.getElementById('bottom-button-play-div');'none'; //disable play button


Helpful Resources:


Biggest thank you to Professor Shawn for constantly solving the technical issues I ran into. So appreciate all the help and for steering this project in a better direction. I learned so much regular javascript from doing this project and from being in Live Web- very grateful I took this course.

Shout out to sound expert Billy Bennett for converting the frequency sounds into midi notes! It sounds infinitely better!!

Also, thank you so much the last minute troubleshooting help, Dan Oved and Professor Mimi.