{

      "A1" : "tarai.mp3"

    }

);

player.toMaster();

​

let highlightedKey = [];

let beat = 0;

let nSteps = 8;

let showBubble= [];

let bubbleRise = 0;

let playButton;

let stopButton;

let bars=[];

let noteList= ["C1", "D1", "E2", "F2", "G2", "A2", "B2", "C3"];

let notePos = 0;

​

​

function onBeat(time){

  // console.log("playing");

  player.triggerAttackRelease(noteList[notePos], 1);

  notePos++;

  if (notePos==7){

    notePos=0;

  }

  let lastBeat = (beat - 1) %nSteps;

  showBubble[lastBeat] = false;

//   currentStep = beat % nSteps;

//   if(highlightedKey[currentStep]){

//       let scale = ["C1", "D1", "E2", "F2", "G2", "A2", "B2", "C3"];

//       player.triggerAttackRelease(scale[currentStep], 1);

//     // set where bubble should be

//           showBubble[currentStep] = true;

//     bubbleRise = 0;

​

//   }

  // beat++; 

​

}

​

function keyPressed(){

  let pos = parseInt(key) - 1;

  let scale = ["C1", "D1", "E2", "F2", "G2", "A2", "B2", "C3"];

  console.log(key, pos, scale[pos]);

  player.triggerAttackRelease(scale[pos], 1);

}

​

function setup(){

  highlightedKey = [false, false, false, false, false, false, false, false];

  showBubble = [false, false, false, false, false, false, false, false];

  createCanvas(600, 400)

  loop1 = new Tone.Loop(onBeat, "4n");

  // testBar = new barNote(20, 170, 150, height);

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

    bars[i]= new barNote((width/8)*i, 10, 150, 200);

  }

  // Tone.Transport.start();

  playButton = createButton('play');

  playButton.position(540, 10);

  playButton.mouseClicked(togglePlay);

  playButton = createButton('stop');

  playButton.position(540, 30);

  playButton.mouseClicked(stopTransport);

}

​

function drawBars(){

  // testBar.draw();

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

    bars[i].draw();

  }

}

​

function convertHeight(barHeight){

  // let note = map(barHeight, 0, height, 30, 72);

  // note = Math.floor(note);

  let note="";  

  if (0<barHeight && barHeight<71){

    note ="C1";

    console.log("C1");

  }

  if (71<barHeight && barHeight<131){

    note ="D1";

  }

  // console.log(note);

  return note;

}

​

function draw(){

background(255, 204, 229);

noStroke();

drawBars();

  // add style logic for all rects

//   push();

// if (highlightedKey[0] == true) {

//   fill(245, 153, 229);

// }

// rect(8, 170, 73, 330, 10);

//   pop();

//   push();

// if (highlightedKey[0] == true) {

//     fill(245, 201, 238);

// }

// rect(81, 230, 73, 330, 10);

//   pop();

​

//   push();

// if (highlightedKey[0] == true) {

//   fill(225, 167, 215 );

// }

// rect(154, 130, 73, 330, 10);

//   pop();

//   push();

// if (highlightedKey[0] == true){

​

// fill(220, 139, 206 );

// }

// rect(227, 180, 73, 330, 10);

//   pop();

//   push();

// if (highlightedKey[0] == true){

//   fill(200, 101, 184 );

// }

// rect(300, 200, 73, 330, 10);

//   pop();

//   push();

// if (highlightedKey[0] == true){

//   fill(229, 173, 219 );

// }  

// rect(373, 220, 73, 330, 10);

//   pop();

//   push();

//   if (highlightedKey[0] == true){

//   fill(244, 154, 229 );

// }

// rect(446, 300, 73, 330, 10);

//   pop();

//   push();

//   if (highlightedKey[0] == true){

//   fill(245, 211, 239 );

// }

// rect(519, 260, 73, 330, 10);

//   pop();

​

  // add bubble logic for all rects

  if(showBubble[0] == true) {

    ellipse(44, 170 - bubbleRise, 20)

    bubbleRise++;

  }

}

​

function mousePressed() {

  // testBar.checkMousePosition();

  for(i=0; i<bars.length; i++){

    bars[i].checkMousePosition();

    // console.log(bars[i].height)

    noteList[i]=convertHeight(bars[i].height);

  }

  // checkMousePosition(8, 170, 73, 330, 0);

  // checkMousePosition(81, 230, 73, 330, 1);

  // checkMousePosition(154, 130, 73, 330, 2);

  // checkMousePosition(227, 180, 73, 330, 3);

  // checkMousePosition(300, 200, 73, 330, 4);

  // checkMousePosition(373, 220, 73, 330, 5);

  // checkMousePosition(446, 300, 73, 330, 6);

  // checkMousePosition(519, 260, 73, 330, 7);

  // add for all rects (keys)

​

}

​

​

​

// function togglePlay(){

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

//      Tone.Transport.stop();

//     playButton.html('play');

//   }

//   else{

//     if(onBeat.loaded == true){

//          console.log("started");

​

//      Tone.Transport.start();

//         loop1.start();

//      playButton.html('stop');

//     }

//   }

function togglePlay(){

        console.log("started");

        Tone.Transport.start();

        loop1.start();

      }

​

function stopTransport(){

  console.log("stoped");

  Tone.Transport.stop();

  }

​

​