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 bassPic;

let hhPic;

let clapPic;

​

​

​

function preload(){

  bassPic = loadImage('drum icon/kick drum.png')

    hhPic = loadImage('drum icon/open_hi_hat.png')

  clapPic = loadImage('drum icon/snare.png')

​

}

///////////////////////////////////////

​

function setup() {

  cnv = createCanvas(320, 60);

  cnv.mousePressed(canvasPressed);

  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, 0, 0, 0,1, 0, 0, 0, 0, 0, 0, 0,1, 0, 0, 0];

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

​

  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(10, 70);

​

  bpmCTRL.input(() => {

    drums.setBPM(bpmCTRL.value());

  });

​

  drums.setBPM("90");

  drawMatrix();

}

​

///////////////////////////////////

​

function keyPressed() {

  if (key === " ") {

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

      if (!drums.isPlaying) {

        drums.loop();

      } else {

        drums.stop();

      }

    } else {

      console.log("let drums load");

    }

  }

}

​

///////////////////////////////////////

​

function canvasPressed() {

  let rowClicked = floor(3*mouseY/height)

  let indexClicked = floor (16*mouseX/width)

  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];

​

  }

  drawMatrix()

}

​

/////////////////////////////////////////

​

function drawMatrix() {

  background(250);

  stroke("gray");

  strokeWeight(2);

​

//   vertical lines

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

    //startx, starty, endx, endy

    line((i * width) / beatLength, 0, (i * width) / beatLength, height);

  }

​

//   horizontal lines 

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

    line(0, (i * height) / 3, width, (i * height) / 3);

  }

  noStroke();

​

//   beat markers

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

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

      // ellipse(

      //   (i * width) / beatLength + (0.5 * width) / beatLength, height / 6, 10);

      image(hhPic,(30 +i * width) / beatLength , height / 38 + 2, 16,16);

    }

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

      // ellipse(

      //   (i * width) / beatLength + (0.5 * width) / beatLength, height / 2, 10);

      image(clapPic,(30 +i * width) / beatLength , height / 3 + 2, 16,16);

    }

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

      // ellipse( (i * width) / beatLength + (0.5 * width) / beatLength, (height * 5)/6, 10);

      image(bassPic,(20 +i * width) / beatLength , (height * 5)/6 - 8.5,17,17 )

    }

  }

}

​

////////////////////////////////

​

// function draw() {

//   background(220);

//   textAlign(CENTER);

//   text("work in progress", width / 2, 185);

//   text("play the sound in the editor to hear progress", 200, 200);

//   text("disclaimer: sound not pleasant", 200, 215);

// }