let x, y;

​

function preload() {

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

    let drum = loadSound("drums/" + d + ".mp3");

    drums.push(drum);

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(220);

​

  let y = 0;

  let BEAT = 60;

  //to make the drum start playing at 1

  if (frameCount % 60 == 1) {

    drums[0].play();

​

    rect(x, y, 5, 15);

  }

/*

  //Mango drum

  y+= height/drums.length;

  if (frameCount % BEAT/2 == 1) {

    drums[1].play();

​

    rect(x, y, 5, 15);

  }

  y+= height/drums.length;

  //Pineapple drum

  if (frameCount % BEAT/3 == 1) {

    drums[2].play();

​

    rect(x, y, 5, 15);

  }

*/

  //decreament of beat

    y+= height/drums.length;

  //Pineapple drum

  if (frameCount % BEAT == sb) {

    drums[2].play();

    sb--;

    rect(x, y, 5, 15);

  }

  x++;

  if (x > width) {

    x = 0;

    background("white");

  }

  for (let d = 0 ; d < drums.length ; d++){

    drums[d].play();

    rect(x , y ,  15 , 15);

    y+= height/drums.length

  }

}

​

function keyPressed() {

  drums[key - 1].play();

}

​