let filter;

let delay;

let cutoff;

let freq;

let segments = 30;

let xHistory = Array(segments).fill(0);

let yHistory = Array(segments).fill(0);

​

let index = 0;

​

function setup() {

  createCanvas(400, 400);

  osc = new p5.Oscillator();

  delay = new p5.Delay();

  filter = new p5.Filter();

  osc.disconnect();

  filter.disconnect();

  osc.connect(filter);

  filter.connect(delay);

  filter.res(80);

  delay.delayTime(0.250);

  delay.feedback(0.77);

  osc.amp(0.5);

  osc.start();

  strokeWeight(40);

  stroke('magenta');

}

​

function draw() {

  background(0);

  //draw line segments between the history of mouse points (if there are 3 points we can draw two line segments)

  for (let x = 0; x < segments - 1; x++) {

    //line (startX, startY, endX, endY)

    line(xHistory[x], yHistory[x], xHistory[x + 1], yHistory[x + 1]);

  }

  //add mouse position to end of array

  xHistory.push(mouseX);

  yHistory.push(mouseY);

  //remove the first element of the array

  xHistory = xHistory.slice(1);

  yHistory = yHistory.slice(1);

  cutoff = map(mouseY, 0, height, 20, 6000);

  filter.freq(cutoff);

  freq = map(mouseX, 0, width, 300, 800);

  osc.freq(freq)

}