CIS700-Procedural-Graphics · gracexu94 · Apr 18, 2017 · Apr 19, 2017 · Apr 19, 2017 · Apr 19, 2017
diff --git a/03 Transfer Avec Avec Remix _livetune adding Megumi Nakajima_.m4a b/03 Transfer Avec Avec Remix _livetune adding Megumi Nakajima_.m4a
diff --git a/README.md b/README.md
@@ -1 +1,67 @@
-# FinalProject
+# Final Project - Music Visualizer
+## CIS700 Procedural Graphics, Spring 2017
+## Grace Xu 
+
+Using:
+- Web Audio API
+- Three.js
+- Node.js 
+- web-audio-beat-detector
+
+Ideas for visualizations: 
+- Basic noise cloud (adapted from HW#1)
+- Tempo drives camera control 
+- Moving line with perturbations driven by amplitude of music
+
+To-do:
+- Be able to pause --> DONE 
+	- use spacebar to pause the visualization and music (without getting rid of the baseline visuals)
+- Be able to extract useful information from audio file, e.g.: --> DONE
+	- frequency
+	- amplitude/loudness
+	- note?
+	- tempo (BPM)
+- Have at least 4 different interesting visualizations --> 2/4 DONE 
+- ~Implement camera controller or controller that switches between visualizations at appropiate points in the music~
+- Implement framework for switching between multiple scenes with their own cameras --> DONE 
+	- use '0' and '1' on the keyboard to switch manually between current visualizations 
+- Implement automatic switching between visualizations in response to the music --> DONE
+- Add color to at least one of the visualizations --> DONE
+- Stretch: make and/or use a different custom shader for one of the visualizations
+- Stretch: more interesting/aesthetically pleasing visuals
+
+Original design doc: https://docs.google.com/document/d/13P_lAncqpzsyP1C5bAflfCYHUtCnb10DHtbcka17JA4/edit?usp=sharing
+Final report: https://docs.google.com/document/d/1I6gvRuBfne61IPXz5KhxU_N4pdzxq6v4I-XEtToPV70/edit?usp=sharing
+
+Useful links: 
+- http://stackoverflow.com/questions/153712/creating-music-visualizer
+- https://en.wikipedia.org/wiki/Fast_Fourier_transform#Applications
+- https://en.wikipedia.org/wiki/Music_visualization
+- https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/
+- https://www.npmjs.com/package/web-audio-beat-detector
+- https://github.com/notthetup/awesome-webaudio
+- http://joesul.li/van/beat-detection-using-web-audio/
+- http://stackoverflow.com/questions/21247571/how-to-get-microphone-input-volume-value-with-web-audio-api
+- http://stackoverflow.com/questions/345187/math-mapping-numbers
+- https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
+- https://github.com/willianjusten/awesome-audio-visualization
+- http://raathigesh.com/Audio-Visualization-with-Web-Audio-and-ThreeJS/
+- https://tonejs.github.io/demos
+- https://www.html5rocks.com/en/tutorials/webaudio/intro/
+- http://stackoverflow.com/questions/14169317/interpreting-web-audio-api-fft-results
+- http://stackoverflow.com/questions/14789283/what-does-the-fft-data-in-the-web-audio-api-correspond-to
+- http://www.liutaiomottola.com/formulae/freqtab.htm
+- http://chimera.labs.oreilly.com/books/1234000001552/ch03.html#s03_2
+- http://chimera.labs.oreilly.com/books/1234000000802/ch04.html#deferred_rendering
+- https://threejs.org/examples/webgl_geometry_extrude_splines.html
+- http://stemkoski.github.io/Three.js/#viewports-dual
+- https://rawgit.com/bellbind/c9d885349db114d98734/raw/spiral.html 
+
+More inspiration:
+- http://hughsk.io/popcorn/
+- http://mattdesl.github.io/codevember/21.html
+- http://www.dennis.video/ 
+- https://www.uberviz.io/viz/splice/
+- http://jojo.ninja/fluctus/
+- http://www.michaelbromley.co.uk/experiments/soundcloud-vis/#griffinmcelroy/sets/the-adventure-zone-ost
+- https://tariqksoliman.github.io/Vissonance/
diff --git a/bundle.js.map b/bundle.js.map
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Final Project: Music Visualizer</title>
+    <style>
+      html, body {
+        margin: 0;
+        overflow: hidden;
+      }
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <label id="guide" style="position:fixed;color:gray; margin:10px;font: 400 14px Verdana, Arial, sans-serif; text-shadow: gray 0 0 0;">Drag and drop a mp3 file!</label>
+    <label id="visualizerInfo" style="position:fixed;color:gray; margin:10px;margin-top:30px;font: 300 14px Verdana, Arial, sans-serif;">
+      Press spacebar to pause music, or 'p' to pause camera movement and explore with the mouse.<br>
+      Press 's' to turn off automatic switching between the visualizers.<br>
+      Cycle through '0', '1', '2', and '3' to see all the different scenes.<br>
+      Press 't' to toggle visibility of these instructions. </label>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/node_modules/.bin/acorn b/node_modules/.bin/acorn
diff --git a/node_modules/.bin/babylon b/node_modules/.bin/babylon
diff --git a/node_modules/.bin/errno b/node_modules/.bin/errno
diff --git a/node_modules/.bin/gasket b/node_modules/.bin/gasket
diff --git a/node_modules/.bin/gh-pages-deploy b/node_modules/.bin/gh-pages-deploy
diff --git a/node_modules/.bin/jsesc b/node_modules/.bin/jsesc
diff --git a/node_modules/.bin/json5 b/node_modules/.bin/json5
diff --git a/node_modules/.bin/loose-envify b/node_modules/.bin/loose-envify
diff --git a/node_modules/.bin/mime b/node_modules/.bin/mime
diff --git a/node_modules/.bin/mkdirp b/node_modules/.bin/mkdirp
diff --git a/node_modules/.bin/ncp b/node_modules/.bin/ncp
diff --git a/node_modules/.bin/ndjson b/node_modules/.bin/ndjson
diff --git a/node_modules/.bin/npm-execspawn b/node_modules/.bin/npm-execspawn
diff --git a/node_modules/.bin/regjsparser b/node_modules/.bin/regjsparser
diff --git a/node_modules/.bin/rimraf b/node_modules/.bin/rimraf
diff --git a/node_modules/.bin/sha.js b/node_modules/.bin/sha.js
diff --git a/node_modules/.bin/uglifyjs b/node_modules/.bin/uglifyjs
diff --git a/node_modules/.bin/webpack b/node_modules/.bin/webpack
diff --git a/node_modules/.bin/webpack-dev-server b/node_modules/.bin/webpack-dev-server