let note;

let buttons=[];

let dst = 50;

​

WebMidi.enable(function(err) {

  if (err) {

    console.log("WebMidi could not be enabled.", err);

  } else {

    console.log("WebMidi enabled!");

  }

});

​

WebMidi.enable(function(err) {

  console.log(WebMidi.inputs);

  console.log(WebMidi.outputs);

  output = WebMidi.getOutputByName("IAC Driver Bus 1");

  console.log(output);

});

​

function setup() {

  createCanvas(windowWidth, windowHeight);

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

    buttons[i] = new Trigger(i*50,height/4, dst-5, i+24, false, 1);

  }

}

​

function draw() {

  background(220);

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

     buttons[i].show();

     buttons[i].checkPressed();

   }

}

​

function mousePressed() {

  note = int(map(mouseX, 0, width, 0, 127));

  output.playNote(note, 1);

}

​

​

function mouseReleased() {

  output.stopNote(note, 1);

}

​

class Trigger {

  constructor(x, y, size, note, isOn, channel) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.note = note;

    this.isOn = isOn;

    this.channel = channel;

    this.c = color(255,0,0);

  }

  show() {

    // to draw the button

    stroke(0,0,255);

    fill(this.c);

    ellipse(this.x,this.y,this.size,this.size);

  }

  checkPressed(){

  let distance = (mouseX,mouseY,this.x,this.y);

    if(distance <= this.size/2 && !this.isOn &&  mouseIsPressed){

      // send a note out

      // update this.isOn

      output.playNote(this.note,this.channel);

      this.isOn=true;

      this.c = color(0,255,0);

    }

  }

  sendNote() {

  }

}