let stopButton;

const notes = [

  "C2",

  "D2",

  "E2",

  "F2",

  "G2",

  "A2",

  "C3",

  "D3",

  "E3",

  "F3",

  "G3",

  "A3",

  "C4",

  "D4",

  "E4",

  "F4",

  "G4",

  "A4",

  "C5",

  "D5",

  "E5",

  "F5",

  "G5",

  "A5",

];

let note;

let box;

​

function setup() {

  createCanvas(400, 400);

  startButton = createButton("start transport");

  stopButton = createButton("stop transport");

  startButton.mousePressed(startTransport);

  stopButton.mousePressed(stopTransport);

  textSize(24);

  box = {

    x: width/2,

    y: height/2,

    w: 20,

    xVel: random(5)+1,

    yVel: random(5)+1,

    show: function(){

      rect(this.x, this.y, this.w)

    },

    move: function(){

      this.x += this.xVel;

      this.y += this.yVel;

      if (this.x > width-this.w || this.x < 0){

        this.xVel *= -1;

        synth.triggerAttackRelease(note, "16n");

      }

      if (this.y > height-this.w || this.y < 0){

        this.yVel *= -1;

        synth.triggerAttackRelease(note, "16n");

      }

    }

  }

}

​

function draw() {

  background("goldenrod");

  fill(0);

  box.show();

  box.move();

  n = floor(map(box.x, 0, width, 0, notes.length, true));

  note = notes[n];

  synth.filterEnvelope.baseFrequency = floor(map(box.y, height, 0, 100, 800, true))

  text(note, width / 2 - 10, height / 2);

}

​

function startTransport() {

  Tone.start();

  // start the transport

  Tone.Transport.start();

}

​

function stopTransport() {

  // stop the transport

  Tone.Transport.stop();

}

​