https://github.com/ITPNYU/ICM-2019-Media/wiki/Homework-Cassie#week-11

​

https://p5js.org/reference/#/p5.Filter

​

LowPass: Allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff.

​

HighPass: Allows frequencies above a cutoff frequency to pass through

​

BandPass: Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range.

*/

​

let thunder;

let bird;

let gong;

​

let myFilter;

let sample;

let fft;

let knobPosition;

​

function preload() {

  thunder = loadSound("sounds/thunder.mp3"); 

  bird = loadSound("sounds/bird.mp3"); 

  gong = loadSound("sounds/gong.mp3"); 

}

​

function setup() {

  createCanvas(256, 384);

  // try different samples

  sample = bird;

  // try the different filters!!

  myFilter = new p5.Filter("lowpass");

  // myFilter = new p5.Filter("highpass");

  // myFilter = new p5.Filter("bandpass");

  sample.disconnect();

  sample.connect(myFilter);

  let button = createButton("Toggle Sample");

  button.mousePressed(function() {

    if (sample.isPlaying()) {

      sample.stop(); 

    } else {

      sample.loop(); 

    }

  });

  fft = new p5.FFT(0.8, 256);

  myFilter.freq(2300);

  myFilter.res(1);

  knobPosition = {

    x: map(2300, 10, 10000, 0, width),

    y: map(1, 25, 0.01, 256, height)

  };

}

​

​

function draw() {

  background(0);

  let spectrum = fft.analyze();

  let waveform = fft.waveform();

  // frequency domain

  stroke("red");

  for(let i = 0; i < spectrum.length; i+=1) { 

    line(i, 128, i, 128-(spectrum[i]/2)); 

  }

  // time domain

  stroke("blue");

  for (let i = 0; i < waveform.length; i +=1) {

    let sampleHeight = map(waveform[i], -1, 1, -64, 64);

    line(i, 192, i, 192 + sampleHeight);

  }

  // effect controller

  if (mouseIsPressed && mouseY > 256 && mouseY < height) {

    let freq = map(mouseX, 0, width, 10, 10000);

    let res = map(mouseY, 256, height, 25, 0.01);

    knobPosition = {

      x: mouseX,

      y: mouseY

    }

    // Set the filter frequency based on mouseX

    myFilter.freq(freq);

    // Control either width of a bandpass

    // frequency, or the resonance of 

    // low/highpass cutoff frequency with mouseY

    myFilter.res(res);

  }

  stroke("black");

  fill("white");

  ellipse(knobPosition.x, knobPosition.y, 20);

}