initial revision

ttrftech · Jul 14, 2014 · 50ebeb4 · 50ebeb4
commit 50ebeb4
Show file tree

Hide file tree

Showing 8 changed files with 1,680 additions and 0 deletions.
diff --git a/Lut.js b/Lut.js
@@ -0,0 +1,142 @@
+/**
+ * @author daron1337 / http://daron1337.github.io/
+ */
+
+THREE.Lut = function ( colormap, numberofcolors ) {
+
+  this.lut = new Array();
+  this.map = THREE.ColorMapKeywords[ colormap ];
+  this.n = numberofcolors;
+
+  var step = 1. / this.n;
+
+  for ( var i = 0; i <= 1; i+=step ) {
+
+    for ( var j = 0; j < this.map.length - 1; j++ ) {
+
+      if ( i >= this.map[ j ][ 0 ] && i < this.map[ j+1 ][ 0 ] ) {
+
+        var min = this.map[ j ][ 0 ];
+        var max = this.map[ j+1 ][ 0 ];	
+        var color = new THREE.Color( 0xffffff ); 
+        var minColor = new THREE.Color( 0xffffff ).setHex( this.map[ j ][ 1 ] );
+        var maxColor = new THREE.Color( 0xffffff ).setHex( this.map[ j+1 ][ 1 ] );	
+
+        color = minColor.lerp( maxColor, ( i - min ) / ( max - min ) );
+
+        this.lut.push(color);
+
+      }
+
+    }
+
+  }
+
+  return this.set( this );
+
+};
+
+THREE.Lut.prototype = {
+
+	constructor: THREE.Lut,
+
+        lut: [], map: [], mapname: 'rainbow' , n: 256, minV: 0, maxV: 1,
+
+	set: function ( value ) {
+
+		if ( value instanceof THREE.Lut ) {
+
+			this.copy( value );
+
+		} 
+
+		return this;
+
+	},
+
+	setMin: function ( min ) {
+
+		this.minV = min;
+
+		return this;
+
+	},
+
+	setMax: function ( max ) {
+
+		this.maxV = max;
+
+		return this;
+
+	},
+
+	changeNumberOfColors: function ( numberofcolors ) {
+
+		this.n = numberofcolors;
+
+		return new THREE.Lut( this.mapname, this.n );
+
+	},
+
+	changeColorMap: function ( colormap ) {
+
+                this.mapname = colormap;
+
+		return new THREE.Lut( this.mapname, this.n );
+
+	},
+
+        copy: function ( lut ) {
+
+		this.lut = lut.lut;
+		this.mapname = lut.mapname;
+		this.map = lut.map;
+		this.n = lut.n;
+                this.minV = lut.minV;
+                this.maxV = lut.maxV;
+
+		return this;
+
+	},
+
+	getColor: function ( alpha ) {
+
+
+                if ( alpha <= this.minV ) {
+
+                            alpha = this.minV;
+
+                }
+
+                else if ( alpha >= this.maxV ) {
+
+                            alpha = this.maxV;               
+
+                }
+
+
+                alpha = ( alpha - this.minV ) / ( this.maxV - this.minV );
+
+                var colorPosition = Math.round ( alpha * this.n );
+                colorPosition == this.n ? colorPosition -= 1 : colorPosition;
+
+                return this.lut[ colorPosition ];
+
+	},
+
+        addColorMap: function ( colormapName, arrayOfColors ) {
+
+                THREE.ColorMapKeywords[ colormapName ] = arrayOfColors;
+
+        },
+
+};
+
+THREE.ColorMapKeywords = {
+
+                "rainbow": [ [ 0.0, '0x0000FF' ], [ 0.2, '0x00FFFF' ], [ 0.5, '0x00FF00' ], [ 0.8, '0xFFFF00'],  [1.0, '0xFF0000' ] ],
+                "cooltowarm": [ [ 0.0, '0x3C4EC2' ], [ 0.2, '0x9BBCFF' ], [ 0.5, '0xDCDCDC' ], [ 0.8, '0xF6A385'],  [1.0, '0xB40426' ] ],
+                "blackbody" : [ [ 0.0, '0x000000' ], [ 0.2, '0x780000' ], [ 0.5, '0xE63200' ], [ 0.8, '0xFFFF00'],  [1.0, '0xFFFFFF' ] ],
+                "picm" : [ [ 0.0, '0x000000' ], [ 0.10, '0xff00ff' ], [ 0.2, '0x0000ff' ], [ 0.4, '0x00FFFF'],  [0.65, '0x00FF00' ], [0.8, '0xFF0000' ],  [0.95, '0xFFFF00' ],  [1.0, '0xFFFFFF' ]]
+
+}
diff --git a/audio.html b/audio.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Script-type" content="text/javascript">
+<meta http-equiv="Content-Style-type" content="text/css">
+<link type="text/css" href="spectrum.css" rel="stylesheet">
+<script type="text/javascript" src="js/three.min.js"></script>
+<script type="text/javascript" src="js/TrackballControls.js"></script>
+<script type="text/javascript" src="js/Detector.js"></script>
+<script type="text/javascript" src="js/stats.min.js"></script>
+<script type="text/javascript" src="Lut.js"></script>
+<title>WebAudio and three.js spectrum flow</title>
+</head>
+<body>
+<audio id="audio" autoplay="autoplay"></audio>
+<div id="container"></div>
+<script type="text/javascript" src="audio.js"></script>
+</body>
+</html>
diff --git a/audio.js b/audio.js
@@ -0,0 +1,153 @@
+navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
+
+if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+function initialize() {
+	var container, stats;
+	var camera, scene, renderer, controls;
+	var mesh;
+	var particleSystem;
+
+	var audioElement = document.getElementById("audio");
+	var container = document.getElementById('container');
+
+	var lut = new THREE.Lut( "picm", 512 );
+	//var lut = new THREE.Lut( "blackbody", 512 );
+	//var lut = new THREE.Lut( "cooltowarm", 512 );
+	//var lut = new THREE.Lut( "rainbow", 512 );
+	lut.setMax(100);
+
+	function render() {
+		//var time = Date.now() * 0.001;
+		//particleSystem.rotation.x = time * 0.25;
+		//particleSystem.rotation.y = time * 0.5;
+		renderer.render( scene, camera );
+		stats.update();
+	}
+
+	function onWindowResize() {
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		controls.handleResize();
+		render();
+	}
+
+	function createParticleSystem(frequencyData) {
+		var z = 500.0;
+		var pts = [];
+		var l = frequencyData.length;
+		for (var i = 0; i < l; i++) {
+			pts.push(i - l/2);
+			pts.push(frequencyData[i]);
+			pts.push(z);
+		}
+		//z += zstep;
+		array = new Float32Array(pts);
+
+		var geometry = new THREE.BufferGeometry();
+		geometry.attributes = {
+			position: {
+				itemSize: 3,
+				array: array, 
+				numItems: array.length
+			},
+			color: {
+				itemSize: 3,
+				array: new Float32Array(array.length),
+				numItems: array.length
+			}
+		}
+		geometry.computeBoundingSphere();
+
+		var positions = geometry.attributes.position.array;
+		var colors = geometry.attributes.color.array;
+
+		//var color = new THREE.Color();
+		for ( var i = 0; i < positions.length; i += 3 ) {
+			var color = lut.getColor(positions[i+1]);
+			//color.setRGB(1,1,1);
+			colors[ i ]     = color.r;
+			colors[ i + 1 ] = color.g;
+			colors[ i + 2 ] = color.b;
+		}
+
+		var material = new THREE.ParticleBasicMaterial( { size: 5, vertexColors: true } );
+		return new THREE.ParticleSystem( geometry, material );
+	}
+
+	camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 100000 );
+	camera.position.z = 2000;
+	camera.position.y = 500;
+
+	controls = new THREE.TrackballControls( camera );
+	controls.staticMoving = true;
+	controls.dynamicDampingFactor = 0.3;
+	controls.keys = [ 65, 83, 68 ];
+	controls.addEventListener( 'change', render );
+
+	renderer = new THREE.WebGLRenderer( { antialias: false, clearColor: 0x333333, clearAlpha: 1, alpha: false } );
+	renderer.setSize( window.innerWidth, window.innerHeight );
+
+	container.appendChild( renderer.domElement );
+
+	stats = new Stats();
+	stats.domElement.style.position = 'absolute';
+	stats.domElement.style.top = '0px';
+	container.appendChild( stats.domElement );
+
+	window.addEventListener( 'resize', onWindowResize, false );
+
+	navigator.getUserMedia(
+		{audio : true},
+		function(stream) {
+			var url = URL.createObjectURL(stream);
+			audioElement.src = url;
+			var audioContext = new AudioContext();
+			var mediastreamsource = audioContext.createMediaStreamSource(stream);
+			var analyser = audioContext.createAnalyser();
+			var frequencyData = new Uint8Array(analyser.frequencyBinCount);
+			//var timeDomainData = new Uint8Array(analyser.frequencyBinCount);
+			mediastreamsource.connect(analyser);
+
+			var animation = function(){
+				analyser.getByteFrequencyData(frequencyData);
+				//analyser.getByteTimeDomainData(timeDomainData);
+                //frequencyContext.clearRect(0, 0, width, height);
+				//frequencyContext.beginPath();
+				//frequencyContext.moveTo(0, height - frequencyData[0]);
+				//for (var i = 1, l = frequencyData.length; i < l; i++) {
+				//	frequencyContext.lineTo(i, height - frequencyData[i]);
+				//}
+				//frequencyContext.stroke();
+
+				//scene = new THREE.Scene();
+				var i;
+				for (i = 0; i < scene.children.length - 100; i++) {
+					scene.remove(scene.children[i]);
+				}
+				for (; i < scene.children.length; i++) {
+					scene.children[i].translateZ(-10);
+				}				
+				particleSystem = createParticleSystem(frequencyData);
+				scene.add( particleSystem );
+				render();
+				controls.update();
+
+				requestAnimationFrame(animation);
+			};
+
+			scene = new THREE.Scene();
+			//scene.fog = new THREE.Fog( 0x000000, 3000, 5000);
+			scene.translateZ(-500);
+			animation();
+		},
+		function(e) {
+			console.log(e);
+		}
+	);
+}
+
+window.addEventListener("load", initialize, false);
diff --git a/common.css b/common.css
@@ -0,0 +1,26 @@
+canvas {
+    margin:10px auto;
+    display:block;
+    border:1px solid black;
+}
+
+body {
+	color: #cccccc;
+	font-family:Monospace;
+	font-size:13px;
+	text-align:center;
+
+	background-color: #050505;
+	margin: 0px;
+	overflow: hidden;
+}
+
+#info {
+	position: absolute;
+	top: 0px; width: 100%;
+	padding: 5px;
+}
+
+a {
+	color: #0080ff;
+}