Create colored circle based on midi note

p5.js Libraries
5

Ok so, there’s this code below, which isn’t exactly “hearing” the midi notes, but theoretically I could just manually input all the notes as numerical values, with middle C = 60, etc. It’s just very time consuming. I tried to add a circle, but I only got as far as placing a single one in the corner that won’t change color or position depending on the note, (which is what I want).

Underneath this there’s another code I found that uses something called WebMIDI.js to hear the midi input. This is closer to what I would like, but again I don’t know how to also have a shape “read” the notes and change accordingly…

let midiNotes = [60, 61, 62, 63];
let noteIndex = 0;
let midiVal, freq;

function setup() {
  let cnv = createCanvas(100, 100);
  cnv.mousePressed(startSound);
  osc = new p5.TriOsc();
  env = new p5.Envelope();
}

function draw() {
  background(255);
  text('tap to play', 10, 20);
  if (midiVal) {
    text('MIDI: ' + midiVal, 10, 40);
    text('Freq: ' + freq, 10, 60);
    circle(20,20,20);
  }
}

function startSound() {
  // see also: userStartAudio();
  osc.start();

  midiVal = midiNotes[noteIndex % midiNotes.length];
  freq = midiToFreq(midiVal);
  osc.freq(freq);
  env.ramp(osc, 0, 1.0, 0);

  noteIndex++;
}
............................................................
/*
Play midi notes using WebMIDI.js
*/

let midiVal, midiVelocity, freq, osc, env;

WebMidi.enable(function (err) {
  
    //check if WebMidi.js is enabled
    if (err) {
        console.log("WebMidi could not be enabled.", err);
    } else {
        console.log("WebMidi enabled!");
    }

    // name our visible MIDI input and output ports
    console.log("Inputs Ports: ");
    for (i = 0; i < WebMidi.inputs.length; i++) {
        console.log(i + ": " + WebMidi.inputs[i].name);
    }

    // choose an input port (0 means use the first device we see)
    inputSoftware = WebMidi.inputs[0];
    
    // listen to all incoming "note on" input events
    inputSoftware.addListener('noteon', "all",
        function (e) {
            // Play the note recieved
            startSound(e.note.number, e.velocity);
        }
    );

    // listen for noteoff events (not used) 
    inputSoftware.addListener('noteoff', "all", function (e) {} );
});

function setup() {
    let cnv = createCanvas(640, 480);
    osc = new p5.TriOsc();
    env = new p5.Envelope();
}

function draw() {
    background(220);
    text('Note info;', 10, 20);
    if (midiVal) {
        text('MIDI: ' + midiVal, 10, 40);
        text('Freq: ' + freq, 10, 60);
      
        circle((midiVal * 5) ,(midiVelocity * 3.8), 20);
    }
}

function startSound(noteVal, velocityVal) {
    osc.start();
    midiVal = noteVal;
    midiVelocity = velocityVal;
    freq = midiToFreq(noteVal);
    env.setADSR(0.001, velocityVal);
    osc.freq(freq);
    env.ramp(osc, 0, 1.0, 0);
}