Initial Commit

HawkDanny · Mar 29, 2017 · fcf445d · fcf445d
1 parent 6929716
commit fcf445d
Show file tree

Hide file tree

Showing 15 changed files with 1,143 additions and 0 deletions.
diff --git a/audioManager.js b/audioManager.js
@@ -0,0 +1,109 @@
+var app = app || {};
+"use strict";
+
+app.AudioManager = function() {
+    var NUM_SAMPLES = 256;
+    var SOUND_1 = "media/TheOrientation.mp3";
+    var SOUND_2 = "media/DisarmYou.mp3";
+    var SOUND_3 = "media/ItsYourWorld.mp3";
+    var SOUND_$ = "media/MyFunnyValentine.mp3";
+    var audioElement;
+	var analyserNode;
+    var delayAmount = 0.0;
+    var delayNode;
+	var canvas
+    var ctx;
+    var data;
+
+    function AudioManager() {
+        //set up the canvas
+        canvas = document.querySelector("canvas");
+		ctx = canvas.getContext("2d");
+
+        // get reference to <audio> element on page
+		audioElement = document.querySelector("audio");
+
+        // call our helper function and get an analyser node
+        analyserNode = createWebAudioContextWithAnalyserNode(audioElement);
+
+        // get sound track <select> working
+        setupUI();
+
+        // load and play default sound into audio element
+        playStream(audioElement,SOUND_1);
+    }
+
+    function createWebAudioContextWithAnalyserNode(audioElement) {
+        var audioCtx, analyserNode, sourceNode;
+        // create new AudioContext
+        // The || is because WebAudio has not been standardized across browsers yet
+        // http://webaudio.github.io/web-audio-api/#the-audiocontext-interface
+        audioCtx = new (window.AudioContext || window.webkitAudioContext);
+
+        // create an analyser node
+        analyserNode = audioCtx.createAnalyser();
+
+        delayNode = audioCtx.createDelay();
+        delayNode.delayTime.value = delayAmount;
+
+        /*
+        We will request NUM_SAMPLES number of samples or "bins" spaced equally 
+        across the sound spectrum.
+        
+        If NUM_SAMPLES (fftSize) is 256, then the first bin is 0 Hz, the second is 172 Hz, 
+        the third is 344Hz. Each bin contains a number between 0-255 representing 
+        the amplitude of that frequency.
+        */ 
+
+        // fft stands for Fast Fourier Transform
+        analyserNode.fftSize = NUM_SAMPLES;
+
+        // this is where we hook up the <audio> element to the analyserNode
+        sourceNode = audioCtx.createMediaElementSource(audioElement); 
+        sourceNode.connect(audioCtx.destination);
+
+        sourceNode.connect(delayNode);
+        delayNode.connect(analyserNode);
+        analyserNode.connect(audioCtx.destination);
+
+        // here we connect to the destination i.e. speakers
+        //analyserNode.connect(audioCtx.destination);
+        return analyserNode;
+    }
+
+    function setupUI(){
+        document.querySelector("#trackSelect").onchange = function(e){
+            playStream(audioElement,e.target.value);
+        };
+    }
+
+    function playStream(audioElement, path){
+        audioElement.src = path;
+        audioElement.play();
+        audioElement.volume = 1.0;
+        document.querySelector('#status').innerHTML = "Now playing: " + path;
+    }
+
+    AudioManager.prototype.update = function(isFrequency) {
+        //create a new array of 8-bit integers (0-255)
+	    data = new Uint8Array(NUM_SAMPLES/2);
+
+        if (isFrequency) {
+            analyserNode.getByteFrequencyData(data);
+        } else {
+            analyserNode.getByteTimeDomainData(data);
+        }
+
+        delayNode.delayTime.value = delayAmount;
+    }
+
+    AudioManager.prototype.getData = function() {
+        return data;
+    }
+
+    AudioManager.prototype.setDelay = function(dAmount) {
+        delayAmount = dAmount;
+    }
+
+    return AudioManager;
+}();
diff --git a/canvasWidthResize.js b/canvasWidthResize.js
@@ -0,0 +1,16 @@
+var widthResize = (function() {
+    function init() {
+        var canvas = document.querySelector("canvas");
+
+        window.onresize = resizeCanvas;
+
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+        }
+
+        resizeCanvas();
+    };
+    return {
+        resize: init
+    };
+}());
diff --git a/fonts/firasans-regular-webfont.woff b/fonts/firasans-regular-webfont.woff
diff --git a/fonts/firasans-regular-webfont.woff2 b/fonts/firasans-regular-webfont.woff2
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width = device-width, initial-scale = 1">
+
+    <link rel="stylesheet" type="text/css" href="tree.css">
+    <script src="main.js"></script>
+    <script src="proceduralTree.js"></script>
+    <script src="proceduralColor.js"></script>
+    <script src="resize.js"></script>
+    <script src="audioManager.js"></script>
+
+    <title>Trees</title>
+</head>
+<body>
+    <article>
+        <canvas id="drawCanvas">Your browser doesn't support canvas</canvas>
+        <canvas id="topCanvas">Your browser doesn't support canvas</canvas>
+
+        <div class="controls">
+            <audio controls loop></audio>
+            <label>Track: 
+                <select id="trackSelect" >
+                    <option value="media/TheOrientation.mp3">The Orientation</option>
+                    <option value="media/DisarmYou.mp3">Disarm You</option>
+                    <option value="media/ItsYourWorld.mp3">It's Your World</option>
+                    <option value="media/MyFunnyValentine.mp3">My Funny Valentine</option>
+                </select>
+            </label>
+            <p id="status">???</p>
+            <form>
+                <input id="lowTreeBrush" type="radio" name="treeBrush" checked> Low Tree Brush <br>
+                <input id="medTreeBrush" type="radio" name="treeBrush"> Medium Tree Brush <br>
+                <input id="highTreeBrush" type="radio" name="treeBrush"> High Tree Brush <br>
+                Tree Growth Speed <br>
+                <input id="growthSpeedSlider" type="range" value="100"> <br>
+                Maximum Branch Angle <br>
+                <input id="branchAngleSlider" type="range" value="100"> <br>
+                <input id="frequencyDataType" type="radio" name="audioDataType" checked> Frequency <br>
+                <input id="waveformDataType" type="radio" name="audioDataType"> Waveform <br>
+            </form>
+        </div>
+    </article>
+</body>
+</html>