let things = [];

let w = 50;

const notes = [

  "C2",

  "G2",

  "D3",

  "F3",

  "A3",

  "C4",

  "E4",

  "G4",

  "A4",

  "B4",

  "D5",

  "F5",

];

let note1 = notes[0];

let note2 = notes[4];

let note3 = notes[6];

let r, g, b;

isInitialized = false;

​

function setup() {

  frameRate(60);

  cnv = createCanvas(600, 600);

  rectMode(CENTER);

  c1 = color(random(255), random(255), random(255));

  c2 = color(random(255), random(255), random(255));

  let randomX = random(width);

  let randomY = random(height)

  setGradient(c1, c2);

  const thing1 = new Thing(width/2, height/2, w, 0.7, 1.3);

  const thing2 = new Thing(width/2, height/2, w, 0.73, 1.33)

  // const thing3 = new Thing(width/2, height/2, w, 5, 2)

  things.push(thing1, thing2, thing3);

}

​

function draw() {

  setGradient(c1, c2);

  if (isInitialized) {

    for (let thing of things) {

      thing.show();

      thing.move();

    }

    // things[0].collision(things[1]);

    // things[1].collision(things[2]);

    stroke(255);

    line(things[0].x, things[0].y, things[1].x, things[1].y)

    // line(things[1].x, things[1].y, things[2].x, things[2].y)

  } else {

    fill(255);

    text('click to start', width/2-50, height/2)

  }

}

​

function mousePressed() {

  if (!isInitialized) {

    Tone.start();

    // isInitialized = true;

  } 

​

  isInitialized = !isInitialized;

}

​

function randomizeColor() {

  c1 = color(random(255), random(255), random(255));

  c2 = color(random(255), random(255), random(255));

}

​

function setGradient(c1, c2) {

  noFill();

  for (var y = 0; y < height; y++) {

    var inter = map(y, 0, height, 0, 1);

    var c = lerpColor(c1, c2, inter);

    stroke(c);

    line(0, y, width, y);

  }

}

​