let x = 10;

let y = 10;

​

const notes =["C1","F#3","Ab3","Db3","E2"]

​

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);

  // console.log(r, g, b);

  //for greater sensitivity, maybe get max and  min of different rgb too;

  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));

  const note1 = notes[rMap];

  const note2= notes[gMap];

  const note3 = notes[bMap];

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

  // synth.triggerAttackRelease(note2,"16n",time+random(0.5));

​

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

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

​

​

  // console.log(rMap,gMap,bMap);

  x+=20;

  if (x > width){

    x = 10;

    y+=20;

  }

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

​

function startTransport() {

  Tone.start();

  Tone.Transport.start();

}

​

function stopTransport() {

  Tone.Transport.stop();

}

​