let f = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  osc = new p5.Oscillator();

  osc.setType('sine');

  osc.freq(0);

  osc.start();

​

}

​

function draw() {

  background(220);

  // let f = map(mouseX, 0, width, 0, 22000);

​

  textAlign(CENTER, CENTER);

  textSize(24);

  text(round(f), width / 2, height / 2);

}

​

function keyPressed() {

  if (keyCode == RIGHT_ARROW) f++;

  else if (keyCode == LEFT_ARROW) f--;

  else if (keyCode == UP_ARROW) f += 10;

  else if (keyCode == DOWN_ARROW) f -= 10;

  else if (keyCode == RETURN) f += 100;

  else if (keyCode == SHIFT) f -= 100;

  // Don't let it go outside of range 0-22K

  f = constrain(f, 0, 22000);

  osc.freq(f);

}