MIDI example

[TURBULENTE]

Hello! I've been trying to use the MIDI implementation but I can't understand completely how to use it, or the example is not running correctly. Is there any video-tutorial available ? Thanks so much!

[ffd8]

Hihi – you're right, besides the demo, there isn't too much info.. I actually just demonstrated it today in a workshop, so the key thing to do, is with the midi device plugged in, run the code and check the javascript console (CMD+OPT+J on a chromium based browser), then you'll see a listing of what midi devices are available for both [in] and [out], both with an ID and a NAME. (the instruction was vaguely written at the top of the demo: See Javascript Console after running setup for device IDs + Names

ie, when I was plugged in earlier with a little midi-keyboard controller, it showed up as:

in  [0] IAC Driver Bus 1
in [1] LPK25
out [0] IAC Driver Bus 1
out [1] LPK25

So at the top of the sketch, under /PREFS/, I could either set the in/out as:

By ID (quick to change to another ID if you have multiple plugged in.. but that number changes depending on order plugged in...

let midiDeviceIn = 1 // [ID] or "device name"
let midiDeviceOut = 1 // [ID] or "device name"

By NAME, which is more stable if always wanting to use the same controller regardless of others plugged in:

let midiDeviceIn = "LPK25" // [ID] or "device name"
let midiDeviceOut = "LPK25" // [ID] or "device name"

Then scrolling just past the draw() function, lines ~27 – 49, are the main ones to adjust, based on notes on/off, pitchBends, and especially controlChange:

function noteOn(note) {
    // use note.type, .channel, .name, .number, .octave, .velocity

    // map midi keyboard to bars across width
    let x = map(note.number, 0, 128, 0, width)
    let h = map(note.velocity, 0, 128, 0, height)
    push()
    noStroke()
    fill(note.velocity * 2)
    rectMode(CENTER)
    rect(x, height / 2, width / 128, h)
    pop()
}

function noteOff(note) {
    // use note.type, .channel, .name, .number, .octave, .velocity
    // print(note)
}

function pitchBend(pitch) {
    // use pitch.type, .channel, .value
    // print(pitch)
}

function controlChange(control) {
    // use control.type, .channel, .controllerNumber, .controllerName, .value
    // print(control)
}

[TURBULENTE]

Thanks so much! I made it work :) But I understood that somehow Hydra + MIDI don't like each other when using WEBGL. Do you have any idea why this could be happening? Thanks a lot!

[ffd8]

Upcoming release will have a more clear MIDI example. Is the Hydra + MIDI + WEBGL still an issue or did you get it working? I don't think i've tried combining those and hard to imagine while one would conflict with another unless it's global variable name issues?