let hh, clap, bass; //instrument will serve as a container that holds the sound source

  let hhPat, cPat, bPat; // instrument pattern: an array of number that can be manipulated to make beats (0/1)

  let hhPhrase, cPhrase, bPhrase; //instrument phrase: define how instrument is interpreted( what 0 and 1 will correspond to)

  let drums; //part. will attach the phrase to the part which will serve as our transport to drive the phrase

  let beatLength;

  let bpmCTRL;

  let cnv;

​

  let pageState;

​

   this.setup =function() {

​

    pageState= "start"

​

    beatLength = 16;

​

    hh = loadSound("samples/hh_sample.mp3", () => {});

​

    clap = loadSound("samples/clap_sample.mp3", () => {});

​

    bass = loadSound("samples/bass_sample.mp3", () => {});

​

    hh.amp(0.5);

    bass.amp(0.5);

    clap.amp(0.5);

​

    hhPat = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

    cPat = [0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1];

    bPat = [1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1];

​

    //   object oriented programming trial

    //   hhPat = new Pattern()

    //   cPat = new Pattern()

    //   bPat = new Pattern()

​

    //   hhPat.Random()

​

    //   print(hhPat)

​

    hhPhrase = new p5.Phrase(

      "hh",

      (time) => {

        hh.play(time);

      },

      hhPat

    );

​

    cPhrase = new p5.Phrase(

      "clap",

      (time) => {

        clap.play(time);

      },

      cPat

    );

​

    bPhrase = new p5.Phrase(

      "bass",

      (time) => {

        bass.play(time);

      },

      bPat

    );

​

    drums = new p5.Part();

​

    drums.addPhrase(hhPhrase);

    drums.addPhrase(cPhrase);

    drums.addPhrase(bPhrase);

​

    bpmCTRL = createSlider(30, 200, 90, 1);

    bpmCTRL.position(50, 50 + 90);

​

    bpmCTRL.input(() => {

      drums.setBPM(bpmCTRL.value());

    });

​

    drums.setBPM("90");

​

    this.drawMatrix();

  }

​

  //  this.draw() {

  //   // print(mouseX, mouseY);

  //   if (pageState== "start"){

  //     background(150)

  //   }

  // }

​

   this.keyPressed = function() {

    if (key === " ") {

      if (hh.isLoaded() && clap.isLoaded() && bass.isLoaded()) {

        if (!drums.isPlaying) {

          drums.loop();

        } else {

          drums.stop();

        }

      } else {

        console.log("let drums load");

      }

    }

  }

​

   this.mousePressed = function() {

    // let rowClicked = floor(3*mouseY/height)

    let rowClicked = floor((3 * (mouseY - 50)) / (height - 135));

​

    // let indexClicked = floor (16*mouseX/width)

    let indexClicked = floor((16 * (mouseX - 50)) / (width - 100));

​

    if (rowClicked === 0) {

      console.log("1st row" + indexClicked);

      hhPat[indexClicked] = +!hhPat[indexClicked];

    }

    if (rowClicked === 1) {

      console.log("2nd row");

      cPat[indexClicked] = +!cPat[indexClicked];

    }

    if (rowClicked === 2) {

      console.log("3rd row");

      bPat[indexClicked] = +!bPat[indexClicked];

    }

    this.drawMatrix();

  }

​

  //  this.mouseClicked(){

​

  //     let indexClicked = floor (16*(mouseX-50)/(width-100))

  //     print(indexClicked)

​

  //   if ( 50<mouseX<470 && 50<mouseY<80){

  //         console.log('1st row' + indexClicked)

  //     hhPat[indexClicked] = +!hhPat[indexClicked];

  //   }

​

  // }

​

   this.drawMatrix = function() {

    background(80);

​

    stroke("gray");

​

    strokeWeight(2);

​

    for (let i = 0; i < beatLength + 1; i++) {

      //startx, starty, endx, endy

      line(50 + (i * 420) / beatLength, 50, 50 + (i * 420) / beatLength, 130);

    }

​

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

      line(50, 50 + (i * 80) / 3, 470, 50 + (i * 80) / 3);

    }

    // noStroke();

    strokeWeight(1);

​

    for (let i = 0; i < beatLength; i++) {

      let xPnt = 50 + (i * 420) / beatLength + (0.5 * 420) / beatLength;

      let yPnt = 50 + 80 / 6;

      if (hhPat[i] === 1) {

        // ellipse( 50 +(i * 420) / beatLength + (0.5 * 420) / beatLength,

        //   50 +80 / 6, 10 );

        triangle(xPnt, yPnt - 5, xPnt + 5.45, yPnt + 5, xPnt - 5.45, yPnt + 5);

      }

      if (cPat[i] === 1) {

        rectMode(CENTER);

        rect(xPnt, yPnt + 27.5, 9.3, 9.3);

      }

      if (bPat[i] === 1) {

        ellipse(xPnt, 50 + (80 * 5) / 6, 10.4);

      }

    }

  }

}