let guitars = [];

let drums = [];

let triangle;

let beat = 60;

let x, y, h;

let rhythm = 10;

​

// Load all the sounds

function preload() {

  //load guitars

  for (let g = 0; g < 6; g++) {

    guitars.push(loadSound("guitar" + g + ".mp3"));

    guitars[g].setVolume(0.1)

  }

  //load drums

  for (let d = 0; d < 4; d++) {

    drums.push(loadSound("drum" + d + ".mp3"));

    drums[d].setVolume(0.2)

  }

  triangle = loadSound("triangle0.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  x = 0;

  y = 0;

  masterVolume(0.2);

  //randomSeed(0);

}

​

function draw() {

  //timer for the beat

  let time = floor(frameCount / 60);

​

  //visualization

  x++;

  if (x > width) {

    background("white");

    x = 0;

  }

​

  // Play instrument

  for (let g = 0; g < guitars.length; g++) {

    //between 0 & 5 seconds, play every second

    if (time >= 0 && time < 10 && frameCount % beat == 0) {

      guitars[5].play();

      //guitars[5].setVolume(0.2);

​

      //visual

      fill("black");

      rect(x, y, 5, 15);

    }

​

    //between 5 & 20 seconds, play every second

    if (time >= 5 && time <= 20 && frameCount % beat == 0) {

      drums[0].play();

      //visual

      fill("red");

      rect(x, y + 20, 5, 15);

    }

​

    //between 5 & 25 seconds, play half a second

    if (time >= 5 && time <= 25 && frameCount % beat == beat / 2) {

      drums[2].play();

      fill("rgb(247,147,147)");

      rect(x, y + 40, 5, 15);

    }

    //between 10 & 25 seconds, play at slightly 4 frames after every 2 seconds 

    if (time >= 10 && time <= 25 && frameCount % (beat * 2) == 4) {

      drums[3].play();

      fill("orange");

      rect(x, y + 60, 5, 15);

    }

​

    //after 15 seconds, play every 5 seconds

    if (time >= 15 && frameCount % 300 == 0) {

      triangle.play();

      fill("green");

      rect(x, y + 80, 5, 15);

    }

    //play different guitar at every 1 second increment

    if (time >= 10 && time <= 20 && frameCount % (beat * g) == 0) {

      guitars[g].play();

      //guitars[g].setVolume(0.6);

​

      //visual

      let offset = 80;

      // Spread across remaining height

      h = (height - offset) / guitars.length; 

      // Position below triangle

      let guitarY = offset + g * h; 

      fill("blue");

      circle(x, guitarY, 15);

    }

​

    //varying the rhythm 

    if (time >= 30 && frameCount % floor((beat * rhythm) / g) == 0) {

      // Pick a random harmonic ratio for melody

      guitars[g].play();

      guitars[g].setVolume(0.6);

​

      //increase guitar play rate

      rhythm -= 0.2;

      if (rhythm < 2) {

        rhythm = 2;

      }

​

      // Visualization for guitars

      let offset = 80;

      // Spread across remaining height

      h = (height - offset) / guitars.length; 

      // Position below

      let guitarY = offset + g * h; 

      fill("lightblue");

      circle(x, guitarY, 15);

    }

​

    if (time >= 44 && time <= 60 && frameCount % 15 == 0) {

      drums[0].play();

      drums[0].setVolume(0.3);

      //visual

      fill("red");

      rect(x, y + 20, 5, 15);

    }

​

    if (time >= 40 && time <= 60 && frameCount % beat == beat / 2) {

      drums[2].play();

      fill("rgb(247,147,147)");

      rect(x, y + 40, 5, 15);

​

      if (time >= 60) {

        guitars[g].stop();

        drums[g].stop();

        triangle.stop();

      }

    }

  }

}

​