Added inverse FFT and Vocoder demo.

corbanbrook · corbanbrook · commit f82d31d500a6 · 2010-07-07T11:05:32.000-04:00
diff --git a/dsp.js b/dsp.js
@@ -301,6 +301,83 @@ FFT.prototype.forward = function(buffer) {
   while(i--) {
     spectrum[i] = 2 * Math.sqrt(real[i] * real[i] + imag[i] * imag[i]) / bufferSize;
   }
+
+  return spectrum;
+};
+
+FFT.prototype.inverse = function(real, imag) {
+  // Locally scope variables for speed up
+  var bufferSize      = this.bufferSize,
+      cosTable        = this.cosTable,
+      sinTable        = this.sinTable,
+      reverseTable    = this.reverseTable,
+      spectrum        = this.spectrum;
+      
+      real = real || this.real;
+      imag = imag || this.imag;
+
+  for (var i = 0; i < bufferSize; i++) {
+    imag[i] *= -1;
+  }
+
+  var revReal = new Float32Array(bufferSize);
+  var revImag = new Float32Array(bufferSize);
+  
+  for (var i = 0; i < real.length; i++) {
+    revReal[i] = real[reverseTable[i]];
+    revImag[i] = imag[reverseTable[i]];
+  }
+  
+  real = revReal;
+  imag = revImag;
+
+  var halfSize = 1, 
+      phaseShiftStepReal, 
+      phaseShiftStepImag, 
+      currentPhaseShiftReal, 
+      currentPhaseShiftImag, 
+      off, 
+      tr, 
+      ti, 
+      tmpReal, 
+      i;
+
+  while ( halfSize < bufferSize ) {
+    phaseShiftStepReal = cosTable[halfSize];
+    phaseShiftStepImag = sinTable[halfSize];
+    currentPhaseShiftReal = 1;
+    currentPhaseShiftImag = 0;
+
+    for ( var fftStep = 0; fftStep < halfSize; fftStep++ ) {
+      i = fftStep;
+
+      while ( i < bufferSize ) {
+        off = i + halfSize;
+        tr = (currentPhaseShiftReal * real[off]) - (currentPhaseShiftImag * imag[off]);
+        ti = (currentPhaseShiftReal * imag[off]) + (currentPhaseShiftImag * real[off]);
+
+        real[off] = real[i] - tr;
+        imag[off] = imag[i] - ti;
+        real[i] += tr;
+        imag[i] += ti;
+
+        i += halfSize << 1;
+      }
+
+      tmpReal = currentPhaseShiftReal;
+      currentPhaseShiftReal = (tmpReal * phaseShiftStepReal) - (currentPhaseShiftImag * phaseShiftStepImag);
+      currentPhaseShiftImag = (tmpReal * phaseShiftStepImag) + (currentPhaseShiftImag * phaseShiftStepReal);
+    }
+
+    halfSize = halfSize << 1;
+  }
+
+  var buffer = new Float32Array(bufferSize);
+  for (var i = 0; i < bufferSize; i++) {
+    buffer[i] = real[i] / bufferSize;
+  }
+
+  return buffer;
 };
 
 Sampler = function Sampler(file, bufferSize, sampleRate, playStart, playEnd, loopStart, loopEnd, loopMode) {
@@ -884,6 +961,7 @@ WindowFunction.prototype.process = function(buffer) {
   for ( var i = 0; i < length; i++ ) {
     buffer[i] *= this.func(length, i, this.alpha);
   }
+  return buffer;
 };
 
 WindowFunction.Bartlett = function(length, index) {
diff --git a/examples/filter.html b/examples/filter.html
@@ -2,24 +2,14 @@
 <html>
   <head>
     <!-- Load JQuery and JQuery-UI -->
-    <link type="text/css" href="css/hot-sneaks/jquery-ui-1.8.custom.css" rel="stylesheet" />  
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
-    <!--<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>-->
     
     <!-- Load Processing.js -->
     <script language="javascript" src="js/processing.js"></script>
     <script language="javascript" src="js/init.js"></script>
 
     <!-- Load DSP.js -->
     <script src="../dsp.js"></script>
-    <script>
-      /*
-      $(function() {
-        $('#cutoff').slider({ orientation: 'vertical', range: 'min', min: 60, max: 5000, step: 1, value: 880, slide: changeFilter });
-        $('#res').slider({ orientation: 'vertical', range: 'min', min: 1.0, max: 20.0, value: 1.0, step: 0.01, slide: changeFilter });
-      });
-      */
-    </script>
 
     <style type="text/css">
       body, * {
@@ -66,9 +56,11 @@
     <script>
       // Setup shared variables
       var sampleRate = 44100;
+      var frameSize = 4096;
       
-      var signal = new Float32Array(1024);
+      var signal = new Float32Array(frameSize/2);
       var lp12;
+      var buffer = [];
 
 
       // Setup experimental audio out
@@ -84,17 +76,32 @@
 
       function loadedMetaData(event) {
         var audio = document.getElementById('input');
-        audio.mozFrameBufferLength = 4096;
+        audio.mozFrameBufferLength = frameSize;
       }
 
       function audioWritten(event) {
         signal = DSP.getChannel(DSP.MIX, event.mozFrameBuffer);
-        
-        // Apply the filter to the signal
         lp12.process(signal);
 
-        output.mozWriteAudio([]); // flush
-        output.mozWriteAudio(signal);
+        var audio = [];
+        for (var i = 0; i < signal.length; i++) {
+          audio[i] = signal[i];
+        }
+
+        // Apply the filter to the signal
+  
+        buffer = (buffer.length === 0) ?  audio : buffer.concat(audio);
+
+        var written = output.mozWriteAudio(audio);
+
+        if (written < buffer.length) {
+          buffer.slice(written);
+        } else {
+          buffer.length = 0;
+        }
+
+        //output.mozWriteAudio([]); // flush
+        //output.mozWriteAudio(signal);
       }
     </script>
     
@@ -105,11 +112,10 @@
       void setup() {
         size(512, 200);
 
-        cut = new Knob("", 60, 5000, 880, 70, 20, 50, 50);        
-        res = new Knob("", 1, 20, 1, 0.4, 20, 100, 50);        
+        cut = new Knob("", 60, 6000, 2500, 70, 20, 50, 50);        
+        res = new Knob("", 1, 20, 7, 0.3, 20, 100, 50);        
 
         lp12 = new IIRFilter(DSP.LOWPASS, 22050, 0, sampleRate);
-        //lp12.set($('#cutoff').slider('option', 'value'), $('#res').slider('option', 'value'));
 
         // mute the input
         document.getElementById('input').muted = true;
@@ -120,8 +126,8 @@
       void draw() {
         background(255);
         lp12.set(cut.value, res.value);
-        for (int i = 0; i < width; i++) {
-          line(i, height/2 - signal[2*i]/2 * 200, i, height/2 + signal[2*i]/2 * 200);
+        for (int i = 0; i < width; i+=2) {
+          line(i, height/2 - signal[4*i]/2 * 200, i, height/2 + signal[4*i]/2 * 200);
         }
         fill(255, 0, 0);
         text("F", 30, 30);
@@ -215,19 +221,7 @@ <h1>Audio Filter</h1>
     <p>The <b>F</b> knob controls the cut off frequency, between 0 and 22050 Hz.</p>
     <p>The <b>Q</b> knob controls the resonance drive.</p>
     <p>A low frequency cutoff and strong resonance can give an acidy or dampened underwater effect.</p>
-    <p>(Be careful! Adjust your volume! Certain slider combinations can give off loud undesired schreeching noises!)</p>
+    <p>(Be careful! Adjust your volume! Certain knob combinations can give off loud undesired schreeching noises!)</p>
     <p>Music: Delv-X: Megaman theme (cover)</p>
-
-      
-<!--  <div class="control" style="float: right; height: 188px">
-        <h3>Low Pass Filter</h3>
-        <table>
-          <tr>
-            <td><div id="cutoff" class="slider"></div>F</td>
-            <td><div id="res" class="slider"></div>Q</td>
-          </tr>
-        </table>
-      </div>
-    </div>-->
   </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -18,6 +18,9 @@ <h1>DSP.JS Examples</h1>
 
   <dt><a href="sampler.html">Sampler</a></dt>
     <dd>A simple audio sampler with keyboard input<dd>
+
+  <dt><a href="vocoder.html">Vocoder</a></dt>
+    <dd>Vocodes a formant with a carrier wave.<dd>
 </dl>
 
 <h2>html5 + audio related examples</h2>
diff --git a/examples/js/processing.js b/examples/js/processing.js
@@ -7200,12 +7200,8 @@
 
       this.toImageData = function() {
         // changed for 0.9
-        if (this.imageData instanceof Image) {
-          return this.imageData;
-        } else {
-          var canvasData = getCanvasData(this.imageData);
-          return canvasData.context.getImageData(0, 0, this.width, this.height);
-        }
+        var canvasData = getCanvasData(this.imageData);
+        return canvasData.context.getImageData(0, 0, this.width, this.height);
       };
 
       this.toDataURL = function() {
@@ -7224,11 +7220,7 @@
       this.fromHTMLImageData = function(htmlImg) {
         // convert an <img> to a PImage
         var canvasData = getCanvasData(htmlImg);
-        try {
-          var imageData = canvasData.context.getImageData(0, 0, htmlImg.width, htmlImg.height);
-        } catch(e) {
-          var imageData = htmlImg;
-        }
+        var imageData = canvasData.context.getImageData(0, 0, htmlImg.width, htmlImg.height);
         this.fromImageData(imageData);
       };
 
diff --git a/examples/sampler.html b/examples/sampler.html
@@ -55,7 +55,7 @@
       var timePerWrite = 0;
       var programStart;
       
-      var s = new Sampler('audio/c.ogg', bufferSize, sampleRate);
+      var s = new Sampler('audio/carrier.ogg', bufferSize, sampleRate);
       s.envelope = new ADSR(0, 0, 1, Infinity, 0, sampleRate);
       s.envelope.disable(); // turn off so it does not auto trigger
       
diff --git a/examples/vocoder.html b/examples/vocoder.html
