let beat;

let myFilter;

let myNoise;

let sample;

let fft;

let knobPosition;

​

function preload() {

  dragons = loadSound("https://cdn.jsdelivr.net/gh/processing/p5.js-website@master/src/data/examples/assets/lucky_dragons_-_power_melody.mp3"); 

  beat = loadSound("https://cdn.jsdelivr.net/gh/processing/p5.js-website@master/src/data/examples/assets/beat.mp3");

​

}

​

function setup() {

  createCanvas(256, 384);

  // try different sample

  sample = beat;

  // 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

    }

    myFilter.freq(freq);

    myFilter.res(res);

  }

  stroke("black");

  fill("white");

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

}