let notearray = [

  420,

  467,

  601,

  936,

  1042,

  1060,

  849,

  855,

  419,

  850,

  600,

  841,

  1074,

  1502,

  1789,

  927,

  373,

  393,

  415,

  1115,

  1597,

  388,

  1580,

  1338,

  1209,

  1577,

  220,

  200,

  246,

  296,

  1050,

  496,

  521,

  1191,

  658,

  797,

  318,

  532,

  534,

  219,

  440,

  199,

  418,

  497,

  187,

  331,

  147,

  99,

  208,

  222,

  938,

  279,

  1048,

  261,

  449,

  493,

  910,

  894,

];

​

const minNote = 99;

const maxNote = 1789;

​

const minSpeed = 0.5;

const maxSpeed = 1;

const margin = 0;

​

let monoSynth;

let note;

let speed;

​

let prevNote;

let prevSpeed;

​

let img;

let img2;

​

function preload() {

  img = loadImage("Sur_mirrorreflection.jpg");

  img2 = loadImage("Sur_mirrorreflection_onlyfront.png");

}

​

function setup() {

  createCanvas(img.width, img.height);

  image(img, 0, 0);

​

  monoSynth = new p5.MonoSynth();

​

  // note = random(minNote, maxNote);

  for (let i = 0; i <= notearray.length; i++) {

    note = notearray[i];

    speed = random(minSpeed, maxSpeed);

    prevNote = note;

    prevSpeed = speed;

​

    strokeWeight(4);

    //background(32);

  }

  print(notearray)

}

​

function draw() {

  const frameDivider = floor(60 / speed);

  print("speed: " + speed)

​

  if (frameCount % frameDivider == 0) {

    playSynth();

  }

}

​

function playSynth() {

  userStartAudio();

  i = round(random(notearray.length));

  print(i)

    // note += random([-5, 0, 5]);

    note = constrain(notearray[i], minNote, maxNote);

​

    speed += random([-0.1, 0, 0.1]);

    speed = constrain(speed, minSpeed, maxSpeed);

​

    const velocity = 1;

    const time = 0;

    const duration = 1 / speed;

​

    monoSynth.play(note, velocity, time, duration);

​

    const prevSpeedX = map(

      prevSpeed,

      minSpeed,

      maxSpeed,

      margin,

      width - margin

    );

    const prevNoteY = map(prevNote, minNote, maxNote, height - margin, margin);

    const speedX = map(speed, minSpeed, maxSpeed, margin, width - margin);

    const noteY = map(note, minNote, maxNote, height - margin, margin);

​

    // get color of the pixels

    img.loadPixels();

    const pixelX = random(img.width);

    const pixelY = random(img.height);

    const pixelColor = img.get(pixelX, pixelY);

​

    stroke(pixelColor);

    line(prevSpeedX, prevNoteY, speedX, noteY);

    prevNote = note;

    prevSpeed = speed;

​

    image(img2, 0, 0);

    print(prevSpeedX + " , " + prevNoteY + " , " + speedX + " , " + noteY)

    console.log(prevNote);

}

​