add p5.EQ (processing#183)

* started writing compressor.js * rough structure of compressor * draft of compressor * updated gruntfile, added restrictions and error logging to compressor * removed range error checking * compressor test * started draft of EQ * assigned bands to EQ * added band mod functions to eq * added to gruntfile * eq adjusting band levels based on filter.output.amp() * eq works based on p5.Filter.biquad.gain.value * added control points to eq example * spline curve in example, next: toggle band * using p5.Filter for bands makes EQ innacurate; handled by deleting output nodes of each filter * much better results using a raw biquad filter * added comments to eq.js * improved example * toggle works * added example to eq.js * fixed the example * reverted to pre-merge state * eq changed to have 2 sizes, 3 and 8 band * finished EQ with options of 3 or 8 bands * started secondary eq example * dj mixer working but EQ is connected wrong * dj mixer example complete with EQs * ToneJs is not getting imported correctly here * added tests for eq * finished both examples and cleaned up * added doc * refactored EQ to use a lightweight p5.Filter * added .gain() to p5.Filter, allows control of Biquad gain attribute * cleaned up * added return p5.EQ * fixed preoload() problem in eq_dj_mixer example * added a toggle function to p5.Filter() * reset this._untoggledType when calling .setType() * corrected some variable name inconsistencies * updated eq tests to use correct API, corrected some errors * added .addBand() and filter disconnection on dispose * changed .freq to .freq() * draw FFT logarithmically * added freq and gain labels to eq cntrl points * adjusted labels * added to index.html * added EQ.set() and fixed test * eslint --fix src/eq.js * update eq.js - create eqFilter class with a proper dispose method and overrides of invalid methods - comment out the set method - update comments * added more override methods tp EQFilter.js * added a few methods to eqFilter * added inline example to EQ
alextepes · Aug 3, 2017 · 06022c9 · 06022c9
1 parent ba48038
commit 06022c9
Show file tree

Hide file tree

Showing 16 changed files with 779 additions and 10 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -81,6 +81,7 @@ module.exports = function(grunt) {
             'effect': 'src/effect',
             'filter': 'src/filter',
             'reverb': 'src/reverb',
+            'eq': 'src/eq',
             'distortion': 'src/distortion',
             'compressor': 'src/compressor',
             'looper': 'src/looper',

diff --git a/examples/Gymnopedia.mp3 b/examples/Gymnopedia.mp3
diff --git a/examples/graphical_eq/index.html b/examples/graphical_eq/index.html
@@ -0,0 +1,10 @@
+<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>
diff --git a/examples/graphical_eq/sketch.js b/examples/graphical_eq/sketch.js
@@ -0,0 +1,175 @@
+/**
+ *  Example: Apply a p5.EQ filter to a p5.Noise.
+ *  Visualize the sound with FFT.
+ *  Use control points to change the spline that shapes the soundwave
+ */
+
+var fft;
+
+var eq, eqSize;
+
+//Array to hold contrl points
+var cntrlPts = []; 
+var ctrlPtRad, cntrlIndex;
+
+//Array to hold the spline vertices
+var splineVerts = [];
+
+var pressed; 
+var description;
+
+
+var soundFile;
+
+function preload() {
+  soundFormats('mp3', 'ogg');
+  soundFile = loadSound('../files/Soni_Ventorum_Wind_Quintet_-_08_-_Danzi_Wind_Quintet_Op_67_No_3_In_E-Flat_Major_4_Allegretto');
+}
+
+
+
+
+function setup() {
+  createCanvas(710, 256);
+  //sound wave color
+  fill(255, 40, 255);
+  ctrlPtRad = 15;
+
+  eqSize = 8;
+  eq = new p5.EQ(eqSize);
+
+  // Disconnect soundFile from master output.
+  // Then, connect it to the EQ, so that we only hear the EQ'd sound
+  soundFile.loop();
+  soundFile.disconnect();
+  soundFile.connect(eq);
+
+  //use an fft to visualize the sound
+  fft = new p5.FFT();
+
+  //Evenly spaced control points line up with logarithmically spaced
+  //filter frequencies on the logarithmically drawn spectrum
+  for (var i = 0; i < eqSize; i++) {
+    cntrlPts[i] = new CntrlPt(i, 
+              //map(x, 0, Math.log(1024), 0, width), height/2);
+              i + i*101, height/2);
+    splineVerts[i] = [cntrlPts[i].x,cntrlPts[i].y];
+
+  }
+
+
+  description = createDiv("p5.EQ:<br>"+
+                "Use the p5.EQ to shape a sound spectrum. The p5.EQ is "+
+                "built with Web Audio Biquad Filters (peaking mode) and can "+
+                "be set to use 3 or 8 bands.");
+  description.position(10,300);
+}
+
+function draw() {
+  background(30);
+
+  // Draw every value in the FFT spectrum analysis where
+  // x = lowest (10Hz) to highest (22050Hz) frequencies,
+  // h = energy / amplitude at that frequency
+  var spectrum = fft.analyze();
+
+  noStroke();
+  for (var i = 0; i< spectrum.length; i++){
+    //var x = map(i, 0, spectrum.length, 0, width);
+    var x = map(Math.log((i+1)/8), 0, Math.log(spectrum.length/8), 0, width);
+    var h = -height + map(spectrum[i], 0, 255, height, 0);
+    rect(x, height, width/spectrum.length, h) ;
+
+  }
+
+
+  //When mouse is pressed, move relevant control point, then display all
+  if (pressed) {cntrlPts[cntrlIndex].move();}
+
+  for (var i = 0; i < cntrlPts.length; i++) {
+    cntrlPts[i].display();
+    splineVerts[i] = [cntrlPts[i].x, cntrlPts[i].y];
+  }
+
+  //Draw a spline to connect control points
+  stroke(255,255,255);
+  noFill();
+  beginShape();
+    curveVertex( splineVerts[0][0],splineVerts[0][1])
+    for (var i = 0; i < splineVerts.length; i++) {
+      curveVertex( splineVerts[i][0],splineVerts[i][1]);
+    }
+    curveVertex( splineVerts[eqSize-1][0],splineVerts[eqSize-1][1])
+  endShape();
+}
+
+//Class for each control point
+function CntrlPt(i,x,y){
+  this.c = color(255);
+  this.x = x;
+  this.y = y;
+  this.index = i;
+
+  this.display = function () {
+    fill(this.c);
+    ellipse(this.x,this.y,ctrlPtRad,ctrlPtRad);
+    rectMode(CENTER);
+    noStroke();
+
+    var upDown = this.index % 2 > 0 ? 1 : -1
+    var textY;
+    var textX;
+    if (this.index === 0) {
+      textX = this.x + 10;
+    }
+    else if (this.index === eq.bands.length - 1){
+     textX = this.x - 70;
+    }
+    else{
+      textX = this.x - 18;
+    }
+    if (upDown > 0) {
+      text("freq: " + eq.bands[this.index].freq(),textX,this.y + upDown*40);
+      text("gain: " + eq.bands[this.index].gain(),textX,this.y + upDown *25);
+    } else {
+     text("gain: " + eq.bands[this.index].gain(),textX,this.y + upDown *40); 
+     text("freq: " + eq.bands[this.index].freq(),textX,this.y + upDown*25);
+    }
+
+  }
+
+  this.move = function () {
+    if (mouseX < 1) { this.x = 1;}
+    else if (mouseX > width) {this.x = width -1;}
+    else if (mouseY < 1) {this.y = 1;}
+    else if (mouseY > height) {this.y = height - 1;}
+    else {
+    this.y = mouseY;
+    eq.bands[this.index].biquad.gain.value = map(this.y, 0, height, 40, -40);
+    }
+  }
+
+  //Checks to see if mouse is ontop of control point
+  this.mouseOver = function () {
+    if (mouseX > this.x - ctrlPtRad && mouseX < this.x + ctrlPtRad
+      && mouseY < this.y + ctrlPtRad && mouseY > this.y - ctrlPtRad){
+      return true;
+    } else {
+      return false;
+    }s
+  }
+}
+
+function mousePressed(){
+  for (var i = 0; i < cntrlPts.length; i++) {
+    if (cntrlPts[i].mouseOver()){ 
+      pressed = true; 
+      cntrlIndex = i;
+      break;
+    }
+  }
+}
+
+function mouseReleased(){
+  pressed = false;
+}
diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@ <h2>p5.sound
 <div><a href="examples/envelopeRamp">envelopeRamp</a></div>
 <div><a href="examples/envelope_exponential_play">envelope_exponential_play</a></div>
 <div><a href="examples/envelope_exponential_trig_rel">envelope_exponential_trig_rel</a></div>
+<div><a href="examples/graphical_eq">graphical_eq</a></div>
 <div><a href="examples/granular_sampler">granular_sampler</a></div>
 <div><a href="examples/loadSound_404ErrorHandling">loadSound_404ErrorHandling</a></div>
 <div><a href="examples/loadSound_callback">loadSound_callback</a></div>