Final: https://el3015.itp.io:3128/play.html
Final code: here
—
About:
Sound of Color is a web and mobile app that visualizes the relationship between color and sound frequency.
—
Process:
Final project proposal
Process
—
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? https://stackoverflow.com/questions/23092624/socket-io-removing-specific-listener
Tried a bunch of things with the “socket.off” and “socket.removeEventListener” but still not working. Need to ask Shawn/Mimi.
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)
console.log(e);
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) {
letplayButtonDiv=document.getElementById('bottom-button-play-div');
letpauseButtonDiv=document.getElementById('bottom-button-pause-div');
playButtonDiv.style.display='inline-block';
evl=i;
console.log("evl:"+evl);
if (evl!=null) {
letplayButtonDiv=document.getElementById('bottom-button-play-div');
playButtonDiv.style.pointerEvents='auto';
console.log('playback');
enableFakePick();
//playButtonDiv.addEventListener('click', enableFakePick); //enable play button
}
//remove mouse pick function
document.removeEventListener('mousemove', enableMouseMove);
} else if (i === 2) {
//document.removeEventListener('click', enableFakePick);
evl=i;
if (evl!=null) {
// show color with pick function
console.log('mouse move');
document.addEventListener('mousemove', enableMouseMove);
}
letplayButtonDiv=document.getElementById('bottom-button-play-div');
playButtonDiv.style.pointerEvents='none'; //disable play button
}
Helpful Resources:
—
Credits!
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.
