Struggling with Webmidi library

p5.js Libraries
1

Hi,
I’m trying to make the simplest implementation of the Webmidi library. I can get my midi controllers to communicate with my sketch, however I’m really struggling with the code structure.

So far I’ve been using:

Here is my code:



function setup() { 
  createCanvas(800, 800);
  background(222);
  strokeWeight(50);
  //midi block
	WebMidi.enable(function (err) {
  if (err) {
      console.log("WebMidi could not be enabled.", err);
  } else {
      console.log("WebMidi enabled!");
    } 
  inputSoftware = WebMidi.inputs[0];
	});
  //EOF midi block
} 

function draw() { 

  inputSoftware.addListener('controlchange', "all",function (e) {
    if(e.controller.number==16){
      var controller1=e.value ;
      console.log(controller1);
    } 

    
  });
}

I can see the value of the midi controller within the console.log but just trying to pass the midi controller values to a line() is challenging.

Ideally, I’m looking for a modular structure I can easily use with my existing sketches.

I was thinking maybe I could have this code in a function so I could easily integrate it within existing sketches. Which is leading me to the following code:

function setup() { 
  createCanvas(800, 800);
  background(222);
  strokeWeight(50);
  //midi block
	WebMidi.enable(function (err) {
  if (err) {
      console.log("WebMidi could not be enabled.", err);
  } else {
      console.log("WebMidi enabled!");
    } 
  inputSoftware = WebMidi.inputs[0];
	});
  //EOF midi block
} 

function draw() { 
 console.log(getMidiControllerValues());
}

function getMidiControllerValues(){
  inputSoftware.addListener('controlchange', "all",function (e) {
    if(e.controller.number==16){
      var controller1=e.value ;
      console.log(controller1);
    } 
    return
  }); 
}

This is returning me a lot of “undefined” from the console.log and also it’s very sluggish and erratic (I can’t find the link from myself turning the button and looking at corresponding values in the console.

I’m also trying to return the function value so I can adjust in real time my potentiometer to change y2 value from a line, it doesn’t work, meaning my line isn’t displayed at all. Here is my code

function setup() { 
  createCanvas(800, 800);
  background(222);
  
  //midi block
	WebMidi.enable(function (err) {
  if (err) {
      console.log("WebMidi could not be enabled.", err);
  } else {
      console.log("WebMidi enabled!");
    } 
  inputSoftware = WebMidi.inputs[0];
	});
  //EOF midi block
} 

function draw() { 
 controller1=getMidiControllerValues();
 strokeWeight(50);
 line(100,100,400,200+controller1);
}

function getMidiControllerValues(){
  inputSoftware.addListener('controlchange', "all",function (e) {
    if(e.controller.number==16){
      var controller1=e.value ;
      return controller1;
    } 
  }); 
}

I thought this would have been an easy undertaking but I’m really struggling and I would really appreciate your support if possible.

Thanks

2

There is a major problem with the way your code is structured that explains why it’s sluggish. In p5.js, whatever you put in the draw() function gets called on every frame. This means that your getMidiControllerValues() function is run on every frame which also means that you are adding a listener on every single frame… After a few seconds, you will already have added a few hundred listeners. After a few minutes, it will be in the thousands. This explains the sluggishness.

Instead, what you need to do is add the listener once in the setup() function. Here is a simple example of what I mean:

// The background color of the stage
let bgColor = "black";

function setup() {
  
  bgColor = color(0, 0, 0);
  
  createCanvas(400, 400);

  WebMidi.enable(function (err) {

    if (err) console.log("WebMidi could not be enabled.", err);
    
    // Visualize available inputs
    console.log(WebMidi.inputs);
    
    const input = WebMidi.getInputByName("PUT CONTROLLER NAME HERE!!");

    // Whenever a key is pressed on your controller, a random color is generated
    // and stored in bgColor.
    input.addListener("noteon", "all", e => {
      let r = random(128,255);
      let g = random(128,255);
      let b = random(128,255);
      bgColor = color(r, g, b);
    });
    
  });

} 

function draw() {
  // bgColor is used to paint the background color
  background(bgColor);
}

Hope this helps!