Add distortion

alextepes · Aug 26, 2016 · 236d943 · 236d943
1 parent 56facfe
commit 236d943
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 42 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -120,6 +120,7 @@ module.exports = function(grunt) {
             'delay': 'src/delay',
             'filter': 'src/filter',
             'reverb': 'src/reverb',
+            'distortion': 'src/distortion',
             'looper': 'src/looper',
             'soundRecorder': 'src/soundRecorder',
             'signal': 'src/signal',

diff --git a/examples/distortion/index.html b/examples/distortion/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<head>
+  <script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
+
+  <script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script>
+
+  <script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script>
+
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+
+</head>
+
+<body>
+	click to trigger saw oscillator through heavy distortion
+
+</body>
diff --git a/examples/distortion/sketch.js b/examples/distortion/sketch.js
@@ -0,0 +1,63 @@
+/**
+ *  Trigger an oscillator processed through distortion.
+ */
+
+var env; // this is the env
+var osc; // this oscillator that will be effected by the distortion
+var distortion; // this is the waveshaper distortion effect
+
+var fft;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  fft = new p5.FFT(0, 256);
+
+
+  env = new p5.Env();
+  env.setADSR(0.01, 0.2, 0.1, 0.3);
+  env.setRange(1.0, 0.0);
+
+  osc = new p5.SawOsc(); // connects to master output by default
+  osc.start(0);
+  osc.freq(220);
+  osc.amp(env);
+  osc.disconnect(); // Disconnect from output to process through distortion
+
+  // Create a waveshaper distortion with 2x oversampling
+  distortion = new p5.Distortion(2000, '4x');
+  osc.connect(distortion);
+}
+
+function draw() {
+  var samples = fft.waveform();
+  drawOscilloscope(samples);
+}
+
+function drawOscilloscope(samples) {
+  var yTranslateScope = 50;
+  var xTranslateScope = 50;
+  var scopeWidth = width / 5;
+  var scopeHeight = height / 4;
+
+  fill(177, 177, 177);
+  rect(xTranslateScope, yTranslateScope, scopeWidth, scopeHeight);
+
+  stroke(0, 0, 0);
+  strokeWeight(0.5);
+
+  beginShape();
+  for (var sampleIndex in samples) {
+    var x = map(sampleIndex, 0, samples.length, 0, scopeWidth);
+    var y = map(samples[sampleIndex], -1, 1, -scopeHeight / 2, scopeHeight / 2);
+    vertex(x + xTranslateScope, y + scopeHeight/2 + yTranslateScope);
+  }
+  endShape();
+}
+
+function mousePressed() {
+  env.triggerAttack();
+}
+
+function mouseReleased() {
+  env.triggerRelease();
+}
diff --git a/lib/p5.sound.js b/lib/p5.sound.js
@@ -1,4 +1,4 @@
-/*! p5.sound.js v0.3.0 2016-07-27 */
+/*! p5.sound.js v0.3.0 2016-08-26 */
 (function (root, factory) {
   if (typeof define === 'function' && define.amd)
     define('p5.sound', ['p5'], function (p5) { (factory(p5));});
@@ -1190,6 +1190,7 @@ soundfile = function () {
    *      soundFile.play();
    *      background(0, 255, 0);
    *    }
+   *  }
    *  </code>
    *  </div>
    */
@@ -6150,11 +6151,19 @@ noise = function () {
    *  @return {Object}    Noise Object
    */
   p5.Noise = function (type) {
+    var assignType;
     p5.Oscillator.call(this);
     delete this.f;
     delete this.freq;
     delete this.oscillator;
-    this.buffer = _whiteNoise;
+    if (type === 'brown') {
+      assignType = _brownNoise;
+    } else if (type === 'pink') {
+      assignType = _pinkNoise;
+    } else {
+      assignType = _whiteNoise;
+    }
+    this.buffer = assignType;
   };
   p5.Noise.prototype = Object.create(p5.Oscillator.prototype);
   // generate noise buffers
@@ -6275,22 +6284,22 @@ noise = function () {
   /**
    *  Set the amplitude of the noise between 0 and 1.0. Or,
    *  modulate amplitude with an audio signal such as an oscillator.
-   *  
+   *
    *  @param  {Number|Object} volume amplitude between 0 and 1.0
    *                                     or modulating signal/oscillator
-   *  @param {Number} [rampTime] create a fade that lasts rampTime 
+   *  @param {Number} [rampTime] create a fade that lasts rampTime
    *  @param {Number} [timeFromNow] schedule this event to happen
    *                                seconds from now
    */
   /**
    *  Send output to a p5.sound or web audio object
-   *  
+   *
    *  @method  connect
    *  @param  {Object} unit
    */
   /**
    *  Disconnect all output.
-   *  
+   *
    *  @method disconnect
    */
   p5.Noise.prototype.dispose = function () {
@@ -9087,10 +9096,122 @@ gain = function () {
     this.input = undefined;
   };
 }(master, sndcore);
+var distortion;
+distortion = function () {
+  'use strict';
+  var p5sound = master;
+  /*
+   * Adapted from [Kevin Ennis on StackOverflow](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion)
+   */
+  function makeDistortionCurve(amount) {
+    var k = typeof amount === 'number' ? amount : 50;
+    var n_samples = 44100;
+    var curve = new Float32Array(n_samples);
+    var deg = Math.PI / 180;
+    var i = 0;
+    var x;
+    for (; i < n_samples; ++i) {
+      x = i * 2 / n_samples - 1;
+      curve[i] = (3 + k) * x * 20 * deg / (Math.PI + k * Math.abs(x));
+    }
+    return curve;
+  }
+  /**
+   * A waveshaper Distortion effect
+   *
+   * @class p5.Distortion
+   * @constructor
+   * @param {Number} [amount=400] Unbounded distortion amount.
+   *                                Normal values range from 0-2000.
+   * @param {String} [oversample='none'] 'none', '2x', or '4x'.
+   *
+   * @return {Object}   Distortion object
+   */
+  p5.Distortion = function (amount, oversample) {
+    if (typeof amount === 'undefined') {
+      amount = 400;
+    }
+    if (typeof amount !== 'number') {
+      throw new Error('amount must be a number');
+    }
+    if (typeof oversample === 'undefined') {
+      oversample = '2x';
+    }
+    if (typeof oversample !== 'string') {
+      throw new Error('oversample must be a String');
+    }
+    this.ac = p5sound.audiocontext;
+    this.input = this.ac.createGain();
+    this.output = this.ac.createGain();
+    /**
+     *  The p5.Filter is built with a
+     *  <a href="http://www.w3.org/TR/webaudio/#WaveShaperNode">
+     *  Web Audio WaveShaper Node</a>.
+     *
+     *  @property WaveShaperNode
+     *  @type {Object}  AudioNode
+     */
+    this.waveShaperNode = this.ac.createWaveShaper();
+    this.waveShaperNode.curve = makeDistortionCurve(amount);
+    this.waveShaperNode.oversample = oversample;
+    this.input.connect(this.waveShaperNode);
+    this.waveShaperNode.connect(this.output);
+    this.connect();
+    // add to the soundArray
+    p5sound.soundArray.push(this);
+  };
+  p5.Distortion.prototype.process = function (src, amount, oversample) {
+    src.connect(this.input);
+    this.set(amount, oversample);
+  };
+  /**
+   * Set the waveform type of the waveshaper. Types include:
+   * 'sine' (default), 'triangle', 'sawtooh', 'square'.
+   *
+   * @method setType
+   * @param {String}
+   */
+  p5.Distortion.prototype.set = function (amount, oversample) {
+    if (amount) {
+      this.waveShaperNode.curve = makeDistortionCurve(amount);
+    }
+    if (oversample) {
+      this.waveShaperNode.oversample = oversample;
+    }
+  };
+  /**
+   *  Send output to a p5.sound or web audio object
+   *
+   *  @method connect
+   *  @param  {Object} unit
+   */
+  p5.Distortion.prototype.connect = function (unit) {
+    var u = unit || p5.soundOut.input;
+    this.output.connect(u);
+  };
+  /**
+   *  Disconnect all output.
+   *
+   *  @method disconnect
+   */
+  p5.Distortion.prototype.disconnect = function () {
+    this.output.disconnect();
+  };
+  p5.Distortion.prototype.dispose = function () {
+    var index = p5sound.soundArray.indexOf(this);
+    p5sound.soundArray.splice(index, 1);
+    this.waveShaperNode.curve = null;
+    this.waveShaperNode.oversample = null;
+    if (typeof this.output !== 'undefined') {
+      this.output.disconnect();
+      this.output = null;
+    }
+  };
+}(master);
 var src_app;
 src_app = function () {
   'use strict';
   var p5SOUND = sndcore;
   return p5SOUND;
-}(sndcore, master, helpers, errorHandler, panner, soundfile, amplitude, fft, signal, oscillator, env, pulse, noise, audioin, filter, delay, reverb, metro, looper, soundRecorder, peakdetect, gain);
+}(sndcore, master, helpers, errorHandler, panner, soundfile, amplitude, fft, signal, oscillator, env, pulse, noise, audioin, filter, delay, reverb, metro, looper, soundRecorder, peakdetect, gain, distortion);
 }));
diff --git a/lib/p5.sound.min.js b/lib/p5.sound.min.js
diff --git a/src/app.js b/src/app.js
@@ -24,7 +24,8 @@ define(function (require) {
   require('soundRecorder');
   require('peakdetect');
   require('gain');
+  require('distortion');
 
   return p5SOUND;
 
-});
+});