let x = 10;

let y = 10;

const notes = ["C2","D2","E2","F2","G2","A2","C3","D3","E3","F3","G3","A3","C4","D4","E4","F4","G4","A4",];

​

function preload() {

  myImage = loadImage("https://picsum.photos/200");

}

​

function setup() {

  cnv = createCanvas(400, 400);

  rectMode(CENTER);

  startButton = createButton("start transport");

  stopButton = createButton("stop transport");

  startButton.mousePressed(startTransport);

  stopButton.mousePressed(stopTransport);

}

​

function draw() {

  image(myImage, 0, 0, width, height);

  noFill();

  strokeWeight(5);

  stroke(255);

  rect (x, y, 20);

}

​

const myLoop = new Tone.Loop((time) => {

  let [r, g, b] = get(x, y);

  let rMap = floor(map(r, 0, 255, 0, notes.length))

  let gMap = floor(map(g, 0, 255, 0, notes.length))

  let bMap = floor(map(b, 0, 255, 0, notes.length))

  let note1 = notes[rMap]

  let note2 = notes[gMap]

  let note3 = notes[bMap]

  synth.triggerAttackRelease(note1, "16n", time);

  synth.triggerAttackRelease(note2, "16n", time);

  synth.triggerAttackRelease(note3, "16n", time);

  x+=20;

  if (x > width){

    x = 10;

    y+=20;

  }

}, "8n").start(0);

​

function startTransport() {

  Tone.start();

  Tone.Transport.start();

}

​

function stopTransport() {

  Tone.Transport.stop();

}

​