Initial code drop

topfs2 · Nov 24, 2014 · 6f3ac11 · 6f3ac11
1 parent 7d8d5cd
commit 6f3ac11
Show file tree

Hide file tree

Showing 10 changed files with 46,586 additions and 0 deletions.
diff --git a/img/pure_tmb_r32px_blur.png b/img/pure_tmb_r32px_blur.png
diff --git a/img/pure_tmb_r4px.png b/img/pure_tmb_r4px.png
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<html>
+    <head>
+        <script src="js/audiocontext-polyfill.js"></script>
+
+        <script src="js/jquery-2.1.1.js"></script>
+        <script src="js/three.js"></script>
+        <script src="js/tinycolor.js"></script>
+
+        <script src="js/AudioAnalyser.js"></script>
+
+        <script src="js/Detector.js"></script>		
+
+        <link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
+    </head>
+    <body>
+        <style>
+            #webgl {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+            }
+
+            .info {
+                position: absolute;
+                bottom: 50%;
+                left: 20%;
+                right: 20%;
+
+                margin-bottom: 50px;
+
+                font-family: 'Raleway', sans-serif;
+                font-weight: 300;
+                color: white;
+            }
+
+            .title {
+                font-size: 64px;
+                margin-bottom: 20px;
+            }
+
+            .artist {
+                font-size: 36px;
+            }
+        </style>
+        <script id="vertexShader" type="x-shader/x-vertex">
+          varying vec2 vUv;
+	        uniform float time;
+	        uniform vec2 resolution;
+
+	        void main()	{
+              vUv = uv;
+              gl_Position = projectionMatrix *
+                            modelViewMatrix *
+                            vec4(position,1.0);
+	        }
+        </script>
+
+        <script id="fragmentShader" type="x-shader/x-fragment">
+	        uniform float time;
+	        uniform vec2 resolution;
+
+          uniform sampler2D gradient1;
+          uniform sampler2D gradient2;
+
+          uniform float amount;
+          varying vec2 vUv;
+
+          uniform vec3 diffuse;
+
+          void main() {
+              vec2 displacement = vec2(sin(time * 0.5), cos(time * 0.7)) * 0.1;
+
+              vec4 color1 = texture2D(gradient1, vUv * 0.8 + 0.1 + displacement);
+              vec4 color2 = texture2D(gradient2, vUv) * (sin(time * 0.4) * 0.5 + 1.0);
+
+              vec4 color = color1 + color2;
+
+              gl_FragColor = vec4(color.rgb * diffuse, color.a) * amount;
+          }
+        </script>
+
+    	<div id="webgl"></div>
+        <div class="info">
+            <div class="title">Chandelier</div>
+            <div class="artist">Sia</div>
+        </div>
+        <script src="js/base.js"></script>
+    </body>
+</html>
diff --git a/js/AudioAnalyser.js b/js/AudioAnalyser.js
@@ -0,0 +1,53 @@
+// Taken from http://codepen.io/soulwire/pen/Dscga
+
+var AudioAnalyser = (function() {
+    AudioAnalyser.AudioContext = self.AudioContext || self.webkitAudioContext;
+
+    AudioAnalyser.enabled = AudioAnalyser.AudioContext != null;
+
+    function AudioAnalyser(audio, numBands, smoothing) {
+      var src;
+      this.audio = audio != null ? audio : new Audio();
+      this.numBands = numBands != null ? numBands : 256;
+      this.smoothing = smoothing != null ? smoothing : 0.3;
+      if (typeof this.audio === 'string') {
+        src = this.audio;
+        this.audio = new Audio();
+        this.audio.controls = true;
+        this.audio.src = src;
+      }
+      this.context = new AudioAnalyser.AudioContext();
+      this.jsNode = this.context.createScriptProcessor(2048, 1, 1);
+      this.analyser = this.context.createAnalyser();
+      this.analyser.smoothingTimeConstant = this.smoothing;
+      this.analyser.fftSize = this.numBands * 2;
+      this.bands = new Float32Array(this.analyser.frequencyBinCount);
+      this.audio.addEventListener('canplay', (function(_this) {
+        return function() {
+          _this.source = _this.context.createMediaElementSource(_this.audio);
+          _this.source.connect(_this.analyser);
+          _this.analyser.connect(_this.jsNode);
+          _this.jsNode.connect(_this.context.destination);
+          _this.source.connect(_this.context.destination);
+
+          window.test = _this.audio;
+          return _this.jsNode.onaudioprocess = function() {
+            _this.analyser.getFloatFrequencyData(_this.bands);
+            if (!_this.audio.paused) {
+              return typeof _this.onUpdate === "function" ? _this.onUpdate(_this.bands, _this.analyser.minDecibels, _this.analyser.maxDecibels) : void 0;
+            }
+          };
+        };
+      })(this));
+    }
+
+    AudioAnalyser.prototype.start = function() {
+      return this.audio.play();
+    };
+
+    AudioAnalyser.prototype.stop = function() {
+      return this.audio.pause();
+    };
+
+    return AudioAnalyser;
+})();
diff --git a/js/Detector.js b/js/Detector.js
@@ -0,0 +1,40 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+var Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(),
+	workers: !! window.Worker,
+	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
+
+	getWebGLErrorMessage: function () {
+
+		var element = document.createElement( 'div' );
+		element.className = 'webgl-error';
+
+		if ( !this.webgl ) {
+
+			element.innerHTML = window.WebGLRenderingContext ? [
+				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function (parent ) {
+
+		parent.appendChild( Detector.getWebGLErrorMessage() );
+
+	}
+
+};
diff --git a/js/audiocontext-polyfill.js b/js/audiocontext-polyfill.js
@@ -0,0 +1,102 @@
+/*!
+audiocontext-polyfill.js v0.1.1
+(c) 2013 - 2014 Shinnosuke Watanabe
+Licensed under the MIT license
+*/
+
+(function(window, undefined) {
+  'use strict';
+
+  window.AudioContext = window.AudioContext ||
+                        window.webkitAudioContext;
+
+  window.OfflineAudioContext = window.OfflineAudioContext ||
+                               window.webkitOfflineAudioContext;
+
+  var Proto = AudioContext.prototype;
+
+  var tmpctx = new AudioContext();
+
+  // Support alternate names
+  // start (noteOn), stop (noteOff), createGain (createGainNode), etc.
+  var isStillOld = function(normative, old) {
+    return normative === undefined && old !== undefined;
+  };
+
+  var bufProto = tmpctx.createBufferSource().constructor.prototype;
+
+  if (isStillOld(bufProto.start, bufProto.noteOn) ||
+  isStillOld(bufProto.stop, bufProto.noteOff)) {
+    var nativeCreateBufferSource = Proto.createBufferSource;
+
+    Proto.createBufferSource = function createBufferSource() {
+      var returnNode = nativeCreateBufferSource.call(this);
+      returnNode.start = returnNode.start || returnNode.noteOn;
+      returnNode.stop = returnNode.stop || returnNode.noteOff;
+
+      return returnNode;
+    };
+  }
+
+  // Firefox 24 doesn't support OscilatorNode
+  if (typeof tmpctx.createOscillator === 'function') {
+    var oscProto = tmpctx.createOscillator().constructor.prototype;
+
+    if (isStillOld(oscProto.start, oscProto.noteOn) ||
+    isStillOld(oscProto.stop, oscProto.noteOff)) {
+      var nativeCreateOscillator = Proto.createOscillator;
+
+      Proto.createOscillator = function createOscillator() {
+        var returnNode = nativeCreateOscillator.call(this);
+        returnNode.start = returnNode.start || returnNode.noteOn;
+        returnNode.stop = returnNode.stop || returnNode.noteOff;
+
+        return returnNode;
+      };
+    }
+  }
+
+  if (Proto.createGain === undefined && Proto.createGainNode !== undefined) {
+    Proto.createGain = Proto.createGainNode;
+  }
+
+  if (Proto.createDelay === undefined && Proto.createDelayNode !== undefined) {
+    Proto.createDelay = Proto.createGainNode;
+  }
+
+  if (Proto.createScriptProcessor === undefined &&
+  Proto.createJavaScriptNode !== undefined) {
+    Proto.createScriptProcessor = Proto.createJavaScriptNode;
+  }
+
+  // Black magic for iOS
+  var is_iOS = (navigator.userAgent.indexOf('like Mac OS X') !== -1);
+  if (is_iOS) {
+    var OriginalAudioContext = AudioContext;
+    window.AudioContext = function AudioContext() {
+      var iOSCtx = new OriginalAudioContext();
+
+      var body = document.body;
+      var tmpBuf = iOSCtx.createBufferSource();
+      var tmpProc = iOSCtx.createScriptProcessor(256, 1, 1);
+
+      body.addEventListener('touchstart', instantProcess, false);
+
+      function instantProcess() {
+        tmpBuf.start(0);
+        tmpBuf.connect(tmpProc);
+        tmpProc.connect(iOSCtx.destination);
+      }
+
+      // This function will be called once and for all.
+      tmpProc.onaudioprocess = function() {
+        tmpBuf.disconnect();
+        tmpProc.disconnect();
+        body.removeEventListener('touchstart', instantProcess, false);
+        tmpProc.onaudioprocess = null;
+      };
+
+      return iOSCtx;
+    };
+  }
+}(window));