let output;

let counter = 0;

​

let proximity = 40;

let row1 = [];

let row2 = [];

​

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

  //get your output by name or by ID, may be different for you

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

  console.log(output);

});

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

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

    row1[i] = new Trigger((i * proximity) +proximity + i*5, 160, proximity, false, 60 + i, 1);

  }

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

    row2[i] = new Trigger((i * proximity) +proximity + i*5, 260, proximity, false, 24 + i, 2);

  }

}

​

function draw() {

  background(120);

​

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

    row1[i].showTarg();

    row1[i].checkTriggerAndSend(mouseX, mouseY);

  }

​

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

    row2[i].showTarg();

    row2[i].checkTriggerAndSend(mouseX, mouseY);

  }

}

​

function mousePressed() {

  //output.playNote("C3");

  console.log(counter);

  if (counter == 1) {

    //output.sendControlChange(20, 127, 1);

  } else {

    // output.sendControlChange(22, 127, 1);

  }

  counter++;

  counter %= 2;

}

​

function mouseReleased() {

  //output.stopNote("C3");

  // output.sendControlChange(20, 0 , 1);

}

​

​

class Trigger {

  constructor(x, y, sz, isOn, midiNote, midiChannel) {

    // for drawing

    this.x = x;

    this.y = y;

    this.size = sz;

    // should it trigger?

    this.isOn = isOn;

    this.count = 0;

    this.midiNote = midiNote;

    this.midiChannel = midiChannel;

    this.okToSend = false;

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

  }

​

  showTarg() {

    fill(this.color);

    stroke(0, 255, 0);

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

  }

​

  checkTriggerAndSend(targetX, targetY) {

    let ds = dist(this.x, this.y, targetX, targetY);

​

    if (ds <= proximity/2 && !this.isOn && mouseIsPressed) {

      this.okToSend = !this.okToSend;

      if (this.okToSend) {

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

        output.playNote(this.midiNote, this.midiChannel);

      }else{

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

        output.stopNote(this.midiNote, this.midiChannel);

      }

      console.log("Sending ON: " + this.midiNote + "," + this.midiChannel);

      this.isOn = true;

    }

​

    if (ds > proximity && this.isOn) {

      this.isOn = false;

      console.log("Sending OFF: " + this.midiNote + "," + this.midiChannel);

    }

  }

}