Both are a work in progress, hoping to have a better “play” page soon: 

• Version working fine (not really using sockets): https://el3015.itp.io:8104/index.html
• Version with bugs(using sockets):  https://el3015.itp.io:8092/index.html
  • Issue with the buggy socket vs: color + sound keep a history. don’t get removed in socket version.

—

Code with socket io: https://github.com/emilylin-itp/live-web/tree/gh-pages/midterm/midterm_soundcolor_v13_wsocket

All code versions, including the mini tests I did for the oscillating sine waves + sound. ( i know i’m not using github properly, but this really helps me keep track of the different vs in a tangible way. will aim to use github better in the future): https://github.com/emilylin-itp/live-web/tree/gh-pages/midterm

—

Credits:

Biggest thank you to Professor Shawn for helping me squash many bugs and explaining things so well! So much appreciation.

—

Screenshots of Process:

a.) Preliminary research online. Found some helpful diagrams.

b.) First tried to code oscillating sine waves with varying frequencies. Also included a make frequency sound on hover function. Very bare bones test.

c.) rough Sketch design for the site.

d.)Tried a bunch of things out with making sine waves, used the web audio api, and really tried to understand how socket io works. I worked on the html, css + js part first before doing the socket io stuff. I definitely need to work on the “play” page more.

—

Questions + Answers:

• Why does the oscillator.stop() work when I do mouseout? Read somewhere that you can not call the “start()” function for oscillators more than once? True???https://blog.szynalski.com/2014/04/web-audio-api/
  • Answer (Thank you Professor Shawn!): yes! need to create oscillator each time! also need to go through for loop to stop all elements.
    
• I was trying to make the sine waves animate when user clicks. The “clearRect()” in javascript allows for animations because it redraws the background BUT it makes a white background. So I couldn’t overlap the sine waves without having the white background cover up the previously drawn one. Is there a way to get a transparent background with “clearRect()”? Or what’s a good work around?
  • Answer: have to add all sine waves into one canvas. No way of overlapping canvases with animation over it (without getting the background).
• Trying to access a variable within a function to have as a global variable. Why won’t it work though? I added a “return” but it keeps saying it is undefined when I console.log it outside of the function.
  • Answer: didn’t have much to do with making a global var. had to do with adding a removing my click event listener. Have to remove the event listener if it is not the one clicked on. Shawn wrote the snippet below!

—

Bits of Research:

• A source
• The highest frequency that most humans can hear is 20,000 cycles per second or 20,000 Hz.
• “Sound travels much slower than light. The audible sound spectrum consists of sounds between frequencies of 20 Hz and 20,000 Hz. These waves are very large and very slow compared to light waves. Sound waves are approximately 1,000,000,000,000 times larger than light waves.”
• The pitch of the note A has a frequency of 440 Hz.
• Sound and color are produced differently. Sound comes from an object that acts mechanically to produce a sound. But objects appear colored because of the interaction of white light with the object. For ex: when light hits an object, the object absorbs certain parts of the light; it absorbs all the colors but blue. The light leaving the object would then contain whatever color is left, in this case blue.

—

Resources for Web Audio API: 

• web audio api tutorial: https://medium.com/@soffritti.pierfrancesco/sound-generation-with-javascript-57b2fda65608
• playing sound: https://middleearmedia.com/controlling-web-audio-api-oscillators/

Resources for JS, Canvas & Animation: 

• SO helpful for drawing sine waves in regular javascript: https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab
• rotating canvas: http://tutorials.jenkov.com/html5-canvas/transformation.html
• map function in js: https://stackoverflow.com/questions/48802987/is-there-a-map-function-in-vanilla-javascript-like-p5-js
• https://www.smashingmagazine.com/2011/10/quick-look-math-animations-javascript/
• keep background but clear canvas: https://www.superglobals.net/html5-canvas-clear-rect-but-keep-background/

Resources for Start + Stop Web Audio API Oscillator on Hover (had issues with this):

• https://stackoverflow.com/questions/37710236/restart-oscillator-in-javascript
• https://stackoverflow.com/questions/14926306/javascript-play-sound-on-hover-stop-and-reset-on-hoveroff
• https://stackoverflow.com/questions/48372676/sound-on-mouseover-stop-on-mouseout
• https://stackoverflow.com/questions/38980411/how-to-stop-sound-playing-when-im-not-clicking-on-the-image
• https://blog.szynalski.com/2014/04/web-audio-api/
• stop sound: https://stackoverflow.com/questions/6343450/generating-sound-on-the-fly-with-javascript-html

Resources for Mouse Movement:

• https://www.geeksforgeeks.org/javascript-coordinates-of-mouse/
• https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_clientxy
• https://stackoverflow.com/questions/43172115/get-the-mouse-coordinates-when-clicking-on-canvas
• http://jsfiddle.net/ctKa4/286/

Resources for my CSS Wave Animation (Homepage):

• https://dev.to/pixmy/create-waves-with-pure-css-5gp
• https://stripe.com/blog/connect-front-end-experience

Resources for Socket io:

• https://wesbos.com/html5-canvas-websockets-nodejs/
• https://stackoverflow.com/questions/19499597/socket-io-mouse-click-event

Resources for JS + CSS Animations:

• https://css-tricks.com/controlling-css-animations-transitions-javascript/