let col = 255;

let r = 10;

​

function setup() {

  createCanvas(400, 400);

  osc = new p5.Oscillator("sawtooth");

}

​

function draw() {

  background(220);

​

  strokeWeight(1);

  // XY controller

​

  line(0, mouseY, width, mouseY);

  line(mouseX, 0, mouseX, height);

​

  if (mouseX < 0 || mouseX > width) {

    circle(width, mouseY, r * 2);

  } else if (mouseY < 0 || mouseY > height) {

    circle(mouseX, height, r * 2);

  } else {

    circle(mouseX, mouseY, r * 2);

  }

​

  stroke(0);

  strokeWeight(12);

  noFill();

  rect(0, 0, width, height);

​

  //sound

  freqs = constrain(map(mouseX, 0, width, 50, 200), 50, 200);

​

  amps = constrain(map(mouseY, height, 0, 0, 1), 0, 1);

​

  if (playing) {

    osc.freq(freqs, 0.1);

    osc.amp(amps, 0.2);

  }

​

  if (mouseIsPressed) {

    playSynth();

    fill(col, 0, 0);

  } else {

    fill(col);

  }

}

​

function mouseClicked() {}

​

function mouseReleased() {

  osc.amp(0, 0.5);

  playing = false;

}

​

function playSynth() {

  osc.start();

  playing = true;

}

​