​

// Try changing this number to change the tempo. BPM stands for Beats Per Minute. 

// 60 BPM means we play one beat every second (since there are 60 seconds in a minute)

var bpm = 80;

​

// Try changing these numbers to change the length and structure of your grid

var numberOfBars = 4;

var beatsPerBar = 4;

var splitBeatsInto = 2;

var nSteps = numberOfBars * beatsPerBar * splitBeatsInto;

var beats = 0;

​

// Try changing the number of octaves to get more or less notes to choose from

var numberOfOctaves = 4;

var nTracks = 7 * numberOfOctaves;

var baseOctave = 1;

var currentStep = 0;

var cells = [];

​

// Sound

var noteNames = ["C", "D", "E", "F", "G", "A", "B"];

var player = new Tone.Sampler(

    {

      "A1" : "samples/casio/A1.mp3",

      "C2" : "samples/casio/C2.mp3",

      "E2" : "samples/casio/E2.mp3",

      "G2" : "samples/casio/G2.mp3"

    }

);

player.toMaster();

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

Tone.Transport.bpm.value = bpm;

​

// Visuals

var t = 30;

var l = 25;

var gridWidth, gridHeight, cellWidth, cellHeight;

var blue;

var colors = ["#df365d", "#f2924d", "#ebd64e", "#97c348", "#4ab4a1", "#4f64d5", "#bd51a6"];

​

​

function setup() {

    // Visuals

  createCanvas(600, 300);

  gridWidth = width - 2*l;

  gridHeight = height - 2*t;

  cellWidth = gridWidth / nSteps;

  cellHeight = gridHeight / nTracks;

  blue =  color(178, 223, 247);

​

  // Sound

  Tone.Transport.start();

  // Sequencer

  // Initialize all sequencer cells.ON: 1. OFF: 0.

  for(var track = 0; track < nTracks; track++){

    cells[track] = [];

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

        cells[track][step] = 0;

    }

  }

}

​

function onBeat(time){

  // If the current beat is on, play it

  for(var track = 0; track < nTracks; track++){

    if(cells[track][currentStep] == 1){

      // The bottom track should have the lowest note

      var notePos = (nTracks - 1) - track; 

      var octave = baseOctave + floor(notePos / 7);

      var noteName = noteNames[notePos % 7];

      var pitch = noteName + octave;

      player.triggerAttack(pitch, time);

    }

  }

  beats++;

  currentStep = beats % nSteps;

}

​

function draw(){

  background(255);

  // Draw cells that are on

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

    for(var track = 0; track < nTracks; track++){

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

        var notePos = nTracks - 1 - track; 

        var col = colors[notePos % 7];

        fill(col);

        rect(l+ step*cellWidth, t + track*cellHeight, cellWidth, cellHeight);

      }

    }

  }

  stroke(blue);

  // Draw horizontal lines

  for(var i = 0; i <= nTracks; i++){

    var y = t + i*cellHeight;

    right = width - l;

    // If we are at the end of the octave, draw a thicker line. 

    if(i % 7 == 0 && 0 < i && i < nTracks){

      strokeWeight(2);

    }

    else{

      strokeWeight(0.5);

    }

    line(l, y, right, y);

  }

  // Draw vertical lines

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

    // If a step is on an odd bar, draw a shading rect

    var bar = floor(i / beatsPerBar);

    if( bar % 2 == 1 & i < nSteps){

      //shade

      noStroke();

      fill(0, 10);

      rect(l + i*cellWidth, t, cellWidth, gridHeight);

    }

    stroke(blue);

    // If a step is a beat, draw a thicker line. If it is a subdivision, draw a thinner line

    if(i % splitBeatsInto == 0){

      strokeWeight(1);

    }

    else{

      strokeWeight(0.5);

    }

    var x = i*cellWidth;

    line(l + x, t, l + x, t + gridHeight);

  }

  // Highlight current step

  if(beats > 0){

    var highlight = (beats - 1) % nSteps;

    fill(178, 223, 247, 50);

    noStroke();

    rect(l + highlight * cellWidth, t, cellWidth, gridHeight)

  }

}

​

function mousePressed(){

  // If the mouse is within the bounds of the canvas

  if( l < mouseX && mouseX < l + gridWidth &&

      t < mouseY && mouseY < t + gridHeight){

    // Account for margins

    var x = mouseX - l;

    var y = mouseY - t;

    // Determine which cell the mouse is on

    var i = floor(y / cellHeight);

    var j = floor(x / cellWidth);

    // Toggle cell on/off

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

  }

}