var bgColor;

//color of a square

var squareColor;

//text to be displayed

var displayText;

​

//sound to be played

var synth;

​

function setup() {

  //400 by 400 pixel canvas

  createCanvas(400, 400);

​

  //starting background color

  bgColor = color(220, 220, 200);

​

  //starting square color

  squareColor = color(100);

​

  //starting text

  displayText = "Nothing received";

​

  //oscillator

  synth = new p5.PolySynth();

  sampleRate(44100);

​

  ////

  //Setting up MIDI

  ////

​

  WebMidi.enable(function (err) {

    //check if WebMidi.js is enabled

​

    if (err) {

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

    }

    //Choose an input port

    inputSoftware = WebMidi.inputs[0];

    //The 0 value is the first value in the arraya

    //Meaning that we are going to use the first MIDI input we see

    //This can be changed to a different number,

    //or given a string to select a specific port

​

    ///

    //listen to all incoming "note on" input events

    inputSoftware.addListener("noteon", "all", function (e) {

      //Show what we are receiving

      displayText =

        "Received 'noteon' message (" +

        e.note.name +

        e.note.octave +

        ") " +

        e.note.number +

        ".";

​

      //change the background color variable

      var randomR = random(0, 255);

      var randomG = random(0, 255);

      var randomB = random(0, 255);

      bgColor = color(randomR, randomB, randomG);

      synth.noteAttack(formatNote(e.note), 0.1);

    });

​

    //The note off functionality will need its own event listener

    //You don't need to pair every single note on with a note off

​

    inputSoftware.addListener("noteoff", "all", function (e) {

      displayText =

        "Received 'noteoff' message (" +

        e.note.name +

        e.note.octave +

        ") " +

        e.note.number +

        ".";

      //change the background color variable

      var randomR = random(0, 255);

      var randomG = random(0, 255);

      var randomB = random(0, 255);

      bgColor = color(randomR, randomB, randomG);

      synth.noteRelease(formatNote(e.note));

    });

    //

    //end of MIDI setup

    //

  });

}

​

function draw() {

  //Draw background with background color variable

  //Will change every time there is a note on

  background(bgColor);

​

  //Drawing a rectangle, with no outline,

  //Middle of the screen (width and height divided by two)

  //Changes

  fill(squareColor);

  noStroke();

  rect(100, 100, width / 2, height / 2);

​

  //Displaying text

  //Little bit under the box above

  //Changes the text when a number 64 MIDI note is on and off

  fill(0);

  textAlign(CENTER);

  textSize(20);

  text(displayText, width / 2, 350);

}

​

function formatNote(note){

  let name = note.name;

  let octave = note.octave;

  if (name=="A" || name=="B"){

    octave = str(int(octave)+1);

  }

  return name + note.accidental + octave;

}

​