// incorporating elements of tone.js library

// Inspiration: https://editor.p5js.org/asd0999/sketches/r1od2atFQ

​

// setting global variables

let beat = 0;

let value = 0;

​

let cells = [];

​

let buttonColor = "#fbbbad";

let textColor = "#333f58";

let bpmTextColor = "#e2f3e4";

let canvasColor = "#ee8695";

let gridColor = "##e2f3e4";

​

// amount of steps or beats in one musical line

let nSteps = 8; // number of columns / loop (x-axis)

let currentStep = 0;

let nSamples = 4; // number of sounds / kit (y-axis)

​

// button for play/pause, slider for controlling BPM / speed

let playButton;

let slider;

​

// other settings

let a = 40; // cell height variable

let b = 25; // cell width variable

let gridWidth, gridHeight, cellWidth, cellHeight; // initializing values for grid

let colors = ["#fbbbad", "#4a7a96", "#333f58", "#292831"]; // array of colors

​

// sample kits/sounds

let beats; // kit 1

let trap; // kit 2

let mix; // kit 3

let chooseKit; // variable for choosing drum kit

let drumNames = ["kick", "snare", "hat", "other"];

let logo;

// associate different sounds with each kit

//Tone.Player is a way to load and play back an audio file

​

// three sets of beat sounds ----------------------------

beats = new Tone.Players({

  kick: "sounds/beats/kick1.wav",

  snare: "sounds/beats/snare1.wav",

  hat: "sounds/beats/hat1.wav",

  other: "sounds/beats/other1.wav",

});

​

// to be replaced with different kit sounds //

trap = new Tone.Players({

  kick: "sounds/trap/kick2.wav",

  snare: "sounds/trap/snare2.wav",

  hat: "sounds/trap/hat2.wav",

  other: "sounds/trap/other2.wav",

});

mix = new Tone.Players({

  kick: "sounds/mix/kick3.mp3",

  snare: "sounds/mix/snare3.mp3",

  hat: "sounds/mix/hat3.mp3",

  other: "sounds/mix/other3.mp3",

});

​

// ----------------------------

​

// toMaster function connects the output to the context's destination node

beats.toMaster();

trap.toMaster();

mix.toMaster();

​

// transport is a timekeeper function in tone.js

//8th means 8th notes

Tone.Transport.scheduleRepeat(onBeat, "8n");

​

​

​

// slider for bpm

function setup() {

  //logo2 = new Logo2(650, 500);

  slider = createSlider(0, 200, 100);

  slider.position(540, 420);

  slider.style("width", "200px");

​

  // drop down menu to select kit

  sel = createSelect();

  sel.position(90, 400);

  sel.size(100, 50);

  sel.style('background-color', buttonColor);

  sel.style("font-family", "Fredoka One");

  sel.style("font-size", "20px");

  sel.style("text-align", "center");

  sel.style("border-width", "0px") // get rid of border width

  sel.style("color", textColor)

  sel.style("border-radius", "20px")

  sel.selected("beats");

  sel.option("beats");

  sel.option("trap");

  sel.option("mix");

  sel.changed(mySelectEvent);

  chooseKit = sel.value();

​

  // initialize cell

  // OFF = 0, ON = 1

  for (let sample = 0; sample < nSamples; sample++) {

    cells[sample] = [];

    for (let step = 0; step < nSteps; step++) {

      cells[sample][step] = 0;

    }

  }

​

  // play button

  playButton = createButton("PLAY");

  playButton.position(280, 380);

  playButton.mouseClicked(togglePlay);

  playButton.style('background-color', buttonColor);

  playButton.size(200, 100);

  playButton.style("font-family", "Fredoka One");

  playButton.style("color", textColor)

  playButton.style("font-size", "48px");

  playButton.style("border-width", "0px") // get rid of border/stroke

  playButton.style("border-radius", "20px")

​

  // grid

  createCanvas(800, 700);

  gridWidth = width - 2 * b;

  gridHeight = height / 2 - 2 * a;

  cellWidth = gridWidth / nSteps;

  cellHeight = gridHeight / nSamples;

}

​

function onBeat(time) {

  let velocity = 0.5;

  currentStep = beat % nSteps;

  for (var sample = 0; sample < nSamples; sample++) {

    if (cells[sample][currentStep]) {

      let k, k2, k3;

      if (chooseKit == "beats") {

        k = beats.get(drumNames[sample]);

        k.start(time);

      } else if (chooseKit == "trap") {

        k2 = trap.get(drumNames[sample]);

        k2.start(time);

      } else if (chooseKit == "mix") {

        k3 = mix.get(drumNames[sample]);

        k3.start(time);

      }

    }

  }

  beat++;

}

​

function draw() {

  background(canvasColor);

  //logo.display();

  //logo2.display();

  //logo2.update();

​

​

  textSize(24);

  fill(bpmTextColor);

  noStroke();

  text('BPM', 610, 400);

  textFont('Fredoka One');

  // setting up the slider

  let bpmMax = slider.value();

​

  // use Tone.Transport...

  Tone.Transport.bpm.value = bpmMax;

  fill(value);

​

  // fill the cells in grid

  for (let step = 0; step < nSteps; step++) {

    for (let sample = 0; sample < nSamples; sample++) {

      if (cells[sample][step] == 1) {

        fill(colors[sample]);

        rect(

          b + step * cellWidth,

          a + sample * cellHeight,

          cellWidth,

          cellHeight

        );

      }

    }

  }

​

  // horizontal lines

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

    let y = a + i * cellHeight;

    right = width - b;

    strokeWeight(3);

    stroke(gridColor);

    line(b, y, right, y);

  }

​

  // vertical lines

  noStroke();

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

    right = width - b;

    strokeWeight(3);

    stroke(gridColor);

    line(b + i * cellWidth, a, b + i * cellWidth, a + gridHeight);

​

    // highlight the cell that is playing

    let step = (beat - 1) % nSteps;

    if (i == step && Tone.Transport.state == "started") {

      fill(0,40); // highlight column with a shade of black

      noStroke();

      rect(b + i * cellWidth, a, cellWidth, gridHeight);

    }

  }

}

​

​

function mousePressed() {

  // make sure the mouse is in the grid

  if (

    b < mouseX &&

    mouseX < b + gridWidth &&

    a < mouseY &&

    mouseY < a + gridHeight

  ) {

    // margins

    let x = mouseX - b;

    let y = mouseY - a;

​

    // which cell is clicked

    let i = floor(x / cellWidth);

    let j = floor(y / cellHeight);

​

    // cell on/off switch

    cells[j][i] = !cells[j][i];

  }

}

// PLAY / PAUSE button

function togglePlay() {

  if (Tone.Transport.state == "started") {

    Tone.Transport.stop();

    playButton.html("PLAY");

  } else {

    if (beats.loaded && trap.loaded) {

      Tone.Transport.start();

      playButton.html("PAUSE");

    }

  }

}

​

// select the kits mySelectEvent is a function in p5.js

function mySelectEvent() {

  if (sel.value() == "beats") {

    chooseKit = "beats";

  } else if (sel.value() == "trap") {

    chooseKit = "trap";

  } else if (sel.value() == "mix") {

    chooseKit = "mix";

  }

  // say which kit is selected and playing in console

  console.log("playing kit: " + chooseKit);

}

​