convert themidibus library to processing.js

rhklein

Hi, i made a drawing sketch which uses the midibus library to controll the color of my brush. It maps the RGB values to the sliders of my "korg nanokontrol" midi controller.

I want to export the app to the web via procesing.js, but there is no processing.js support for the midibus library yet. Does anybody know a clever hack around that problem?

Here is the complete code:

        import themidibus.*;


        MidiBus myBus;
        int R = 0, G = 0, B = 0;
        float brushsize = 5;

        int savebuttonc = 220;
        boolean savebutton  =   false;

        void setup() {
          colorMode(HSB);
          myBus = new MidiBus(this, 0, 2);
          size(592, 464);
          background(180);
          fill(255);
          noStroke();
          rect(width/16, height/16, 300, 300);
        }

        void draw() {

          //menu background you cannot draw on + buttons
          pushMatrix();
          fill(80);
          noStroke();
          //background
          rect(0, 0, width/16, height);
          rect(0, 0, width, height/16);
          rect(0, height/16+300, width, 300);
          rect(width/16+300, 0, 300, height);
          popMatrix();

          //save button
          pushMatrix();
          fill(savebuttonc);
          rect(width-width/16, height/16, width/16-3, height/16-10);
          fill(150);
          text("SAVE", width-width/16+2, height/16+15);
          popMatrix();

          //size and color indicator of brush
          pushMatrix();
          fill(R, G, B);
          noStroke();
          ellipse(width-width/16*3, height-height/16*13, brushsize, brushsize);
          popMatrix();


          //actual drawing tool
          if (mousePressed == true && mouseButton == LEFT //&&mouseX > width/16 && mouseX < width/16+300 && mouseY > height/16 && mouseY < height/16+300
          ) {
            strokeWeight(brushsize);
            stroke(R, G, B);
            line(mouseX, mouseY, pmouseX, pmouseY);
          }
          if ( mouseButton == RIGHT) {

            loadPixels(); 
            color c = pixels[mouseY*width+mouseX];
            updatePixels(); 
            stroke(c);
          }

          //save option
          if (keyPressed == true && key == 's') {
            PImage partialSave = get(width/16, height/16, 300, 300);
            partialSave.save(day() + "-" + month() + "-" + year() + "_"+ hour() + "_" + minute() + "_" + second()+ "_" +".png");
          }

          //save button
          if ( mousePressed==true && mouseButton == LEFT && mouseX > width-width/16 && mouseX < width-3 && mouseY > height/16 && mouseY < height/16+height/16-10) {
            savebutton = true;
            PImage partialSave = get(width/16, height/16, 300, 300);
            partialSave.save(day() + "-" + month() + "-" + year() + "_"+ hour() + "_" + minute() + "_" + second()+ "_" +".png");
          }
          else {
            savebutton =false;
          }
          if (savebutton==true) {
            savebuttonc = 50;
          }
          else {
            savebuttonc = 220;
          }
          if ( mouseX > width-width/16 && mouseX < width-3 && mouseY > height/16 && mouseY < height/16+height/16-10) {
            savebutton = true;

          }
          else {
            savebutton =false;
          }
          if (savebutton==true) {
            savebuttonc = 100;
          }
          else {
            savebuttonc = 220;
          }

        }



        void controllerChange(int channel, int number, int value) {

          if (number==2) {
            R = value*2;
          }
          if (number==3) {
            G = value*2;
          }
          if (number==4) {
            B = value*2;
          }
          if (number==5) {
            brushsize=value*1;
          }
        }

PhiLho

1) I moved the topic, as it is more a question about (P)JS than about a library.

2) If some browsers can have some sound support in JS, I never heard of Midi support...