//drawing 

let w;

let h;

let colors= [];

​

function onStep(time) {

  console.log("step");

  // currentStep = ;

  for(let track = 0; track<7; track++){

    if(cells[track][currentStep]){

      instrument.triggerAttack(note, time);

    }

  }

}

​

function draw(){

  background(255);

  for(let track = 0; track < 7; track++){

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

      if(cells[track][step]){ 

        noStroke();

        fill(colors[track], 100,100);

        rect(step*w, track*h, w,h)

      }

    }

  }

}

​

function setup(){

  // Initialize sequencer cells. 1 = ON. 0 = OFF

  for(let track = 0; track < 7; track++){

    cells[track] = [];

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

      if(track == step){

        cells[track][step] = 1;  

      }

      else{

        cells[track][step] = 0;  

      }

    }

  }

  // console.log(cells);

  createCanvas(800, 200);

​

  colorMode(HSB);

  w = width/16;

  h = height/7;

  //initialize color for each track

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

    colors[i] = 70/7*i+280;

  }

}

​

function mousePressed(){

  //if mouse is over the canvas

  if(mouseX<width && mouseX> 0 && mouseY<height &&mouseY>0){

    // determine which cell the mouse is on

    let track = floor(mouseX/w); 

    let step = floor(mouseY/h); 

    // toggle this cell on/off

    cells[step][track] = !cells[step][track];

  }

}

​

​