var bpm = 80;

let synth = new Tone.Synth().toMaster();

var numberOfBars = 2;

var beatsPerBar = 5;

var splitBeatsInto = 2;

var nSteps = numberOfBars * beatsPerBar * splitBeatsInto;

var beats = 0;

​

var numberOfOctaves = 5;

var nTracks = 5 * numberOfOctaves;

var baseOctave = 1;

var currentStep = 0;

var cells = [];

​

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

​

​

let major = [0, 2, 4, 5, 7, 9, 11, 12];

let minor = [0, 2, 3, 5, 7, 9, 11, 12]; // +11

let lydian = [0, 2, 4, 6, 7, 9, 11, 12]; // +7

  // let minor = 11 // +11

  // let lydian = 7 // +7

​

  let value = 0;

  let root = 69; //26

  //let octave = 3 *24;

  // let midiNote = value + major[ran]; //octave *12;

  // let noteObject = Tone.Frequency(midiNote, "midi");

  // synth.triggerAttackRelease(noteObject, 0.1);

​

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

​

var t = 30;

var l = 25;

var gridWidth, gridHeight, cellWidth, cellHeight;

var lines;

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

​

var noteName

var sliderOct

​

​

function setup() {

  slider = createSlider(20, 240, 20, 20);

  slider.position(70, 547);

  slider.value(Tone.Transport.bpm.value);

  slider.input(updateBPM);

  // sliderOct = createSlider(20, 40, 2, 2);

  // sliderOct.position(70, 300);

  // sliderOct.value(numberOfBars);

  // sliderOct.input(updateBars);

  createCanvas(800, 600);

  gridWidth = width - 2*l;

  gridHeight = height - 5*t;

  cellWidth = gridWidth / nSteps;

  cellHeight = gridHeight / nTracks;

​

  playButton = createButton('pause');

  playButton.position(20, 570);

  playButton.mouseClicked(togglePlay);

​

  Tone.Transport.start();

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

    cells[track] = [];

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

        cells[track][step] = 0;

    }

  }

}

​

​

​

function onBeat(time){

​

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

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

      var notePos = (nTracks - 1) - track; 

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

      noteName =  100 + major[notePos % 7] ;

      var pitch = noteName + octave *50;

      synth.triggerAttackRelease(pitch, 0.1);

      //player.triggerAttack(pitch, time);

    }

  }

  beats++;

  currentStep = beats % nSteps;

​

}

​

function draw(){

  let n = "" + noteName + "";

  background(255);

  textFont('futura');

  fill('black');

  text('BPM:', 27, 560);

 // text('Bars:', 26, 335);

  text('CLICK OR DRAG TO PLAY', 590, 20);

//   if (noteName == undefined ){

//   text(' ', 27, 50);  

//   }  else  {

//     textSize('50pt');

//     text(n, 27, 50);

//   }

  // 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);

        stroke(col);

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

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

      }

    }

  }

   ellipse(mouseX, mouseY, 10, 10);

  //stroke(lines);

  // Draw horizontal lines

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

    var y = t + i*cellHeight;

    right = width - l;

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

     // strokeWeight(2);

      noStroke();

    }

    else{

    //  strokeWeight(0.5);

      noStroke();

    }

    line(l, y, right, y);

  }

​

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

    var bar = floor(i / beatsPerBar);

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

​

      noStroke();

      fill(0, 10);

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

    }

​

  }

​

  if(beats > 0){

    var highlight = (beats - 1) % nSteps;

    fill(255, 255, 255, 100);

    stroke('black');

    line(l + highlight * cellWidth, t , l + highlight * cellWidth , gridHeight +20)

    noStroke();

  }

}

​

function mouseClicked(){

  noStroke();

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

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

​

    var x = mouseX - l;

    var y = mouseY - t;

​

    var i = floor(y / cellHeight);

    var j = floor(x / cellWidth);

​

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

  }

}

​

function mouseDragged() {

  mouseClicked();

}

​

​

function updateBPM(){

     Tone.Transport.bpm.rampTo(slider.value()); 

}

​

​

function togglePlay(){

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

    Tone.Transport.stop();

    playButton.html('Play');

  }

  else{

        Tone.Transport.start();

        playButton.html('Pause');

  }

}

​

​

function keyPressed() {

if (keyCode === 32) {  

    togglePlay();

  }

  return false;

}