A tribute to Flora Stacey

universal ASCII art self-portrait
Preview: domyślna kamera Preview: tylna kamera
Parameters
bg		background color in standard hexadecimal notation 0xRRGGBB
camera		disables/enables display of the camera image (the "camera" toggle)
color		disables/enables text coloring (the "color" toggle)
eq		disables/enables image equalization (the "eq" toggle)
gui		hides/shows the graphical user interface panel
invert		disables/enables color inversion mode (the "invert" toggle)
lang		sets the interface language (additional languages can be added)
mirror		mirorr the camera image
pointer		hides/shows the mouse cursor
poster		disables/enables image posterization (the "posterize" toggle)
txtcol		text color in standard hexadecimal notation 0xRRGGBB
Description
The art of creating images from letters, numbers, and symbols – known today as ASCII art – constitutes a digital legacy of typewriter art, whose origins date back to the late 19th century. The titular Flora Stacey, a British secretary, created a drawing of a butterfly on a typewriter in 1898, considered the first work of this kind. This miniature uses textual characters to create a self-portrait that forms in real-time, to the rhythm of communication between human and machine. “A tribute to Flora Stacey…” engages in a play with the idea of the self-portrait and visual language, exploring how poetry, text, and code can become forms of image.
“A tribute to Flora Stacey: universal ASCII art self-portrait.” The typewriter art and the ASCII/ANSI art.
ASCII art is a graphic design technique that uses computers for presentation and consists of pictures pieced together from the printable characters defined by the ASCII Standard. Most examples of ASCII art require a fixed-width font.
There is also a slightly more technically advanced ASCII art mutation called ANSI art. ANSI art is a computer art form that was widely used at one time on BBSes. It is similar to ASCII art, but constructed from a larger set of 256 letters, numbers, and symbols — all codes found in IBM code page 437, often referred to as extended ASCII and used in MS-DOS and Unix environments. ANSI art also contains special ANSI escape sequences that color text with the 16 foreground and 8 background colours offered by ANSI.SYS, an MS-DOS device driver loosely based upon the ANSI X3.64 standard for text terminals. Some ANSI artists take advantage of the cursor control sequences within ANSI X3.64 in order to create animations, commonly referred to as ANSImations — however, there are also examples of ASCII art using animation.
ASCII art technique is widely used by artists, hobbysts, hackers. Especially interesting example of use and creative development of the ASCII art are works created by the “ASCII Art Ensemble” group. The group, formed by Walter van der Cruijsen, Luka Frelih, Vuk Cosic, was founded in 1998. Members of the “ASCII Art Ensemble” created a software to “code” moving images into animated (sequential) ASCII art pieces. Most recognizable work by the group is “Deep ASCII” — an ASCII version of the famous pornographic film “Deep Throat” from 1972.
ASCII art is also a descendant of the concrete and visual poetry and so called “typewriter art”: a pre-computer technique of creating images from characters available in typewriters (the first known iconic piece of typewriter art — an image of a butterfly composed of brackets, dashes, slashes, and an asterisk, made by Flora Stacey, a British secretary, in 1898).
“A tribute to Flora Stacey: universal ASCII art self-portrait.” is a simple, interactive artwork based on the ASCII art technique in it’s animated (however not in the way ANSI art is animated) form. It is also a game with the very idea of self-portrait, text, poetry, visuality, and various ways of looking and observing present in the history of art.
Technical documentation
Parameters passed via URL

bg background color in standard hexadecimal notation 0xRRGGBB
camera 0 or 1; default 0; disables/enables displaying the camera image (the “camera” toggle)
color 0 or 1; default 0; disables/enables text coloring (the “color” toggle)
eq 0 or 1; default 0; disables/enables image equalization (the “eq” toggle)
famo user | environment (or env); default user; [facingMode] allows forcing the use of the front (user) or rear (environment) camera on devices equipped with dual cameras (most modern mobile devices)
fontname name of the font used
gui 0 or 1; default 1; hides/shows the graphical user interface panel
h vertical camera resolution
invert 0 or 1; default 0; disables/enables color inversion mode (the “invert” toggle)
lang en or pl; default en; sets the interface language (additional languages can be added)
midiinport disabled by default; MIDI port number for external control of Miniature (receiving messages)
midioutport disabled by default; MIDI port number for external control of Miniature (sending messages)
mirror 0 or 1; default 1; disables/enables image mirroring mode (the “mirror” toggle)
pointer 0 or 1; default 1; hides/shows the mouse cursor
poster 0 or 1; default 0; disables/enables image posterization (the “posterize” toggle)
txtcol text color in standard hexadecimal notation 0xRRGGBB
txtsize 0.0 … 1.0; sets the initial normalized font size (the “font size” slider)
w horizontal camera resolution
worker 0 or 1; default 0; allows blocking the browser’s built-in mechanisms that suspend the program when the window is not visible
ws address; disabled by default; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of Miniature and customization)
xws address; disabled by default; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of Miniature and customization)
Messages passed via WebSocket

Messages to which Miniature responds
bg r g b; background color in the form of three normalized components (RGB) (0.0 … 1.0)
camera 0 or 1; default 0; disables/enables displaying the camera image (the “camera” toggle)
color 0 or 1; default 0; disables/enables text coloring (the “color” toggle)
eq 0 or 1; default 0; disables/enables image equalization (the “eq” toggle)
invert 0 or 1; default 0; disables/enables color inversion mode (the “invert” toggle)
mirror 0 or 1; default 1; disables/enables image mirroring mode (the “mirror” toggle)
poster 0 or 1; default 0; disables/enables image posterization (the “posterize” toggle)
txtcol r g b; text color in the form of three normalized components (RGB) (0.0 … 1.0)
txtsize 0.0 … 1.0; sets the normalized font size (the “font size” slider)
Messages sent by Miniature
not applicable
MIDI

Messages to which Miniature responds
CC 000 on any channel sets the normalized font size (the “font size” slider)
CC 001 on any channel default 0; disables/enables color inversion mode (the “invert” toggle)
CC 002 on any channel default 0; disables/enables image equalization (the “eq” toggle)
CC 003 on any channel default 0; disables/enables displaying the camera image (the “camera” toggle)
CC 004 on any channel default 0; disables/enables text coloring (the “color” toggle)
CC 005 on any channel default 0; disables/enables image posterization (the “posterize” toggle)
CC 006 on any channel default 1; disables/enables image mirroring mode (the “mirror” toggle)
CC 007 on any channel red component of the text color
CC 008 on any channel green component of the text color
CC 009 on any channel blue component of the text color
CC 010 on any channel red component of the background color
CC 011 on any channel green component of the background color
CC 012 on any channel blue component of the background color
Messages sent by Miniature
not applicable
Communication with MaxMSP

Messages to which Miniature responds
not applicable
Messages sent by Miniature
not applicable
Source code
									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="A tribute to Flora Stacey">
  <meta name="keywords" content="Flora, Stacey, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A tribute to Flora Stacey, Pawel Janicki, 2012-25, https://paweljanicki.jp</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
  <script src="ws.js"></script>
  <script src="midi.js"></script>
  <script src="p5.asciiart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="gui.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>
								

									sketch.js
									let s=function(p){
  const MIRROR_NONE=0; const MIRROR_HORIZONTAL=1; const MIRROR_VERTICAL=2; const MIRROR_BOTH=3;
  let mirror=MIRROR_HORIZONTAL; let useWorker =false; let capture; let captureW=640; let captureH=480; let roi={x:0,y:0,w:320,h:240};
  let cameraFacingMode="default";
  let asciiArtContainer={
    asciiArt:null,asciiMatrix:null,gfxBuffer:null,
    normGlyphSize:0.5,fontname:"Helvetica",
    useColor:false,posterize:false,eqColArr:false,showCaptureDevice:false,
    forcedTextColor:{r:255,g:255,b:255,a:255,inverted:false}
  };
  let theme={bgColor:{r:0,g:0,b:0},pointer:true};
  let guiContainer={
    gui:null, isActive:true, lock:-1, lang:'en',
    handlers:{
      toInvColToggle:{id:-1,label:{en:'invert',pl:'odwróć'}},
      toEqColToggle:{id:-1,label:{en:'equalize',pl:'normalizuj'}},
      toShowCameraToggle:{id:-1,label:{en:'camera',pl:'kamera'}},
      toColorToggle:{id:-1,label:{en:'color',pl:'kolor'}},
      toPosterizeToggle:{id:-1,label:{en:'posterize',pl:'posteryzuj'}},
      toFontSizeSlider:{id:-1,label:{en:'font size',pl:'wielkość znaków'}}
    },
    getLabelByLang(_handler){
      let result='unhandled';
      switch(this.lang){
        case 'en': result=_handler.label.en; break;
        case 'pl': result=_handler.label.pl; break;
        default: console.log('[guiContainer, getLabelByLang] unhandled this.lang: '+this.lang);
      }
      return result;
    }
  };
  let webSocket={
    isActive:false,monitorInput:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let midi={
    isActive:false,
    processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1,
    //channels:{in:1,out:2},
    //ccInMap:{invert:0,circular:1,randomize:2,K:3,speed:4,deviation:5,vol:6},
    //ccOutMap:{invert:0,circular:1,randomize:2,K:3,speed:4,deviation:5,vol:6}
  };
  p.setup=function(){
    p.handleUrlParams();
    p.createCanvas(innerWidth,innerHeight); p.initCaptureDevice(captureW,captureH);
    p.initAsciiArtGenerator(); p.initGui(); guiContainer.gui.forceBroadcast();
    p.initWebSocket(); p.initMidi();
    if(useWorker){
      p.noLoop();
      let intervalWorker = new Worker('worker.js');
      intervalWorker.onmessage = function(_e){p.handleWorker();}
      console.log("[setup] Worker set as clock source.");
    }else{p.frameRate(60);}
  };
  p.initCaptureDevice=function(_w,_h){
    let b=p._initCaptureDevice(_w,_h);
    if((!b)&&(cameraFacingMode!=="default")){
      console.log("[p.initCaptureDevice] can't access capture device against current facing mode ("+cameraFacingMode+"), trying to access default mode instead...");
      cameraFacingMode="default"; p._initCaptureDevice(_w,_h);
    };
  }
  p._initCaptureDevice=function(_w,_h){
    let result=false;
    switch(cameraFacingMode){
      case "default":
        try{
          capture=p.createCapture(p.VIDEO);
          capture.size(_w,_h);
          capture.elt.setAttribute('playsinline', '');
          capture.hide();
          console.log('[_initCaptureDevice] capture ready: '+capture.width+' '+capture.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "user":
        try{
          capture=p.createCapture({audio:false,video:{facingMode:{exact:"user"}}});
          capture.size(_w,_h);
          capture.elt.setAttribute('playsinline', '');
          capture.hide();
          console.log('[_initCaptureDevice] capture ready: '+capture.width+' '+capture.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "environment":
        try{
          capture=p.createCapture({audio:false,video:{facingMode:{exact:"environment"}}});
          capture.size(_w,_h);
          capture.elt.setAttribute('playsinline', '');
          capture.hide();
          console.log('[initCaptureDevice] capture ready: '+capture.width+' '+capture.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      default: console.log("[_initCaptureDevice] unhandled cameraFacingMode: "+cameraFacingMode);
    }
    return result;
  };
  p.mobileLandscapeFullscreenWorkaround=function(){window.scroll(0, 0);};
  p.handleWorker=function(){p.redraw();};
  p.setBackground=function(_gfx,_r,_g,_b,_setDocumentBodyStyleBackground){_r=Math.floor(_r);_g=Math.floor(_g);_b=Math.floor(_b);_gfx.background(_r,_g,_b);if(_setDocumentBodyStyleBackground) document.body.style.background = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';};
  p.draw=function(){
    if((p.width!=innerWidth)||p.height!=innerHeight){
      p.resizeCanvas(innerWidth,innerHeight); p.calcCaptureRoi(capture,roi);
      p.setAsciiArtResolution(asciiArtContainer.gfxBuffer,asciiArtContainer.normGlyphSize,roi);
    }
    p.setBackground(p,theme.bgColor.r,theme.bgColor.g,theme.bgColor.b,true);
    p.transferCaptureToGfxBuffer();
    if(asciiArtContainer.posterize) asciiArtContainer.gfxBuffer.filter(p.POSTERIZE, 10);
    asciiArtContainer.asciiMatrix = asciiArtContainer.asciiArt.convert(asciiArtContainer.gfxBuffer,asciiArtContainer.gfxBuffer.width,asciiArtContainer.gfxBuffer.height,asciiArtContainer.useColor);
    if(guiContainer.gui.items[guiContainer.handlers.toShowCameraToggle.id].getValue()) p.drawCaptureRoi();
    p.textAlign(p.CENTER,p.CENTER); p.textFont(asciiArtContainer.fontname);
    p.textSize(Math.floor(p.width/asciiArtContainer.gfxBuffer.width));
    p.blendMode(p.BLEND); p.smooth();
    asciiArtContainer.asciiArt.typeArray2d(
      asciiArtContainer.asciiMatrix,p,0,0,p.width,p.height,asciiArtContainer.useColor,
      asciiArtContainer.forcedTextColor.r,asciiArtContainer.forcedTextColor.g,asciiArtContainer.forcedTextColor.b,asciiArtContainer.forcedTextColor.a,
      asciiArtContainer.forcedTextColor.inverted
    );
    guiContainer.gui.draw();
  };
  p.transferCaptureToGfxBuffer=function(){
    capture.loadPixels();
    switch(mirror){
      case MIRROR_NONE:
        asciiArtContainer.gfxBuffer.image(
          capture,
          0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
          roi.x, roi.y, roi.w, roi.h
        );
      break;
      case MIRROR_HORIZONTAL:
        asciiArtContainer.gfxBuffer.push();
          asciiArtContainer.gfxBuffer.scale(-1, 1);
          asciiArtContainer.gfxBuffer.translate(-asciiArtContainer.gfxBuffer.width,0);
          asciiArtContainer.gfxBuffer.image(
            capture,
            0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
            roi.x, roi.y, roi.w, roi.h
          );
        asciiArtContainer.gfxBuffer.pop();
      break;
      case MIRROR_VERTICAL:
        asciiArtContainer.gfxBuffer.push();
          asciiArtContainer.gfxBuffer.scale(1, -1);
          asciiArtContainer.gfxBuffer.translate(0,-asciiArtContainer.gfxBuffer.height);
          asciiArtContainer.gfxBuffer.image(
            capture,
            0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
            roi.x, roi.y, roi.w, roi.h
          );
        asciiArtContainer.gfxBuffer.pop();
      break;
      case MIRROR_BOTH:
        asciiArtContainer.gfxBuffer.push();
          asciiArtContainer.gfxBuffer.scale(-1, -1);
          asciiArtContainer.gfxBuffer.translate(-asciiArtContainer.gfxBuffer.width,-asciiArtContainer.gfxBuffer.height);
          asciiArtContainer.gfxBuffer.image(
            capture,
            0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
            roi.x, roi.y, roi.w, roi.h
          );
        asciiArtContainer.gfxBuffer.pop();
      break;
      default: console.log("[transferCaptureToGfxBuffer] unhandled mirror: "+mirror);
    }
  }
  p.drawCaptureRoi=function(){
    let fx=p.width/roi.w; let fy=p.height/roi.h;
    switch(mirror){
      case MIRROR_NONE: p.image(capture,-fx*roi.x,-fy*roi.y,fx*capture.width,fy*capture.height); break;
      case MIRROR_HORIZONTAL:
        p.push();
          p.scale(-1,1); p.translate(-fx*capture.width,0);
          p.image(capture,fx*roi.x,-fy*roi.y,fx*capture.width,fy*capture.height);
        p.pop();
      break;
      case MIRROR_VERTICAL:
        p.push();
          p.scale(1,-1); p.translate(0,-fy*capture.height);
          p.image(capture,-fx*roi.x,fy*roi.y,fx*capture.width,fy*capture.height);
        p.pop();
      break;
      case MIRROR_BOTH:
        p.push();
          p.scale(-1,-1); p.translate(-fx*capture.width,-fy*capture.height);
          p.image(capture,fx*roi.x,fy*roi.y,fx*capture.width,fy*capture.height);
        p.pop();
      break;
      default: console.log("[drawCaptureRoi] unhandled mirror: "+mirror);
    }
  };
  p.touchStarted=function(_event){guiContainer.lock=guiContainer.gui.lockPointer(p.mouseX,p.mouseY);return false;};
  p.touchMoved=function(_event){guiContainer.gui.dragPointer(p.mouseX,p.mouseY);return false;};
  p.touchEnded=function(_event){guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);p.handleUniversalClickEvent(); return false;};
  p.doubleClicked=function(){return false;};
  p.mouseClicked=function(){p.handleUniversalClickEvent();return false;};
  p.mouseDragged=function(){guiContainer.gui.dragPointer(p.mouseX,p.mouseY);return false;};
  p.mouseMoved=function(){guiContainer.gui.moveIdlePointer(p.mouseX,p.mouseY);return false;};
  p.mousePressed=function(){guiContainer.lock=guiContainer.gui.lockPointer(p.mouseX,p.mouseY);return false;};
  p.mouseReleased=function(){guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);return false;};
  p.mouseWheel=function(){return false;};
  p.typeArray2d=function(_arr2d, _dst, _x, _y, _w, _h){
    if(_arr2d===null){console.log('[AsciiArt, typeArray2d] _arr2d === null');return false;}
    if(_arr2d===undefined){console.log('[AsciiArt, typeArray2d] _arr2d === undefined');return false;}
    if(_dst.canvas===null){console.log('[AsciiArt, typeArray2d] _dst.canvas === null');return false;}
    if(_dst.canvas===undefined){console.log('[AsciiArt, typeArray2d] _dst.canvas === undefined');return false;}
    let temp_ctx2d = _dst.canvas.getContext('2d');
    if(temp_ctx2d===null){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is null');return false;}
    if(temp_ctx2d===undefined){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is undefined');return false;}
    let dist_hor=_w/_arr2d.length; let dist_ver=_h/_arr2d[0].length;
    let offset_x=_x+dist_hor*0.5; let offset_y=_y+dist_ver*0.5;
    for(let temp_y=0;temp_y<_arr2d[0].length;temp_y++)
      for(let temp_x=0;temp_x<_arr2d.length;temp_x++)
        temp_ctx2d.fillText(_arr2d[temp_x][temp_y],offset_x+temp_x*dist_hor,offset_y+temp_y*dist_ver);
    return true;
  };
  p.handleUniversalClickEvent=function(){
    if(guiContainer.isActive){
      if(guiContainer.lock<0){
        if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){
          guiContainer.gui.disableAllItems(); if(!theme.pointer) p.noCursor();
          guiContainer.gui.setBackgroundPanelVisibility(false);
          guiContainer.isActive=false;
        }
      }
    }else{
      guiContainer.gui.enableAllItems(); guiContainer.isActive=true; p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true);
    }
  }
  p.calcCaptureRoi=function(_capture,_roi){
    if(_capture        === null)      return false;
    if(_capture        === undefined) return false;
    if(_capture.width  === null)      return false;
    if(_capture.width  === undefined) return false;
    if(_capture.height === null)      return false;
    if(_capture.height === undefined) return false;
    let ratio_a=p.width/p.height; let ratio_b=_capture.width/_capture.height;
    if(ratio_a>ratio_b){
      _roi.w=_capture.width; _roi.h=Math.floor(_roi.w*p.height/p.width);
    }else{
      _roi.h=_capture.height; _roi.w=Math.floor(_roi.h*(p.width/p.height));
    }
    _roi.x=Math.floor((_capture.width-_roi.w)/2);
    _roi.y=Math.floor((_capture.height-_roi.h)/2);
    return true;
  };
  p.setAsciiArtResolution=function(_g, _normGlyphSize, _roi){
    //let temp_segmentSize=(5+_normGlyphSize*10);
    let temp_segmentSize=(5+_normGlyphSize*10)*(captureW/640.0);
    let temp_w=Math.floor(_roi.w/temp_segmentSize); let temp_h=Math.floor(_roi.h/temp_segmentSize);
    if((_g.width!==temp_w)||(_g.height!==temp_h)) asciiArtContainer.asciiArt.resizeGraphicsWorkaround(_g,temp_w,temp_h); //p.resizeGraphicsWorkaround(_g,temp_w,temp_h);
  };
  p.initAsciiArtGenerator=function(){
    asciiArtContainer.gfxBuffer=p.createGraphics(10,10); asciiArtContainer.gfxBuffer.pixelDensity(1); 
    asciiArtContainer.asciiArt = new AsciiArt(p,asciiArtContainer.fontname,Math.floor(48),p.NORMAL);
    asciiArtContainer.asciiArt.printWeightTable();
    p.calcCaptureRoi(capture,roi);
    p.setAsciiArtResolution(asciiArtContainer.gfxBuffer,Math.floor(asciiArtContainer.normGlyphSize),roi);
  };
  p.initMidi=function(){
    if(!midi.isActive) return;
    if(isNaN(midi.inputPortIndex)) midi.inputPortIndex=-1; midi.inputPortIndex=Math.floor(midi.inputPortIndex);
    if(isNaN(midi.outputPortIndex)) midi.outputPortIndex=-1; midi.outputPortIndex=Math.floor(midi.outputPortIndex);
    midi.processor.init(midi.inputPortIndex,midi.outputPortIndex);
    if((midi.inputPortIndex>=0)||(midi.outputPortIndex>=0)) midi.isActive=true; else midi.isActive=false;
    if(midi.inputPortIndex>=0) midi.processor.onCC=function(_midiEvent){p.handleIncomingMidiCCMessages(_midiEvent);}
  };
  p.handleIncomingMidiCCMessages=function(_midiEvent){
    switch(_midiEvent.controller.number){
      case 0: guiContainer.gui.items[guiContainer.handlers.toFontSizeSlider.id].setNormValue(_midiEvent.rawValue/127.0); break;
      case 1: guiContainer.gui.items[guiContainer.handlers.toInvColToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 2: guiContainer.gui.items[guiContainer.handlers.toEqColToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 3: guiContainer.gui.items[guiContainer.handlers.toShowCameraToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 4: guiContainer.gui.items[guiContainer.handlers.toColorToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 5: guiContainer.gui.items[guiContainer.handlers.toPosterizeToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 6: mirror=(_midiEvent.rawValue%4); break;
      case 7: asciiArtContainer.forcedTextColor.r=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 8: asciiArtContainer.forcedTextColor.g=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 9: asciiArtContainer.forcedTextColor.b=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 10: theme.bgColor.r=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 11: theme.bgColor.g=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 12: theme.bgColor.b=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      default: console.log("[p.handleIncomingMidiCCMessages] unhandled _midiEvent.controller.number: "+_midiEvent.controller.number);
    }
  };
  p.initWebSocket=function(){
    if(!webSocket.isActive) return;
    webSocket.processor.init(webSocket.address,function(_msg){
      if(_msg===null) return; if(_msg===undefined) return; if(_msg.data===null) return; if(_msg.data===undefined) return;
      if(webSocket.monitorInput) console.log("[p.initWebSocket/handler] monitor: "+_msg.data);
      let arr=_msg.data.split(" ");
      if(arr===null) return; if(arr===undefined) return;
      if(arr.length===2){
        switch(arr[0]){
          case "txtsize":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){
              if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
              guiContainer.gui.items[guiContainer.handlers.toFontSizeSlider.id].setNormValue(arr[1]);
            }
          break;
          case "invert": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toInvColToggle.id].setValue(arr[1]);
            }
          break;
          case "eq":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toEqColToggle.id].setValue(arr[1]);
            }
          break;
          case "camera":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toShowCameraToggle.id].setValue(arr[1]);
            }
          break;
          case "color":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toColorToggle.id].setValue(arr[1]);
            }
          break;
          case "poster":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toPosterizeToggle.id].setValue(arr[1]);
            }
          break;
          case "mirror":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){if((arr[1]>=0)&&(arr[1]<=3)) mirror=arr[1];}
          break;
          default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
        }
      }else{
        if(arr.length===4){
          switch(arr[0]){
            case "txtcol":
              arr[1]=parseFloat(arr[1]);arr[2]=parseFloat(arr[2]);arr[3]=parseFloat(arr[3]);
              if((!isNaN(arr[1]))&&(!isNaN(arr[2]))&&(!isNaN(arr[3]))){
                if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0; if(arr[2]<0.0) arr[2]=0.0; if(arr[2]>1.0) arr[2]=1.0; if(arr[3]<0.0) arr[3]=0.0; if(arr[3]>1.0) arr[3]=1.0;
                asciiArtContainer.forcedTextColor.r=Math.floor(arr[1]*255.0);
                asciiArtContainer.forcedTextColor.g=Math.floor(arr[2]*255.0);
                asciiArtContainer.forcedTextColor.b=Math.floor(arr[3]*255.0);
              }
            break;
            case "bg":
              arr[1]=parseFloat(arr[1]);arr[2]=parseFloat(arr[2]);arr[3]=parseFloat(arr[3]);
              if((!isNaN(arr[1]))&&(!isNaN(arr[2]))&&(!isNaN(arr[3]))){
                if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0; if(arr[2]<0.0) arr[2]=0.0; if(arr[2]>1.0) arr[2]=1.0; if(arr[3]<0.0) arr[3]=0.0; if(arr[3]>1.0) arr[3]=1.0;
                theme.bgColor.r=Math.floor(arr[1]*255.0);
                theme.bgColor.g=Math.floor(arr[2]*255.0);
                theme.bgColor.b=Math.floor(arr[3]*255.0);
              }
            break;
            default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
          }
        }
      }
    });
  };
  p.initGui=function(){
    guiContainer.gui = new GUI(p,true,400,200,false);
    guiContainer.gui.setBackgroundPanelRect(20,20,320,170,5);
    guiContainer.gui.backgroundPanel.color.r=0;
    guiContainer.gui.backgroundPanel.color.g=0;
    guiContainer.gui.backgroundPanel.color.b=0;
    guiContainer.gui.backgroundPanel.color.a=127;
    let gui_tgl_eqcolarr = new SimpleToggle(140,40,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.eqColArr,guiContainer.getLabelByLang(guiContainer.handlers.toEqColToggle));
    gui_tgl_eqcolarr.onChange=function(_id,_v){asciiArtContainer.asciiArt.equalizeColorArray=(_v>0);};
    guiContainer.handlers.toEqColToggle.id=guiContainer.gui.addItem(gui_tgl_eqcolarr);
    let gui_tgl_camera = new SimpleToggle(40,140,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.showCaptureDevice,guiContainer.getLabelByLang(guiContainer.handlers.toShowCameraToggle));
    gui_tgl_camera.onChange=function(_id,_v){/*kura.invert=_v;*/};
    guiContainer.handlers.toShowCameraToggle.id=guiContainer.gui.addItem(gui_tgl_camera);
    let gui_tgl_color = new SimpleToggle(140,140,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.useColor,guiContainer.getLabelByLang(guiContainer.handlers.toColorToggle));
    gui_tgl_color.onChange=function(_id,_v){asciiArtContainer.useColor=(_v>0);};
    guiContainer.handlers.toColorToggle.id=guiContainer.gui.addItem(gui_tgl_color);
    let gui_tgl_posterize = new SimpleToggle(40,40,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.posterize,guiContainer.getLabelByLang(guiContainer.handlers.toPosterizeToggle));
    gui_tgl_posterize.onChange=function(_id,_v){asciiArtContainer.posterize=(_v>0);};
    guiContainer.handlers.toPosterizeToggle.id=guiContainer.gui.addItem(gui_tgl_posterize);
    let gui_tgl_invert = new SimpleToggle(240,140,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.forcedTextColor.inverted,guiContainer.getLabelByLang(guiContainer.handlers.toInvColToggle));
    gui_tgl_invert.onChange=function(_id,_v){asciiArtContainer.forcedTextColor.inverted=(_v>0);};
    guiContainer.handlers.toInvColToggle.id=guiContainer.gui.addItem(gui_tgl_invert);
    let gui_sld_fontsize = new SimpleSlider(40,90,280,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,asciiArtContainer.normGlyphSize,guiContainer.getLabelByLang(guiContainer.handlers.toFontSizeSlider));
    gui_sld_fontsize.onChange=function(_id,_v){asciiArtContainer.normGlyphSize=_v+0.2;p.setAsciiArtResolution(asciiArtContainer.gfxBuffer,asciiArtContainer.normGlyphSize,roi);};
    guiContainer.handlers.toFontSizeSlider.id=guiContainer.gui.addItem(gui_sld_fontsize);
    if(guiContainer.isActive){
      guiContainer.gui.enableAllItems();
      guiContainer.gui.setBackgroundPanelVisibility(true);
      p.cursor();
    }else{
      guiContainer.gui.disableAllItems();
      guiContainer.gui.setBackgroundPanelVisibility(false);
    }
    //guiContainer.gui.forceBroadcast();
  };
  p.huskColorComponentsARGB=function(_argb){
    return{
      a:( (_argb >> 24) & 0xFF),
      r:( (_argb >> 16) & 0xFF),
      g:( (_argb >> 8) & 0xFF),
      b:( _argb & 0xFF)
    };
  };
  p.huskColorComponentsRGB=function(_rgb){
    return{
      r:( (_rgb >> 16) & 0xFF),
      g:( (_rgb >> 8) & 0xFF),
      b:( _rgb & 0xFF)
    };
  };
  p.handleUrlParams=function(){
    try{
      let urlparams = p.getURLParams();
      if(urlparams){
        if("gui" in urlparams){
          let v=parseInt(urlparams.gui); if(!isNaN(v)){guiContainer.isActive=(v>0);}
          console.log("[p.handleUrlParams] gui: "+guiContainer.isActive);
        }
        if("famo" in urlparams){
          cameraFacingMode=decodeURIComponent(urlparams.famo);
          cameraFacingMode=cameraFacingMode.toLowerCase();
          if(cameraFacingMode==="env") cameraFacingMode="environment";
          console.log("[p.handleUrlParams] camera facing mode: "+cameraFacingMode);}
        if("pointer" in urlparams){
          let v=parseInt(urlparams.pointer); if(!isNaN(v)){if(v>0) p.cursor(); else p.noCursor(); theme.pointer=(v>0);}
          console.log("[p.handleUrlParams] pointer: "+theme.pointer);
        }
        if("txtsize" in urlparams){let v=parseFloat(urlparams.txtsize);
          if(!isNaN(v)){if((v>=0.0)&&(v<=1.0)) asciiArtContainer.normGlyphSize=v;}
          console.log("[p.handleUrlParams] norm text size: "+asciiArtContainer.asciiArtContainer.normGlyphSize);
        }
        if("txtcol" in urlparams){
          let v=parseInt(urlparams.txtcol);
          if(!isNaN(v)){
            let col=p.huskColorComponentsRGB(v);
            asciiArtContainer.forcedTextColor.r=col.r;asciiArtContainer.forcedTextColor.g=col.g;asciiArtContainer.forcedTextColor.b=col.b;
          }
          console.log("[p.handleUrlParams] txt col: "+asciiArtContainer.forcedTextColor.r+" "+asciiArtContainer.forcedTextColor.g+" "+asciiArtContainer.forcedTextColor.b);
        }
        if("bg" in urlparams){
          let v=parseInt(urlparams.bg);
          if(!isNaN(v)){
            let col=p.huskColorComponentsRGB(v);
            theme.bgColor.r=col.r;theme.bgColor.g=col.g;theme.bgColor.b=col.b;
          }
          console.log("[p.handleUrlParams] bg: "+theme.bgColor.r+" "+theme.bgColor.g+" "+theme.bgColor.b);
        }
        if("camera" in urlparams){let v=parseInt(urlparams.camera); if(!isNaN(v)){asciiArtContainer.showCaptureDevice=(v>0);} console.log("[p.handleUrlParams] camera: "+asciiArtContainer.showCaptureDevice);}
        if("color" in urlparams){let v=parseInt(urlparams.color); if(!isNaN(v)){asciiArtContainer.useColor=(v>0);} console.log("[p.handleUrlParams] color: "+asciiArtContainer.useColor);}
        if("eq" in urlparams){let v=parseInt(urlparams.eq); if(!isNaN(v)){asciiArtContainer.forcedTextColor.eqColArr=(v>0);} console.log("[p.handleUrlParams] equalize: "+asciiArtContainer.forcedTextColor.eqColArr);}
        if("poster" in urlparams){let v=parseInt(urlparams.poster); if(!isNaN(v)){asciiArtContainer.forcedTextColor.posterize=(v>0);} console.log("[p.handleUrlParams] posterize: "+asciiArtContainer.forcedTextColor.posterize);}
        if("invert" in urlparams){let v=parseInt(urlparams.invert); if(!isNaN(v)){asciiArtContainer.forcedTextColor.inverted=(v>0);} console.log("[p.handleUrlParams] invert: "+asciiArtContainer.forcedTextColor.inverted);}
        if("mirror" in urlparams){let v=parseInt(urlparams.mirror); if(!isNaN(v)){if((v>=0)&&(v<4)) mirror=v;} console.log("[p.handleUrlParams] mirror: "+mirror);}
        if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0);} console.log("[p.handleUrlParams] worker: "+useWorker);}
        if("fontname" in urlparams){asciiArtContainer.fontname=decodeURIComponent(urlparams.fontname);console.log("[p.handleUrlParams] font name: "+asciiArtContainer.fontname);}
        if("lang" in urlparams){guiContainer.lang=decodeURIComponent(urlparams.lang);console.log("[p.handleUrlParams] lang: "+guiContainer.lang);}
        if("ws" in urlparams){webSocket.address="ws://"+decodeURIComponent(urlparams.ws)+"/"; webSocket.isActive=true; console.log("[p.handleUrlParams] (ws) webSocket.address: "+webSocket.address);}
        if("xws" in urlparams){webSocket.address=decodeURIComponent(urlparams.xws); webSocket.isActive=true; console.log("[p.handleUrlParams] (xws) webSocket.address: "+webSocket.address);}
        if("midiinport" in urlparams){let v=parseInt(urlparams.midiinport); if(!isNaN(v)){midi.inputPortIndex=v; console.log("[p.handleUrlParams] MIDI input port index: "+v);}}
        //if("midiinchn" in urlparams){if(!isNaN(urlparams.midiinchn)){midi.chnin=1+(Math.abs(Math.floor(urlparams.midiinchn)-1)%16);}} // 1 ... 16
        if("midioutport" in urlparams){let v=parseInt(urlparams.midioutport); if(!isNaN(v)){midi.outputPortIndex=v; console.log("[p.handleUrlParams] MIDI output port index: "+v);}}
        //if("midioutchn" in urlparams){if(!isNaN(urlparams.midioutchn)){midi.chnout=1+(Math.abs(Math.floor(urlparams.midioutchn)-1)%16);}} // 1 ... 16
        if("w" in urlparams){let v=parseInt(urlparams.w); if(!isNaN(v)){if(v>0) captureW=v; console.log("[p.handleUrlParams] captureW: "+v);}}
        if("h" in urlparams){let v=parseInt(urlparams.h); if(!isNaN(v)){if(v>0) captureH=v; console.log("[p.handleUrlParams] captureH: "+v);}}
      }
    }catch(_e){console.log("[p.handleUrlParams] _e: "+_e);}
  };
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

									worker.js
									var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
}

setInterval(timedCount, 1000.0/60.);
								

									p5.asciiart.js
									class AsciiArt{
  constructor(_p,_fontName,_fontSize,_textStyle){
    this.p=_p;this.fontName='monospace';this.fontSize=24;this.textStyle=this.p.NORMAL;
    this.graphics=this.p.createGraphics(10,10);
    this.range={min:32,max:126};this.weightTable=[];this.colorArray=null;
    this.automaticPixelsDataTransfer=true;
    this.invertBrightness=false;
    this.equalizeColorArray=false;
    if(arguments.length>1) this.fontName=_fontName;
    if(arguments.length>2){
      if(!isNaN(_fontSize)){
        _fontSize=Math.floor(Math.abs(_fontSize));
        if(_fontSize>5) this.fontSize=_fontSize;
      }
    }
    if(arguments.length>3) this.textStyle=_textStyle;
    this.createWeightTable();
  }
  resizeGraphicsWorkaround(_g,_w,_h){
    if(_g===null||_g===undefined){
      _g=this.p.createGraphics(_w,_h);_g.pixelDensity(1);
    }else{
      _g.width=_w;_g.height=_h;
      _g.elt.width=_w;_g.elt.height=_h;
      _g.elt.style.width=_w+'px';_g.elt.style.height=_h+'px';
      _g.pixelDensity(1);_g.loadPixels();
      _g.elt.setAttribute('style','display: none');
    }
    _g.updatePixels();_g.clear();_g.loadPixels();
    if(_w*_h!==_g.pixels.length/4)
      console.log(
        '[AsciiArt, resizeGraphicsWorkaround] _w * _h !== _g.pixels.length / 4:' +
        '\n_w = ' + _w + ' _h = ' + _h +
        '\n_g.width = ' + _g.width + ' _g.height = ' + _g.height +
        '\n_w * _h = ' + (_w * _h) +
        '\n_g.pixels.length / 4 = ' + (_g.pixels.length / 4)
      );
  }
  createArray2d(_w,_h){
    let temp_arr=[];
    for(let temp_x=0;temp_x<_w;temp_x++) {
      let temp_column=[];
      for(let temp_y=0;temp_y<_h;temp_y++) temp_column[temp_y]=0;
      temp_arr[temp_x]=temp_column;
    }
    return temp_arr;
  }
  typeArray2d(_arr2d,_dst,_x,_y,_w,_h,_useColor,_r,_g,_b,_a,_invertColor){ // _a is ignored
    if(_arr2d===null){console.log('[AsciiArt, typeArray2d] _arr2d === null');return;}
    if(_arr2d===undefined){console.log('[AsciiArt, typeArray2d] _arr2d === undefined');return;}
    if(_dst.canvas===null){console.log('[AsciiArt, typeArray2d] _dst.canvas === null');return;}
    if(_dst.canvas===undefined){console.log('[AsciiArt, typeArray2d] _dst.canvas === undefined');return;}
    let temp_ctx2d=_dst.canvas.getContext('2d');
    if(temp_ctx2d===null){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is null');return;}
    if(temp_ctx2d===undefined){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is undefined');return;}
    let dist_hor=_w/_arr2d.length; var dist_ver=_h/_arr2d[0].length;
    let offset_x=_x+dist_hor*0.5; let offset_y=_y+dist_ver*0.5;
    if(_invertColor)
      temp_ctx2d.fillStyle="rgb("+(255-_r)+","+(255-_g)+","+(255-_b)+")";
    else
      temp_ctx2d.fillStyle="rgb("+_r+","+_g+","+_b+")";
    for(let temp_y=0;temp_y<_arr2d[0].length;temp_y++){
      for(let temp_x=0;temp_x<_arr2d.length;temp_x++){
        if(_useColor){
          if(_invertColor)
            temp_ctx2d.fillStyle="rgb("+(255-this.colorArray[temp_x][temp_y].r)+","+(255-this.colorArray[temp_x][temp_y].g)+","+(255-this.colorArray[temp_x][temp_y].b)+")";
          else
            temp_ctx2d.fillStyle="rgb("+this.colorArray[temp_x][temp_y].r+","+this.colorArray[temp_x][temp_y].g+","+this.colorArray[temp_x][temp_y].b+")";
        }
        temp_ctx2d.fillText(_arr2d[temp_x][temp_y],offset_x+temp_x*dist_hor,offset_y+temp_y*dist_ver);
      }
    }
  }
  convert2dArrayToString(_arr2d){
    if(arguments.length!==1){console.log('[AsciiArt, convert2dArrayToString] bad number of arguments: '+arguments.length);return '';}
    if(_arr2d===null){console.log('[AsciiArt, convert2dArrayToString] _arr2d === null');return '';}
    if(_arr2d===undefined){console.log('[AsciiArt, convert2dArrayToString] _arr2d === undefined');return '';}
    let temp_result = ''; let n=_arr2d[0].length-1;
    for(let temp_y=0;temp_y<_arr2d[0].length;temp_y++){
      for(let temp_x=0;temp_x<_arr2d.length;temp_x++) temp_result+=_arr2d[temp_x][temp_y];
      if(temp_y<n) temp_result+='\n';
    }
    return temp_result;
  }
  printWeightTable(){for(let i=0;i<this.weightTable.length;i++)console.log('['+i+'] '+this.p.char(this.weightTable[i].code)+' '+this.weightTable[i].weight);}
  createWeightTable(){
    let temp_weightTable=[]; let temp_weight, temp_index;
    let temp_w=this.fontSize*5; let temp_h=this.fontSize*3;
    this.resizeGraphicsWorkaround(this.graphics,temp_w,temp_h);
    this.graphics.textFont(this.fontName);this.graphics.textSize(this.fontSize);
    this.graphics.textStyle(this.textStyle);this.graphics.textAlign(this.p.CENTER,this.p.CENTER);
    this.graphics.noStroke();this.graphics.fill(255);
    for(let i=this.range.min;i<=this.range.max;i++){
      this.graphics.background(0);
      this.graphics.text(this.p.char(i),temp_w*0.5,temp_h*0.5);
      this.graphics.loadPixels(); // not sure if we need it really
      temp_weight=0;
      for(let j=0;j<this.graphics.pixels.length;j+=4) temp_weight+=this.graphics.pixels[j]; // r
      temp_weightTable[i-this.range.min]={code:i,weight:temp_weight};
    }
    this.weightTable.splice(0,this.weightTable.length);
    do{
      temp_index=-1; temp_weight=-1;
      for(let i=0;i<temp_weightTable.length;i++){
        if(temp_weightTable[i].weight>=0){
          if(temp_weight<0||temp_weightTable[i].weight<temp_weight){
            temp_weight=temp_weightTable[i].weight;
            temp_index=i;
          }
        }
      }
      if(temp_index>=0){
        this.weightTable[this.weightTable.length]={
          code: temp_weightTable[temp_index].code,
          weight: temp_weightTable[temp_index].weight
        };
        temp_weightTable[temp_index].weight=-1;
      }
    }while(temp_index>=0)
  }
  createColorArray(_equalize){
    let temp_anchor;
    if(this.colorArray===null) this.colorArray = this.createArray2d(this.graphics.width,this.graphics.height);
    if((this.colorArray.length!==this.graphics.width)||(this.colorArray[0].length!==this.graphics.height)){
      this.colorArray=null; this.colorArray = this.createArray2d(this.graphics.width,this.graphics.height);
    }
    let tempMaxLuma=-1; let tempMaxX=0; let tempMaxY=0;
    for(let temp_y=0;temp_y<this.graphics.height;temp_y++){
      for(let temp_x=0;temp_x<this.graphics.width;temp_x++){
        temp_anchor=(temp_y*this.graphics.width+temp_x)*4;
        this.colorArray[temp_x][temp_y]={
          r:this.graphics.pixels[temp_anchor],
          g:this.graphics.pixels[temp_anchor+1],
          b:this.graphics.pixels[temp_anchor+2],
          a:255,
          l:(this.graphics.pixels[temp_anchor]+this.graphics.pixels[temp_anchor+1]+this.graphics.pixels[temp_anchor+2])*0.3333333
        };
        if(this.colorArray[temp_x][temp_y].l>tempMaxLuma){tempMaxLuma=this.colorArray[temp_x][temp_y].l; tempMaxX=temp_x; tempMaxY=temp_y;}
      }
    }
    if((tempMaxLuma>-1)&&_equalize){
      let f=255.0/tempMaxLuma;
      for(let temp_y=0;temp_y<this.graphics.height;temp_y++){
        for(let temp_x=0;temp_x<this.graphics.width;temp_x++){
          this.colorArray[temp_x][temp_y].r=Math.sqrt((this.colorArray[temp_x][temp_y].r*f)/255.0)*255;
          this.colorArray[temp_x][temp_y].g=Math.sqrt((this.colorArray[temp_x][temp_y].g*f)/255.0)*255;
          this.colorArray[temp_x][temp_y].b=Math.sqrt((this.colorArray[temp_x][temp_y].b*f)/255.0)*255;
          this.colorArray[temp_x][temp_y].l=Math.sqrt((this.colorArray[temp_x][temp_y].l*f)/255.0)*255;
        }
      }
    }
  }
  convert(_image,_w,_h,_createColorArray){return this.convert1(_image,_w,_h,_createColorArray);}
  convert1(_image,_w,_h,_createColorArray){
    _w=Math.floor(Math.abs(_w)); _h=Math.floor(Math.abs(_h)); if(_w<1) _w=1; if(_h<1) _h=1;
    if((this.graphics.width!==_w)||(this.graphics.height!==_h)) this.resizeGraphicsWorkaround(this.graphics,_w,_h);
    this.graphics.background(0); // ???
    this.graphics.image(_image,0,0,this.graphics.width,this.graphics.height);
    if(_createColorArray) this.createColorArray(this.equalizeColorArray);
    return this.convert2();
  }
  convert2(){
    if(this.automaticPixelsDataTransfer) this.graphics.loadPixels();
    let temp_result=this.createArray2d(this.graphics.width,this.graphics.height);
    let temp_maxWeight=3*255; // max r + max g + max b (ignore alpha)
    let temp_range = this.weightTable.length-1; let temp_weight, temp_anchor;
    for(let temp_y=0;temp_y<this.graphics.height;temp_y++){
      for(let temp_x=0;temp_x<this.graphics.width;temp_x++){
        temp_anchor=(temp_y*this.graphics.width+temp_x)*4;
        temp_weight=(this.graphics.pixels[temp_anchor]+this.graphics.pixels[temp_anchor+1]+this.graphics.pixels[temp_anchor+2])/temp_maxWeight;
        temp_weight=Math.floor(temp_weight*temp_range);
        if(this.invertBrightness) temp_weight=temp_range-temp_weight;
        temp_result[temp_x][temp_y] = this.p.char(this.weightTable[temp_weight].code);
      }  
    }
    if(this.automaticPixelsDataTransfer) this.graphics.updatePixels();
    return temp_result;
  }
}
								

									gui.js
									// a rudimentary GUI by Pawel Janicki, 2024-25, https://paweljanicki.jp

class GUI{
  static get GUI_ELEMENT_TYPE_SIMPLESLIDER(){return 1;}
  static get GUI_ELEMENT_TYPE_SIMPLETRIGGER(){return 2;}
  static get GUI_ELEMENT_TYPE_SIMPLETOGGLE(){return 3;}
  static get GUI_ELEMENT_TYPE_SIMPLEMIDINOTESSELECTOR(){return 4;}
  static get GUI_ELEMENT_TYPE_SIMPLECELLULARAUTOMATON1DSETUP(){return 5;}
  static get GUI_ELEMENT_TYPE_SIMPLELANGSELECTOR(){return 6;}
  static get GUI_ELEMENT_TYPE_SIMPLERADIO(){return 7;}
  static get ORIENTATION_VERTICAL(){return 1;}
  static get ORIENTATION_HORIZONTAL(){return 2;}
  constructor(_p,_usePg,_pgw,_pgh,_isParentSketchRenderer3D){
    this.p=_p; this.pg=null; this.usePg=false; this.isParentSketchinWebGlRenderingMode=false;
    this.fontName="Helvetica";this.fontSize=10;this.items=[];this.backlightedItemId=-1;
    this.mouseDragStatus={startX:-1,startY:-1,x:-1,y:-1,px:-1,py:-1,vx:0,vy:0,inProgress:false};
    this.usePg=_usePg;
    if(this.usePg){
      this.pg=this.p.createGraphics(_pgw,_pgh,this.p.P2D); //https://p5js.org/tutorials/layered-rendering-with-framebuffers/
      this.isParentSketchRenderer3D=_isParentSketchRenderer3D;
    }else{
      this.pg=this.p;
      this.isParentSketchRenderer3D=false;
    }
    this.backgroundPanel={
      isVisible:false,color:{r:128,g:128,b:128,a:186},rect:{x:20,y:20,w:300,h:200,r:5}
    };
  }
  draw(){
    if(this.usePg) this.pg.clear();
    if(this.backgroundPanel.isVisible){
      this.pg.noStroke(); this.pg.fill(this.backgroundPanel.color.r,this.backgroundPanel.color.g,this.backgroundPanel.color.b,this.backgroundPanel.color.a);
      if(this.usePg||(!this.isParentSketchRenderer3D)){
        this.pg.rect(
          this.backgroundPanel.rect.x,this.backgroundPanel.rect.y,
          this.backgroundPanel.rect.w,this.backgroundPanel.rect.h,
          this.backgroundPanel.rect.r,this.backgroundPanel.rect.r,this.backgroundPanel.rect.r,this.backgroundPanel.rect.r

        );
      }else{
        this.pg.rect(
          this.backgroundPanel.rect.x-this.p.width/2,
          this.backgroundPanel.rect.y-this.p.height/2,
          this.backgroundPanel.rect.w,backgroundPanel.rect.h,
          this.backgroundPanel.rect.r,this.backgroundPanel.rect.r,this.backgroundPanel.rect.r,this.backgroundPanel.rect.r
        );
      }
    }
    this.pg.textFont(this.fontName,this.fontSize); this.pg.textStyle(this.p.NORMAL);
    for(let i=0;i<this.items.length;i++) if(this.items[i].isEnabled) this.items[i].draw(this.fontName,this.fontSize);
    if(this.usePg){
      if(this.isParentSketchRenderer3D){
        this.p.image(this.pg,-this.p.width/2,-this.p.height/2);
      }else{
        this.p.image(this.pg,0,0);
      }
    }
  }
  forceBroadcast(){
    for(let i=0;i<this.items.length;i++){
      if(this.items[i] instanceof SimpleTrigger){/*nothing to do*/continue;}
      if(this.items[i] instanceof SimpleToggle){this.items[i].broadcast();continue;}
      if(this.items[i] instanceof SimpleSlider){this.items[i].broadcast();continue;}
      if(this.items[i] instanceof SimpleMidiNotesSelector){this.items[i].broadcast();continue;}
      if(this.items[i] instanceof SimpleLangSelector){this.items[i].broadcast();continue;}
      if(this.items[i] instanceof SimpleRadio){this.items[i].broadcast();continue;}
    }
  }
  setLangFromHandlers(_lang, _handlers){ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
    if(_lang===null) return; if(_lang===undefined) return; if(_lang.length<1) return;
    if(_handlers===null) return; if(_handlers===undefined) return;
    _lang=_lang.toLowerCase();
    for(const [key, value] of Object.entries(_handlers)){
      if(isNaN(value.id)) continue;
      if((value.id<0)||(value.id>=this.items.length)) continue;
      if("label" in value){
        if(_lang in value.label) this.items[value.id].setLabel(value.label[_lang]);
      }
    }
  }
  importValues(_values){
    for(let i=0;i<_values.length;i++){
      switch(_values[i][1]){
        case GUI_ELEMENT_TYPE_SIMPLEMIDINOTESSELECTOR: for(let j=2;j<_values[i].length;j++){let k=j-2; let v=_values[i][j]; this.items[_values[i][0]].setKeyAccessedByIndex(k,v);} break;
        case GUI_ELEMENT_TYPE_SIMPLECELLULARAUTOMATON1DSETUP: for(let j=2;j<_values[i].length;j++){let k=j-2; let v=_values[i][j]; this.items[_values[i][0]].setCaseStatusAccessedByIndex(k,v)} break;
        case GUI_ELEMENT_TYPE_SIMPLESLIDER: this.items[_values[i][0]].setValue(_values[i][2]); break;
        case GUI_ELEMENT_TYPE_SIMPLETOGGLE: this.items[_values[i][0]].setValue(_values[i][2]); break;
        case GUI_ELEMENT_TYPE_SIMPLERADIO: this.items[_values[i][0]].setValue(_values[i][2]); break;
        case GUI_ELEMENT_TYPE_SIMPLELANGSELECTOR: this.items[_values[i][0]].setValue(_values[i][2]); break;
        case GUI_ELEMENT_TYPE_SIMPLETRIGGER: /*nothing to do*/ break;
        default: console.log("[GUI, importValues] unhndled _values[i][0]: "+_values[i][0]);
      }
    }
  }
  exportValues(){
    let result=[];
    for(let i=0;i<this.items.length;i++){
      if(this.items[i] instanceof SimpleTrigger){
        result[result.length]=[i,GUI.GUI_ELEMENT_TYPE_SIMPLETRIGGER];
        continue;
      }
      if(this.items[i] instanceof SimpleToggle){
        result[result.length]=[i,this.bool2int(GUI.GUI_ELEMENT_TYPE_SIMPLETOGGLE,this.items[i].getValue())];
        continue;
      }
      if(this.items[i] instanceof SimpleLangSelector){
        result[result.length]=[i,this.bool2int(GUI.GUI_ELEMENT_TYPE_SIMPLELANGSELECTOR,this.items[i].getValue())];
        continue;
      }
      if(this.items[i] instanceof SimpleSlider){
        result[result.length]=[i,GUI.GUI_ELEMENT_TYPE_SIMPLESLIDER,this.items[i].getValue()];
        continue;
      }
      if(this.items[i] instanceof SimpleRadio){
        result[result.length]=[i,GUI.GUI_ELEMENT_TYPE_SIMPLERADIO,this.items[i].getValue()];
        continue;
      }
      if(this.items[i] instanceof SimpleMidiNotesSelector){
        let blob=[i,GUI.GUI_ELEMENT_TYPE_SIMPLEMIDINOTESSELECTOR];
        for(let j=0;j<this.items[i].numOfKeys;j++) blob[blob.length]=bool2int(this.items[i].keys[j].isPressed);
        result[result.length]=blob;
        continue;
      }
      if(this.items[i] instanceof SimpleCellularAutomaton1DSetup){
        let blob=[i,GUI.GUI_ELEMENT_TYPE_SIMPLECELLULARAUTOMATON1DSETUP];
        for(let j=0;j<this.items[i].cases.length;j++) blob[blob.length]=bool2int(this.items[i].cases[j].status);
        result[result.length]=blob;
        continue;
      }
    }
    return result;
  }
  bool2int(_b){if(_b) return 1; return 0;}
  addItem(_item){_item.p=this.p; _item.pg=this.pg; _item.id=this.items.length; this.items[_item.id]=_item; return _item.id;}
  enableAllItems(){for(let i=0;i<this.items.length;i++) this.enableItemAccessedById(i);}
  disableAllItems(){for(let i=0;i<this.items.length;i++) this.disableItemAccessedById(i);}
  enableItemAccessedById(_id){this.enableItem(this.items[_id]);}
  disableItemAccessedById(_id){this.disableItem(this.items[_id]);}
  isItemAccessedByIdEnabled(_id){this.isItemEnabled(this.items[_id]);}
  isItemEnabled(_item){return _item.isEnabled;}
  enableItem(_item){
    if(this.backlightedItemId>=0) this.items[this.backlightedItemId].isBacklighted=false;
    this.mouseDragStatus.inProgress=false; this.backlightedItemId=-1;
    _item.isEnabled=true;
  }
  disableItem(_item){
    if(this.backlightedItemId>=0) this.items[this.backlightedItemId].isBacklighted=false;
    this.mouseDragStatus.inProgress=false; this.backlightedItemId=-1;
    _item.isEnabled=false;
  }
  moveIdlePointer(_x,_y){    
    if(this.backlightedItemId>=0) this.items[this.backlightedItemId].isBacklighted=false;
    this.backlightedItemId=this.hitTestAllItems(_x,_y);
    if(this.backlightedItemId>=0) this.items[this.backlightedItemId].isBacklighted=true;
  }
  setItemAccessedByIdSize(_id,_x,_y,_w,_h){setItemSize(this.items[_id],_x,_y,_w,_h);}
  setItemSize(_item,_x,_y,_w,_h){_item.x=_x;_item.y=_y;_item.w=_w;_item.h=_h;}
  dragPointer(_x,_y){
    if(this.backlightedItemId>=0){
      if(this.mouseDragStatus.inProgress){
        if(this.items[this.backlightedItemId] instanceof SimpleSlider){
          this.mouseDragStatus.px=this.mouseDragStatus.x;this.mouseDragStatus.py=this.mouseDragStatus.y;this.mouseDragStatus.x=_x;this.mouseDragStatus.y=_y;
          this.mouseDragStatus.vx=this.mouseDragStatus.x-this.mouseDragStatus.px;this.mouseDragStatus.vy=this.mouseDragStatus.y-this.mouseDragStatus.py;
          if(this.items[this.backlightedItemId].orientation===GUI.ORIENTATION_VERTICAL){
            this.items[this.backlightedItemId].setValue(
              this.items[this.backlightedItemId].getRawValue() +
              (this.mouseDragStatus.vx-this.mouseDragStatus.vy)/this.items[this.backlightedItemId].h*this.items[this.backlightedItemId].range
            );
          }else{ // horizontal orientation
            this.items[this.backlightedItemId].setValue(
              this.items[this.backlightedItemId].getRawValue() +
              (this.mouseDragStatus.vx-this.mouseDragStatus.vy)/this.items[this.backlightedItemId].w*this.items[this.backlightedItemId].range
            );
          }
        }else{
          let ht=this.hitTestAllItems(_x,_y);
          if(ht!=this.backlightedItemId){
            this.mouseDragStatus.inProgress=false;
            this.items[this.backlightedItemId].isBacklighted=false;
            this.backlightedItemId=-1;
            if(ht>=0){
              this.backlightedItemId=ht;
              this.items[this.backlightedItemId].isBacklighted=true;
            }
          }
        }
      }else{
        let ht=this.hitTestAllItems(_x,_y);
        if(ht!=this.backlightedItemId){
            this.items[this.backlightedItemId].isBacklighted=false;
            this.backlightedItemId=-1;
            if(ht>=0){
              this.backlightedItemId=ht;
              this.items[this.backlightedItemId].isBacklighted=true;
            }
        }
      }
    }else{
      this.backlightedItemId=this.hitTestAllItems(_x,_y);
      if(this.backlightedItemId>=0) this.items[this.backlightedItemId].isBacklighted=true;
    }
  }
  getLock(){return this.backlightedItemId;}
  lockPointer(_x,_y){ // press
    if(this.mouseDragStatus.inProgress) return this.backlightedItemId;
    this.backlightedItemId=this.hitTestAllItems(_x,_y);
    if(this.backlightedItemId>=0){
      this.items[this.backlightedItemId].isBacklighted=true;
      this.mouseDragStatus.startX=_x;this.mouseDragStatus.startY=_y;
      this.mouseDragStatus.x=this.mouseDragStatus.startX;this.mouseDragStatus.y=this.mouseDragStatus.startY;
      this.mouseDragStatus.px=this.mouseDragStatus.startX;this.mouseDragStatus.py=this.mouseDragStatus.startY;
      this.mouseDragStatus.vx=0;this.mouseDragStatus.vy=0;this.mouseDragStatus.inProgress=true;
      if(this.items[this.backlightedItemId] instanceof SimpleToggle){
        this.items[this.backlightedItemId].setValue(!this.items[this.backlightedItemId].getValue());
      }
      if(this.items[this.backlightedItemId] instanceof SimpleMidiNotesSelector){
        let hit=this.items[this.backlightedItemId].hitTestAllKeys(_x,_y);
        if(hit>=0) this.items[this.backlightedItemId].setKeyAccessedByIndex(hit,!this.items[this.backlightedItemId].getKeyAccessedByIndex(hit).isPressed);
      }
      if(this.items[this.backlightedItemId] instanceof SimpleCellularAutomaton1DSetup){
        let hit=this.items[this.backlightedItemId].hitTestAllCases(_x,_y);
        if(hit>=0) this.items[this.backlightedItemId].setCaseStatusAccessedByIndex(hit,!this.items[this.backlightedItemId].getCaseStatusAccessedByIndex(hit));
      }
      if(this.items[this.backlightedItemId] instanceof SimpleLangSelector){
        let hit=this.items[this.backlightedItemId].hitTestAllItems(_x,_y);
        if(hit>=0) this.items[this.backlightedItemId].setValue(hit);
      }
      if(this.items[this.backlightedItemId] instanceof SimpleRadio){
        let hit=this.items[this.backlightedItemId].hitTestAllItems(_x,_y);
        if(hit>=0) this.items[this.backlightedItemId].setValue(hit);
      }
    }
    return this.backlightedItemId;
  }
  unlockPointer(_x,_y){ // release
    if(this.backlightedItemId<0) return;
    this.mouseDragStatus.inProgress=false;
    if(!this.hitTestItem(this.items[this.backlightedItemId],_x,_y)){
      this.items[this.backlightedItemId].isBacklighted=false;
      this.backlightedItemId=-1;
    }
    this.backlightedItemId=this.hitTestAllItems(_x,_y);
    if(this.backlightedItemId>=0){
      this.items[this.backlightedItemId].isBacklighted=true;
      if(this.items[this.backlightedItemId] instanceof SimpleTrigger) this.items[this.backlightedItemId].trigger();
    }
  }
  hitTestItem(_item,_x,_y){return _item.hitTest(_x,_y);}
  hitTestAllItems(_x,_y){for(let i=0;i<this.items.length;i++) if(this.hitTestItem(this.items[i],_x,_y)) return i; return -1;}
  setBackgroundPanelVisibility(_v){this.backgroundPanel.isVisible=(_v>0);}
  setBackgroundPanelColor(_r,_g,_b,_a){this.backgroundPanel.color.r=_r;this.backgroundPanel.color.g=_g;this.backgroundPanel.color.b=_b;this.backgroundPanel.color.a=_a;}
  setBackgroundPanelRect(_x,_y,_w,_h,_r){this.backgroundPanel.rect.x=_x;this.backgroundPanel.rect.y=_y;this.backgroundPanel.rect.w=_w;this.backgroundPanel.rect.h=_h;this.backgroundPanel.rect.r=_r;}
}

class SimpleSlider{
  constructor(_x,_y,_w,_h,_orient,_outputFloats,_min,_range,_value,_label){
    this.p=null; this.pg=null; this.isEnabled=true; this.changeTime={millis:-1,frameCount:-1};
    this.id=-1;this.outputFloats=_outputFloats;this.truncLength=2;this.verticalTextRotation=-90;this.outlineStrokeWeight=1;
    this.x=_x;this.y=_y;this.w=_w;this.h=_h;this.orientation=_orient;
    this.min=_min;this.range=_range;this.label=_label;this.setValue(_value);
    this.roundCorner=3; this.isBacklighted=false;
    this.balanceValue=this.min+this.range/2;this.applyBalance=false;
    this.colors={
      backlightOn:{
        background:{r:30,g:70,b:100,a:255},
        foreground:{r:30,g:120,b:150,a:255},
        outline:{r:30,g:225,b:255,a:255},
        text:{r:255,g:255,b:255,a:255}
      },
      backlightOff:{
        background:{r:30,g:70,b:100,a:220},
        foreground:{r:30,g:120,b:150,a:220},
        outline:{r:30,g:225,b:255,a:220},
        text:{r:255,g:255,b:255,a:230}
      }
    };
  }
  place(_x,_y,_w,_h){this.x=_x;this.y=_y;this.w=_w;this.h=_h;}
  hitTest(_x,_y){if((_x>=this.x)&&(_y>=this.y)&&(_x<(this.x+this.w))&&(_y<(this.y+this.h))&&this.isEnabled) return true; return false;}
  broadcast(){this.onChange(this.id,this.getValue());}
  onChange(_id, _v){console.log("GUI id: "+_id+" label: "+this.label+" value: "+_v+" millis: "+this.changeTime.millis+" frameCount: "+this.changeTime.frameCount);}
  setNormValue(_v){this.setValue(this.min+_v*this.range);}
  setValue(_v){
    //if(!this.outputFloats) _v=Math.round(_v);
    if(_v>(this.min+this.range)) _v=this.min+this.range; if(_v<this.min) _v=this.min; this.value=_v;
    if(this.p){this.changeTime.frameCount=this.p.frameCount; this.changeTime.millis=this.p.millis();}
    if(this.id>=0) this.onChange(this.id,this.getValue());
  }
  setLabel(_label){this.label=_label;}
  getLabel(){return this.label;}
  getRawValue(){return this.value;}
  getInvValue(){return (this.range-(this.getValue()-this.min)+this.min);}
  getValue(){if(this.outputFloats) return this.value; else return Math.round(this.value);}
  calcNormValue(_v){return ((_v-this.min)/this.range);}
  draw(_fontName,_fontSize){
    // draw bg
    let pixVal, pixAnchor; let normVal=this.calcNormValue(this.value); let normBalanceVal=this.calcNormValue(this.balanceValue);
    this.pg.noStroke(); 
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.background.r,this.colors.backlightOn.background.g,this.colors.backlightOn.background.b,this.colors.backlightOn.background.a);
    }else{
      this.pg.fill(this.colors.backlightOff.background.r,this.colors.backlightOff.background.g,this.colors.backlightOff.background.b,this.colors.backlightOff.background.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    // draw slider
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.foreground.r,this.colors.backlightOn.foreground.g,this.colors.backlightOn.foreground.b,this.colors.backlightOn.foreground.a);
    }else{
      this.pg.fill(this.colors.backlightOff.foreground.r,this.colors.backlightOff.foreground.g,this.colors.backlightOff.foreground.b,this.colors.backlightOff.foreground.a);
    } 
    if(this.orientation===GUI.ORIENTATION_VERTICAL){
      if(this.applyBalance){
        if(this.value<this.balanceValue){
          pixVal = this.h*(normBalanceVal-normVal); pixAnchor = this.y+normBalanceVal*this.h-pixVal;
        }else{
          pixVal = this.h*(normVal-normBalanceVal); pixAnchor = this.y+normBalanceVal*this.h;
        }
      }else{pixVal = this.h*normVal; pixAnchor = this.y+this.h-pixVal;}
      this.pg.rect(this.x,pixAnchor,this.w,pixVal,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    }else{ // orientation horizontal
      if(this.applyBalance){
        if(this.value<this.balanceValue){
          pixVal = this.w*(normBalanceVal-normVal); pixAnchor = this.x+normBalanceVal*this.w-pixVal;
        }else{
          pixVal = this.w*(normVal-normBalanceVal); pixAnchor = this.x+normBalanceVal*this.w;
        }
      }else{pixVal = this.w*normVal; pixAnchor = this.x;}
      this.pg.rect(pixAnchor,this.y,pixVal,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    }
    // draw outline
    this.pg.noFill(); this.pg.strokeWeight(this.outlineStrokeWeight);
    if(this.isBacklighted){
      this.pg.stroke(this.colors.backlightOn.outline.r,this.colors.backlightOn.outline.g,this.colors.backlightOn.outline.b,this.colors.backlightOn.outline.a);
    }else{
      this.pg.stroke(this.colors.backlightOff.outline.r,this.colors.backlightOff.outline.g,this.colors.backlightOff.outline.b,this.colors.backlightOff.outline.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    // draw label
    this.pg.noStroke();
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.text.r,this.colors.backlightOn.text.g,this.colors.backlightOn.text.b,this.colors.backlightOn.text.a);
    }else{
      this.pg.fill(this.colors.backlightOff.text.r,this.colors.backlightOff.text.g,this.colors.backlightOff.text.b,this.colors.backlightOff.text.a);
    }
    this.pg.textAlign(this.p.CENTER,this.p.CENTER);
    this.pg.push();
      this.pg.translate(this.x+0.5*this.w,this.y+0.5*this.h);
      if(this.orientation===GUI.ORIENTATION_VERTICAL) this.pg.rotate(this.pg.radians(this.verticalTextRotation));
      let v=this.getValue(); if(this.outputFloats) v=v.toFixed(this.truncLength);
      this.pg.text(this.label+" "+v,0,0);
    this.pg.pop();
  }
}

class SimpleToggle{
  constructor(_x,_y,_w,_h,_orient,_value,_label){
    this.p=null; this.pg=null; this.isEnabled=true; this.changeTime={millis:-1,frameCount:-1};
    this.id=-1;this.verticalTextRotation=-90;this.outlineStrokeWeight=1;
    this.x=_x;this.y=_y;this.w=_w;this.h=_h;this.orientation=_orient;
    this.label=_label;this.setValue(_value);
    this.roundCorner=3; this.isBacklighted=false;
    this.colors={
      backlightOn:{
        background:{r:30,g:70,b:100,a:255},
        foreground:{r:30,g:120,b:150,a:255},
        outline:{r:30,g:225,b:255,a:255},
        text:{r:255,g:255,b:255,a:255}
      },
      backlightOff:{
        background:{r:30,g:70,b:100,a:220},
        foreground:{r:30,g:120,b:150,a:220},
        outline:{r:30,g:225,b:255,a:220},
        text:{r:255,g:255,b:255,a:230}
      }
    };
  }
  place(_x,_y,_w,_h){this.x=_x;this.y=_y;this.w=_w;this.h=_h;}
  hitTest(_x,_y){if((_x>=this.x)&&(_y>=this.y)&&(_x<(this.x+this.w))&&(_y<(this.y+this.h))&&this.isEnabled) return true; return false;}
  broadcast(){this.onChange(this.id,this.value);}
  onChange(_id, _v){console.log("GUI id: "+_id+" label: "+this.label+" value: "+_v+" millis: "+this.changeTime.millis+" frameCount: "+this.changeTime.frameCount);}
  setValue(_v){
    this.value=(_v>0);
    if(this.p){this.changeTime.frameCount=this.p.frameCount; this.changeTime.millis=this.p.millis();}
    if(this.id>=0) this.onChange(this.id,this.value);
  }
  getValue(){return this.value;}
  setLabel(_label){this.label=_label;}
  getLabel(){return this.label;}
  draw(_fontName,_fontSize){
    // draw bg
    this.pg.noStroke(); 
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.background.r,this.colors.backlightOn.background.g,this.colors.backlightOn.background.b,this.colors.backlightOn.background.a);
    }else{
      this.pg.fill(this.colors.backlightOff.background.r,this.colors.backlightOff.background.g,this.colors.backlightOff.background.b,this.colors.backlightOff.background.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    // draw indicator
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.foreground.r,this.colors.backlightOn.foreground.g,this.colors.backlightOn.foreground.b,this.colors.backlightOn.foreground.a);
    }else{
      this.pg.fill(this.colors.backlightOff.foreground.r,this.colors.backlightOff.foreground.g,this.colors.backlightOff.foreground.b,this.colors.backlightOff.foreground.a);
    } 
    if(this.value) this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    // draw outline
    this.pg.noFill(); this.pg.strokeWeight(this.outlineStrokeWeight);
    if(this.isBacklighted){
      this.pg.stroke(this.colors.backlightOn.outline.r,this.colors.backlightOn.outline.g,this.colors.backlightOn.outline.b,this.colors.backlightOn.outline.a);
    }else{
      this.pg.stroke(this.colors.backlightOff.outline.r,this.colors.backlightOff.outline.g,this.colors.backlightOff.outline.b,this.colors.backlightOff.outline.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    // draw label
    this.pg.noStroke();
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.text.r,this.colors.backlightOn.text.g,this.colors.backlightOn.text.b,this.colors.backlightOn.text.a);
    }else{
      this.pg.fill(this.colors.backlightOff.text.r,this.colors.backlightOff.text.g,this.colors.backlightOff.text.b,this.colors.backlightOff.text.a);
    }
    this.pg.textAlign(this.p.LEFT,this.p.CENTER);
    this.pg.push();
      if(this.orientation===GUI.ORIENTATION_HORIZONTAL){
        this.pg.translate(this.x+this.pg.textSize(),this.y+0.5*this.h);
      }else{
        this.pg.translate(this.x+0.5*this.w,this.y+this.h-this.pg.textSize());
        this.pg.rotate(this.p.radians(this.verticalTextRotation));
      }
      this.pg.text(this.label,0,0);
    this.pg.pop();
    this.pg.textAlign(this.p.RIGHT,this.p.CENTER);
    this.pg.push();
      if(this.orientation===GUI.ORIENTATION_HORIZONTAL){
        this.pg.translate(this.x+this.w-this.pg.textSize(),this.y+0.5*this.h);
      }else{
        this.pg.translate(this.x+0.5*this.w,this.y+this.pg.textSize());
        this.pg.rotate(this.p.radians(this.verticalTextRotation));
      }
      if(this.value) this.pg.text('√',0,0); else this.pg.text('-',0,0);
    this.pg.pop();
  }
}

class SimpleTrigger{
  constructor(_x,_y,_w,_h,_orient,_label){
    this.p=null; this.pg=null; this.isEnabled=true; this.changeTime={millis:-1,frameCount:-1};
    this.id=-1;this.verticalTextRotation=-90;this.outlineStrokeWeight=1;
    this.x=_x;this.y=_y;this.w=_w;this.h=_h;this.orientation=_orient;
    this.label=_label;
    this.roundCorner=3; this.isBacklighted=false;
    this.blinkDuration=100; //ms
    this.colors={
      backlightOn:{
        background:{r:30,g:70,b:100,a:255},
        foreground:{r:30,g:120,b:150,a:255},
        outline:{r:30,g:225,b:255,a:255},
        text:{r:255,g:255,b:255,a:255}
      },
      backlightOff:{
        background:{r:30,g:70,b:100,a:220},
        foreground:{r:30,g:120,b:150,a:220},
        outline:{r:30,g:225,b:255,a:220},
        text:{r:255,g:255,b:255,a:230}
      }
    };
  }
  place(_x,_y,_w,_h){this.x=_x;this.y=_y;this.w=_w;this.h=_h;}
  hitTest(_x,_y){if((_x>=this.x)&&(_y>=this.y)&&(_x<(this.x+this.w))&&(_y<(this.y+this.h))&&this.isEnabled) return true; return false;}
  onTrigger(_id){console.log("GUI id: "+_id+" label: "+this.label+" millis: "+this.changeTime.millis+" frameCount: "+this.changeTime.frameCount);}
  broadcast(){this.onTrigger(this.id);} // rather shouldnt be used
  trigger(){
    if(this.p){this.changeTime.frameCount=this.p.frameCount; this.changeTime.millis=this.p.millis();}
    if(this.id>=0) this.onTrigger(this.id);
  }
  setLabel(_label){this.label=_label;}
  getLabel(){return this.label;}
  draw(_fontName,_fontSize){
    // draw bg
    this.pg.noStroke(); 
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.background.r,this.colors.backlightOn.background.g,this.colors.backlightOn.background.b,this.colors.backlightOn.background.a);
    }else{
      this.pg.fill(this.colors.backlightOff.background.r,this.colors.backlightOff.background.g,this.colors.backlightOff.background.b,this.colors.backlightOff.background.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    // draw indicator
    if((this.p.millis()-this.changeTime.millis)<this.blinkDuration){
      if(this.isBacklighted){
        this.pg.fill(this.colors.backlightOn.foreground.r,this.colors.backlightOn.foreground.g,this.colors.backlightOn.foreground.b,this.colors.backlightOn.foreground.a);
      }else{
        this.pg.fill(this.colors.backlightOff.foreground.r,this.colors.backlightOff.foreground.g,this.colors.backlightOff.foreground.b,this.colors.backlightOff.foreground.a);
      } 
      this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    }
    // draw outline
    this.pg.noFill(); this.pg.strokeWeight(this.outlineStrokeWeight);
    if(this.isBacklighted){
      this.pg.stroke(this.colors.backlightOn.outline.r,this.colors.backlightOn.outline.g,this.colors.backlightOn.outline.b,this.colors.backlightOn.outline.a);
    }else{
      this.pg.stroke(this.colors.backlightOff.outline.r,this.colors.backlightOff.outline.g,this.colors.backlightOff.outline.b,this.colors.backlightOff.outline.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    // draw label
    this.pg.noStroke();
    if(this.isBacklighted){
      this.pg.fill(this.colors.backlightOn.text.r,this.colors.backlightOn.text.g,this.colors.backlightOn.text.b,this.colors.backlightOn.text.a);
    }else{
      this.pg.fill(this.colors.backlightOff.text.r,this.colors.backlightOff.text.g,this.colors.backlightOff.text.b,this.colors.backlightOff.text.a);
    }
    this.pg.textAlign(this.p.CENTER,this.p.CENTER);
    this.pg.push();
      this.pg.translate(this.x+0.5*this.w,this.y+0.5*this.h);
      if(this.orientation===GUI.ORIENTATION_VERTICAL) this.pg.rotate(this.p.radians(this.verticalTextRotation));
      this.pg.text(this.label,0,0);
    this.pg.pop();
  }
}

class SimpleMidiNotesSelector{
  constructor(_x,_y,_w,_h,_orient,_firstKey,_numOfKeys){
    this.keyboardPattern=[[true,'C'],[false,'c#'],[true,'D'],[false,'d#'],[true,'E'],[true,'F'],[false,'f#'],[true,'G'],[false,'g#'],[true,'A'],[false,'a#'],[true,'B']];
    this.p=null;this.pg=null;this.isEnabled=true;this.changeTime={millis:-1,frameCount:-1};
    this.id=-1;this.verticalTextRotation=-90;this.outlineStrokeWeight=1;
    this.x=_x;this.y=_y;this.w=_w;this.h=_h;this.orientation=_orient;
    this.roundCorner=3; this.isBacklighted=false;
    this.colors={
      backlightOn:{
        outline:{r:30,g:225,b:255,a:255},
        pressed:{
          natural:{r:200,g:200,b:200,a:255},
          sharp:{r:0,g:0,b:0,a:255},
          //foreground:{r:0,g:150,b:150,a:255},
          naturaltext:{r:0,g:0,b:0,a:255},
          sharptext:{r:255,g:255,b:255,a:255}
        },
        released:{
          natural:{r:200,g:200,b:200,a:125},
          sharp:{r:0,g:0,b:0,a:155},
          //foreground:{r:0,g:150,b:150,a:125},
          naturaltext:{r:0,g:0,b:0,a:125},
          sharptext:{r:255,g:255,b:255,a:125}
        }
      },
      backlightOff:{
        outline:{r:30,g:225,b:255,a:220},
        pressed:{
          natural:{r:200,g:200,b:200,a:220},
          sharp:{r:0,g:0,b:0,a:220},
          //foreground:{r:0,g:150,b:150,a:220},
          naturaltext:{r:0,g:0,b:0,a:230},
          sharptext:{r:255,g:255,b:255,a:230}
        },
        released:{
          natural:{r:200,g:200,b:200,a:90},
          sharp:{r:0,g:0,b:0,a:120},
          //foreground:{r:0,g:150,b:150,a:90},
          naturaltext:{r:0,g:0,b:0,a:100},
          sharptext:{r:255,g:255,b:255,a:100}
        }
      }
    };
    this.firstKey=_firstKey;this.numOfKeys=_numOfKeys;this.keys=[];
    if(this.orientation===GUI.ORIENTATION_HORIZONTAL){
      for(let i=0;i<this.numOfKeys;i++){
        let n=(this.firstKey+i)%this.keyboardPattern.length;
        this.keys[i]={
          isNatural:this.keyboardPattern[n][0],label:this.keyboardPattern[n][1],
          x:(this.x+this.w*i),y:this.y,w:this.w,h:this.h,midiKey:(this.firstKey+i),isPressed:false
        };
      }
      this.w*=this.numOfKeys;
    }else{ // orientation vertical
      for(let i=0;i<this.numOfKeys;i++){
        let n=(this.firstKey+i)%this.keyboardPattern.length;
        this.keys[i]={
          isNatural:this.keyboardPattern[n][0],label:this.keyboardPattern[n][1],
          x:this.x,y:(this.y+this.h*(this.numOfKeys-i-1)),w:this.w,h:this.h,midiKey:(this.firstKey+i),isPressed:false
        };
      }
      this.h*=this.numOfKeys;
    }
  }
  setLabel(_label){/*no label*/}
  getLabel(){return ""; /*no label*/}
  getNumberOfPressedKeys(){let result=0; for(let i=0;i<this.numOfKeys;i++) if(this.keys[i].isPressed) result+=1; return result;}
  getAllValuesAsArray(){let result=[]; for(let i=0;i<this.numOfKeys;i++) result[i]=this.keys[i].isPressed; return result;}
  hitTest(_x,_y){if((_x>=this.x)&&(_y>=this.y)&&(_x<(this.x+this.w))&&(_y<(this.y+this.h))&&this.isEnabled) return true; return false;}
  hitTestAllKeys(_x,_y){for(let i=0;i<this.numOfKeys;i++){if(this.hitTestKeyAccessedById(i,_x,_y)) return i;} return -1;}
  hitTestKeyAccessedById(_id,_x,_y){return this.hitTestKey(this.keys[_id],_x,_y);}
  hitTestKey(_key,_x,_y){if((_x>=_key.x)&&(_y>=_key.y)&&(_x<(_key.x+_key.w))&&(_y<(_key.y+_key.h))&&this.isEnabled) return true; return false;}
  broadcast(){this.onChange(this.id,-1,-1);}
  onChange(_id,_keyNum,_status){
    console.log(
      "GUI id: "+_id+" keyNum: "+_keyNum+" status: "+_status+
      " millis: "+this.changeTime.millis+" frameCount: "+this.changeTime.frameCount
    );
  }
  setMidiKey(_midiKey,_status){this.setKeyAccessedByIndex(_midiKey-this.firstKey,_status);}
  setKeyAccessedByIndex(_keyIndex,_status){
    _status=(_status>0); _keyIndex=Math.abs(Math.floor(_keyIndex));
    if(_keyIndex<0) _keyIndex=0; if(_keyIndex>=this.numOfKeys) _keyIndex=this.numOfKeys-1;
    if(_status===this.keys[_keyIndex].isPressed) return;
    this.keys[_keyIndex].isPressed=_status;
    if(this.p){this.changeTime.frameCount=this.p.frameCount; this.changeTime.millis=this.p.millis();}
    if(this.id>=0) this.onChange(this.id,_keyIndex,_status);
  }
  getMidiKey(_midiKey){this.getKeyAccessedByIndex(_midiKey-this.firstKey);}
  getKeyAccessedByIndex(_keyIndex){
    _keyIndex=Math.abs(Math.floor(_keyIndex));
    if(_keyIndex<0) _keyIndex=0; if(_keyIndex>=this.numOfKeys) _keyIndex=this.numOfKeys-1;
    return this.keys[_keyIndex];
  }
  draw(_fontName,_fontSize){
    // draw bg
    this.pg.noStroke(); 
    for(let i=0;i<this.keys.length;i++){
      if(this.keys[i].isPressed){
        if(this.isBacklighted){
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOn.pressed.natural.r,this.colors.backlightOn.pressed.natural.g,this.colors.backlightOn.pressed.natural.b,this.colors.backlightOn.pressed.natural.a);
          else
            this.pg.fill(this.colors.backlightOn.pressed.sharp.r,this.colors.backlightOn.pressed.sharp.g,this.colors.backlightOn.pressed.sharp.b,this.colors.backlightOn.pressed.sharp.a);
        }else{
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOff.pressed.natural.r,this.colors.backlightOff.pressed.natural.g,this.colors.backlightOff.pressed.natural.b,this.colors.backlightOff.pressed.natural.a);
          else
            this.pg.fill(this.colors.backlightOff.pressed.sharp.r,this.colors.backlightOff.pressed.sharp.g,this.colors.backlightOff.pressed.sharp.b,this.colors.backlightOff.pressed.sharp.a);
        }
      }else{
        if(this.isBacklighted){
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOn.released.natural.r,this.colors.backlightOn.released.natural.g,this.colors.backlightOn.released.natural.b,this.colors.backlightOn.released.natural.a);
          else
            this.pg.fill(this.colors.backlightOn.released.sharp.r,this.colors.backlightOn.released.sharp.g,this.colors.backlightOn.released.sharp.b,this.colors.backlightOn.released.sharp.a);
        }else{
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOff.released.natural.r,this.colors.backlightOff.released.natural.g,this.colors.backlightOff.released.natural.b,this.colors.backlightOff.released.natural.a);
          else
            this.pg.fill(this.colors.backlightOff.released.sharp.r,this.colors.backlightOff.released.sharp.g,this.colors.backlightOff.released.sharp.b,this.colors.backlightOff.released.sharp.a);
        }
      }
      if(this.orientation===GUI.ORIENTATION_HORIZONTAL){
        if(i===0){
          this.pg.rect(this.keys[i].x,this.keys[i].y,this.keys[i].w,this.keys[i].h,this.roundCorner,0,0,this.roundCorner);
        }else{
          if(i===(this.keys.length-1))
            this.pg.rect(this.keys[i].x,this.keys[i].y,this.keys[i].w,this.keys[i].h,0,this.roundCorner,this.roundCorner,0);
          else
            this.pg.rect(this.keys[i].x,this.keys[i].y,this.keys[i].w,this.keys[i].h);
        }
      }else{ // orientation vertical
        if(i===0){
          this.pg.rect(this.keys[i].x,this.keys[i].y,this.keys[i].w,this.keys[i].h,0,0,this.roundCorner,this.roundCorner);
        }else{
          if(i===(this.keys.length-1))
            this.pg.rect(this.keys[i].x,this.keys[i].y,this.keys[i].w,this.keys[i].h,this.roundCorner,this.roundCorner,0,0);
          else
            this.pg.rect(this.keys[i].x,this.keys[i].y,this.keys[i].w,this.keys[i].h);
        }
      }
    }
    // draw indicator
    /*
    if(this.isBacklighted){
      this.p.fill(this.colors.backlightOn.foreground.r,this.colors.backlightOn.foreground.g,this.colors.backlightOn.foreground.b,this.colors.backlightOn.foreground.a);
    }else{
      this.p.fill(this.colors.backlightOff.foreground.r,this.colors.backlightOff.foreground.g,this.colors.backlightOff.foreground.b,this.colors.backlightOff.foreground.a);
    } 
    if(this.value) this.p.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    */
    // draw outline
    this.pg.noFill(); this.pg.strokeWeight(this.outlineStrokeWeight);
    if(this.isBacklighted){
      this.pg.stroke(this.colors.backlightOn.outline.r,this.colors.backlightOn.outline.g,this.colors.backlightOn.outline.b,this.colors.backlightOn.outline.a);
    }else{
      this.pg.stroke(this.colors.backlightOff.outline.r,this.colors.backlightOff.outline.g,this.colors.backlightOff.outline.b,this.colors.backlightOff.outline.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    if(this.orientation===GUI.ORIENTATION_HORIZONTAL)
      for(let i=1;i<this.keys.length;i++) this.pg.line(this.keys[i].x,this.keys[i].y+1,this.keys[i].x,this.keys[i].y+this.keys[i].h-1);
    else // orientation vertical
      for(let i=1;i<this.keys.length;i++) this.pg.line(this.keys[i-1].x+1,this.keys[i-1].y,this.keys[i-1].x+this.keys[i-1].w-1,this.keys[i-1].y);
    // draw label
    this.pg.noStroke();
    this.pg.textAlign(this.p.CENTER,this.p.CENTER);
    for(let i=0;i<this.keys.length;i++){
      if(this.keys[i].isPressed){
        if(this.isBacklighted){
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOn.pressed.naturaltext.r,this.colors.backlightOn.pressed.naturaltext.g,this.colors.backlightOn.pressed.naturaltext.b,this.colors.backlightOn.pressed.naturaltext.a);
          else
            this.pg.fill(this.colors.backlightOn.pressed.sharptext.r,this.colors.backlightOn.pressed.sharptext.g,this.colors.backlightOn.pressed.sharptext.b,this.colors.backlightOn.pressed.sharptext.a);
        }else{
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOff.pressed.naturaltext.r,this.colors.backlightOff.pressed.naturaltext.g,this.colors.backlightOff.pressed.naturaltext.b,this.colors.backlightOff.pressed.naturaltext.a);
          else
            this.pg.fill(this.colors.backlightOff.pressed.sharptext.r,this.colors.backlightOff.pressed.sharptext.g,this.colors.backlightOff.pressed.sharptext.b,this.colors.backlightOff.pressed.sharptext.a);
        }
      }else{
        if(this.isBacklighted){
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOn.released.naturaltext.r,this.colors.backlightOn.released.naturaltext.g,this.colors.backlightOn.released.naturaltext.b,this.colors.backlightOn.released.naturaltext.a);
          else
            this.pg.fill(this.colors.backlightOn.released.sharptext.r,this.colors.backlightOn.released.sharptext.g,this.colors.backlightOn.released.sharptext.b,this.colors.backlightOn.released.sharptext.a);
        }else{
          if(this.keys[i].isNatural)
            this.pg.fill(this.colors.backlightOff.released.naturaltext.r,this.colors.backlightOff.released.naturaltext.g,this.colors.backlightOff.released.naturaltext.b,this.colors.backlightOff.released.naturaltext.a);
          else
            this.pg.fill(this.colors.backlightOff.released.sharptext.r,this.colors.backlightOff.released.sharptext.g,this.colors.backlightOff.released.sharptext.b,this.colors.backlightOff.released.sharptext.a);
        }
      }
      this.pg.push();
        this.pg.translate(this.keys[i].x+0.5*this.keys[i].w,this.keys[i].y+0.5*this.keys[i].h);
        if(this.orientation===GUI.ORIENTATION_HORIZONTAL){
          // nothing to do
        }else{ // orientation vertical
          this.pg.rotate(this.p.radians(this.verticalTextRotation));
        }
        this.pg.text(this.keys[i].label,0,0);
      this.pg.pop();
    }
  }
}

class SimpleCellularAutomaton1DSetup{
  constructor(_x,_y,_w,_h,_orient){
    this.cases=[
      /*0*/ {code:"000",status:false,x:_x,y:_y,w:_w,h:_h,bcode:[false,false,false]},
      /*1*/ {code:"001",status:true,x:_x,y:_y,w:_w,h:_h,bcode:[false,false,true]},
      /*2*/ {code:"010",status:true,x:_x,y:_y,w:_w,h:_h,bcode:[false,true,false]},
      /*3*/ {code:"011",status:false,x:_x,y:_y,w:_w,h:_h,bcode:[false,true,true]},
      /*4*/ {code:"100",status:true,x:_x,y:_y,w:_w,h:_h,bcode:[true,false,false]},
      /*5*/ {code:"101",status:false,x:_x,y:_y,w:_w,h:_h,bcode:[true,false,true]},
      /*6*/ {code:"110",status:false,x:_x,y:_y,w:_w,h:_h,bcode:[true,true,false]},
      /*7*/ {code:"111",status:false,x:_x,y:_y,w:_w,h:_h,bcode:[true,true,true]}
    ];
    this.p=null;this.pg=null;this.isEnabled=true;this.changeTime={millis:-1,frameCount:-1};
    this.id=-1;this.verticalTextRotation=-90;this.outlineStrokeWeight=1;
    this.x=_x;this.y=_y;this.w=_w;this.h=_h;this.orientation=_orient;
    this.roundCorner=3; this.isBacklighted=false;
    this.colors={
      backlightOn:{
        outline:{r:30,g:225,b:255,a:255},
        background:{r:30,g:70,b:100,a:255},
        prevCell:{r:255,g:255,b:255,a:200},
        currCell:{r:255,g:255,b:255,a:255}
        //foreground:{r:0,g:150,b:150,a:255}
      },
      backlightOff:{
        outline:{r:30,g:225,b:255,a:220},
        background:{r:30,g:70,b:100,a:220},
        prevCell:{r:255,g:255,b:255,a:170},
        currCell:{r:255,g:255,b:255,a:225}
        //foreground:{r:0,g:150,b:150,a:220}
      }
    };
    if(this.orientation===GUI.ORIENTATION_HORIZONTAL){
      for(let i=0;i<this.cases.length;i++) this.cases[i].x=this.x+this.w*i;
      this.w*=this.cases.length;
    }else{ // orientation vertical
      for(let i=0;i<this.cases.length;i++) this.cases[i].y=this.y+this.h*i;
      this.h*=this.cases.length;
    }
  }
  setLabel(_label){/*no label*/}
  getLabel(){return ""; /*no label*/}
  getAllValuesAsArray(){let result=[]; for(let i=0;i<this.cases.length;i++) result[i]=this.cases.status; return result;}
  hitTest(_x,_y){if((_x>=this.x)&&(_y>=this.y)&&(_x<(this.x+this.w))&&(_y<(this.y+this.h))&&this.isEnabled) return true; return false;}
  hitTestAllCases(_x,_y){for(let i=0;i<this.cases.length;i++){if(this.hitTestCaseAccessedById(i,_x,_y)) return i;} return -1;}
  hitTestCaseAccessedById(_id,_x,_y){return this.hitTestCase(this.cases[_id],_x,_y);}
  hitTestCase(_case,_x,_y){if((_x>=_case.x)&&(_y>=_case.y)&&(_x<(_case.x+_case.w))&&(_y<(_case.y+_case.h))&&this.isEnabled) return true; return false;}
  broadcast(){this.onChange(this.id,-1,-1);}
  onChange(_id,_caseNum,_status){
    console.log(
      "GUI id: "+_id+" caseNum: "+_caseNum+" status: "+_status+
      " millis: "+this.changeTime.millis+" frameCount: "+this.changeTime.frameCount
    );
  }
  findCaseIndexByCode(_code){for(let i=0;i<this.cases.length;i++) if(_code===this.cases[i].code) return i; return -1;}
  setRule(_v000,_v001,_v010,_v011,_v100,_v101,_v110,_v111){
    if(!isNaN(_v000)) this.setCaseStatusAccessedByIndex(0,(_v000>0));
    if(!isNaN(_v001)) this.setCaseStatusAccessedByIndex(1,(_v001>0));
    if(!isNaN(_v010)) this.setCaseStatusAccessedByIndex(2,(_v010>0));
    if(!isNaN(_v011)) this.setCaseStatusAccessedByIndex(3,(_v011>0));
    if(!isNaN(_v100)) this.setCaseStatusAccessedByIndex(4,(_v100>0));
    if(!isNaN(_v101)) this.setCaseStatusAccessedByIndex(5,(_v101>0));
    if(!isNaN(_v110)) this.setCaseStatusAccessedByIndex(6,(_v110>0));
    if(!isNaN(_v111)) this.setCaseStatusAccessedByIndex(7,(_v111>0));
  }
  setCaseStatus(_code, _status){let idx=this.findCaseIndexByCode; if(idx<0) return; this.setCaseStatusAccessedByIndex(idx,_status);}
  setCaseStatusAccessedByIndex(_index,_status){
    _status=(_status>0); _index=Math.abs(Math.floor(_index));
    if(_index>=this.cases.length) _index=this.cases.length-1;
    if(_status===this.cases[_index].status) return;
    this.cases[_index].status=_status;
    if(this.p){this.changeTime.frameCount=this.p.frameCount; this.changeTime.millis=this.p.millis();}
    if(this.id>=0) this.onChange(this.id,_index,_status);
  }
  getCaseStatusAccessedByCode(_code){return this.getCaseStatusAccessedByIndex(this.findCaseIndexByCode(_code));}
  getCaseStatusAccessedByIndex(_idx){return this.cases[_idx].status;}
  draw(_fontName,_fontSize){
    // draw bg
    this.pg.noStroke();
    if(this.isBacklighted)
      this.pg.fill(this.colors.backlightOn.background.r,this.colors.backlightOn.background.g,this.colors.backlightOn.background.b,this.colors.backlightOn.background.a);
    else
      this.pg.fill(this.colors.backlightOff.background.r,this.colors.backlightOff.background.g,this.colors.backlightOff.background.b,this.colors.backlightOff.background.a);
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    let tempw,temph;
    for(let i=0;i<this.cases.length;i++){
      tempw=this.cases[i].w/3; temph=this.cases[i].h/2;
      for(let j=0;j<this.cases[i].bcode.length;j++){
        if(this.isBacklighted){
          if(this.cases[i].bcode[j]){
            this.pg.noStroke(); this.pg.fill(this.colors.backlightOn.prevCell.r,this.colors.backlightOn.prevCell.g,this.colors.backlightOn.prevCell.b,this.colors.backlightOn.prevCell.a);
          }else{
            this.pg.noFill(); this.pg.stroke(this.colors.backlightOn.prevCell.r,this.colors.backlightOn.prevCell.g,this.colors.backlightOn.prevCell.b,this.colors.backlightOn.prevCell.a);
          }
        }else{
          if(this.cases[i].bcode[j]){
            this.pg.noStroke(); this.pg.fill(this.colors.backlightOff.prevCell.r,this.colors.backlightOff.prevCell.g,this.colors.backlightOff.prevCell.b,this.colors.backlightOff.prevCell.a);
          }else{
            this.pg.noFill(); this.pg.stroke(this.colors.backlightOff.prevCell.r,this.colors.backlightOff.prevCell.g,this.colors.backlightOff.prevCell.b,this.colors.backlightOff.prevCell.a);
          }
        }
        this.pg.rect(
          this.cases[i].x+j*tempw+2,
          this.cases[i].y+2,
          tempw-4,temph-4,
          this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner
        );
      }
      if(this.isBacklighted){
        if(this.cases[i].status){
          this.pg.noStroke(); this.pg.fill(this.colors.backlightOn.currCell.r,this.colors.backlightOn.currCell.g,this.colors.backlightOn.currCell.b,this.colors.backlightOn.currCell.a);
        }else{
          this.pg.noFill(); this.pg.stroke(this.colors.backlightOn.currCell.r,this.colors.backlightOn.currCell.g,this.colors.backlightOn.currCell.b,this.colors.backlightOn.currCell.a);
        }
      }else{
        if(this.cases[i].status){
          this.pg.noStroke(); this.pg.fill(this.colors.backlightOff.currCell.r,this.colors.backlightOff.currCell.g,this.colors.backlightOff.currCell.b,this.colors.backlightOff.currCell.a);
        }else{
          this.pg.noFill(); this.pg.stroke(this.colors.backlightOff.currCell.r,this.colors.backlightOff.currCell.g,this.colors.backlightOff.currCell.b,this.colors.backlightOff.currCell.a);
        }
      }
      this.pg.rect(
        this.cases[i].x+tempw+2,
        this.cases[i].y+temph+2,
        tempw-4,temph-4,
        this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner
      );
    }
    // draw outline
    this.pg.noFill(); this.pg.strokeWeight(this.outlineStrokeWeight);
    if(this.isBacklighted){
      this.pg.stroke(this.colors.backlightOn.outline.r,this.colors.backlightOn.outline.g,this.colors.backlightOn.outline.b,this.colors.backlightOn.outline.a);
    }else{
      this.pg.stroke(this.colors.backlightOff.outline.r,this.colors.backlightOff.outline.g,this.colors.backlightOff.outline.b,this.colors.backlightOff.outline.a);
    }
    this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
    if(this.orientation===GUI.ORIENTATION_HORIZONTAL)
      for(let i=1;i<this.cases.length;i++) this.pg.line(this.cases[i].x,this.cases[i].y+1,this.cases[i].x,this.cases[i].y+this.cases[i].h-1);
    else // orientation vertical
      for(let i=1;i<this.cases.length;i++) this.pg.line(this.cases[i-1].x+1,this.cases[i-1].y,this.cases[i-1].x+this.cases[i-1].w-1,this.cases[i-1].y);
  }
}

class SimpleLangSelector{
  constructor(_x,_y,_w,_h,_orient,_value,_label){
    this.p=null; this.pg=null; this.isEnabled=true; this.changeTime={millis:-1,frameCount:-1};
    this.id=-1;this.verticalTextRotation=-90;this.outlineStrokeWeight=1;
    this.x=_x;this.y=_y;this.w=_w;this.h=_h;this.orientation=_orient;
    this.label=_label;this.items=[];this.setValue(_value);
    this.roundCorner=3; this.isBacklighted=false;
    this.colors={
      backlightOn:{
        pressed:{
          background:{r:30,g:70,b:100,a:205},
          text:{r:255,g:255,b:255,a:205}
        },
        released:{
          background:{r:30,g:70,b:100,a:255},
          text:{r:255,g:255,b:255,a:255}
        }
      },
      backlightOff:{
        pressed:{
          background:{r:30,g:70,b:100,a:170},
          text:{r:255,g:255,b:255,a:170}
        },
        released:{
          background:{r:30,g:70,b:100,a:220},
          text:{r:255,g:255,b:255,a:230}
        }
      }
    };
  }
  setItems(_items){
    // orientation not handled yet
    for(let i=0;i<_items.length;i++){
      this.items[i]={
        label:_items[i].label, iconAsUnicode:_items[i].iconAsUnicode,
        x:(this.x+this.w*i),y:this.y,w:this.w,h:this.h
      };
    }
    this.w*=this.items.length;
  }
  hitTest(_x,_y){if((_x>=this.x)&&(_y>=this.y)&&(_x<(this.x+this.w))&&(_y<(this.y+this.h))&&this.isEnabled) return true; return false;}
  hitTestAllItems(_x,_y){
    if(!this.isEnabled) return -1;
    for(let i=0;i<this.items.length;i++){
      if((_x>=this.items[i].x)&&(_y>=this.items[i].y)&&(_x<(this.items[i].x+this.items[i].w))&&(_y<(this.items[i].y+this.items[i].h))) return i;
    }
    return -1;
  }
  broadcast(){this.onChange(this.id,this.value);}
  onChange(_id, _v){console.log("GUI id: "+_id+" label: "+this.label+" value: "+_v+" millis: "+this.changeTime.millis+" frameCount: "+this.changeTime.frameCount);}
  setValue(_v){
    this.value=Math.floor(Math.abs(_v));
    if(this.p){this.changeTime.frameCount=this.p.frameCount; this.changeTime.millis=this.p.millis();}
    if(this.id>=0) this.onChange(this.id,this.value);
  }
  setValueFromLanguageCode(_langCode){
    if(_langCode===null) return; if(_langCode.length<1) return;
    _langCode=_langCode.toLowerCase();
    for(let i=0;i<this.items.length;i++){
      if(_langCode===this.items[i].label.toLowerCase()){
        this.setValue(i); return;
      }
    }
  }
  getValue(){return this.value;}
  setLabel(_label){this.label=_label;}
  getLabel(){return this.label;}
  draw(_fontName,_fontSize){
    // draw bg
    this.pg.noStroke();
    for(let i=0;i<this.items.length;i++){
      if(this.value===i){ // is pressed (selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.pressed.background.r,this.colors.backlightOn.pressed.background.g,this.colors.backlightOn.pressed.background.b,this.colors.backlightOn.pressed.background.a);
        }else{
          this.pg.fill(this.colors.backlightOff.pressed.background.r,this.colors.backlightOff.pressed.background.g,this.colors.backlightOff.pressed.background.b,this.colors.backlightOff.pressed.background.a);
        }
      }else{ // is released (not selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.released.background.r,this.colors.backlightOn.released.background.g,this.colors.backlightOn.released.background.b,this.colors.backlightOn.released.background.a);
        }else{
          this.pg.fill(this.colors.backlightOff.released.background.r,this.colors.backlightOff.released.background.g,this.colors.backlightOff.released.background.b,this.colors.backlightOff.released.background.a);
        }
      }
      if(i===0){
        if(this.items.length===1){
          this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
        }else{
          this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h,this.roundCorner,0,0,this.roundCorner);
        }
        continue;
      }
      if(i===(this.items.length-1)){
        this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h,0,this.roundCorner,this.roundCorner,0);
        continue;
      }
      this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h);
    }
    this.pg.noStroke();
    this.pg.textAlign(this.p.CENTER,this.p.TOP);
    this.pg.textSize(_fontSize*3);
    for(let i=0;i<this.items.length;i++){
      if(this.value===i){ // is pressed (selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.pressed.text.r,this.colors.backlightOn.pressed.text.g,this.colors.backlightOn.pressed.text.b,this.colors.backlightOn.pressed.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.pressed.text.r,this.colors.backlightOff.pressed.text.g,this.colors.backlightOff.pressed.text.b,this.colors.backlightOff.pressed.text.a);
        }
      }else{ // is released (not selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.released.text.r,this.colors.backlightOn.released.text.g,this.colors.backlightOn.released.text.b,this.colors.backlightOn.released.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.released.text.r,this.colors.backlightOff.released.text.g,this.colors.backlightOff.released.text.b,this.colors.backlightOff.released.text.a);
        }
      }
      this.pg.text(this.items[i].iconAsUnicode,this.items[i].x+this.items[i].w*0.5,this.items[i].y);
    }
    this.pg.textAlign(this.p.CENTER,this.p.BOTTOM);
    this.pg.textSize(_fontSize);
    for(let i=0;i<this.items.length;i++){
      if(this.value===i){ // is pressed (selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.pressed.text.r,this.colors.backlightOn.pressed.text.g,this.colors.backlightOn.pressed.text.b,this.colors.backlightOn.pressed.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.pressed.text.r,this.colors.backlightOff.pressed.text.g,this.colors.backlightOff.pressed.text.b,this.colors.backlightOff.pressed.text.a);
        }
      }else{ // is released (not selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.released.text.r,this.colors.backlightOn.released.text.g,this.colors.backlightOn.released.text.b,this.colors.backlightOn.released.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.released.text.r,this.colors.backlightOff.released.text.g,this.colors.backlightOff.released.text.b,this.colors.backlightOff.released.text.a);
        }
      }
      this.pg.text(this.items[i].label,this.items[i].x+this.items[i].w*0.5,this.items[i].y+this.items[i].h-3);
    }
  }
}
class SimpleRadio{
  constructor(_x,_y,_w,_h,_orient,_value,_label){
    this.p=null; this.pg=null; this.isEnabled=true; this.changeTime={millis:-1,frameCount:-1};
    this.id=-1;this.verticalTextRotation=-90;this.outlineStrokeWeight=1;
    this.x=_x;this.y=_y;this.w=_w;this.h=_h;this.orientation=_orient;
    this.label=_label;this.items=[];//this.setValue(_value);
    this.roundCorner=3; this.isBacklighted=false;
    this.colors={
      backlightOn:{
        outline:{r:30,g:225,b:255,a:255},
        pressed:{
          background:{r:30,g:70,b:100,a:205},
          text:{r:255,g:255,b:255,a:205}
        },
        released:{
          background:{r:30,g:70,b:100,a:255},
          text:{r:255,g:255,b:255,a:255}
        }
      },
      backlightOff:{
        outline:{r:30,g:225,b:255,a:220},
        pressed:{
          background:{r:30,g:70,b:100,a:170},
          text:{r:255,g:255,b:255,a:170}
        },
        released:{
          background:{r:30,g:70,b:100,a:220},
          text:{r:255,g:255,b:255,a:230}
        }
      }
    };
  }
  setItems(_items){
    // orientation not handled yet
    for(let i=0;i<_items.length;i++){
      this.items[i]={
        label:_items[i].label, //iconAsUnicode:_items[i].iconAsUnicode,
        x:(this.x+this.w*i),y:this.y,w:this.w,h:this.h
      };
    }
    this.w*=this.items.length;
  }
  hitTest(_x,_y){if((_x>=this.x)&&(_y>=this.y)&&(_x<(this.x+this.w))&&(_y<(this.y+this.h))&&this.isEnabled) return true; return false;}
  hitTestAllItems(_x,_y){
    if(!this.isEnabled) return -1;
    for(let i=0;i<this.items.length;i++){
      if((_x>=this.items[i].x)&&(_y>=this.items[i].y)&&(_x<(this.items[i].x+this.items[i].w))&&(_y<(this.items[i].y+this.items[i].h))) return i;
    }
    return -1;
  }
  broadcast(){this.onChange(this.id,this.value);}
  onChange(_id, _v){console.log("GUI id: "+_id+" label: "+this.label+" value: "+_v+" millis: "+this.changeTime.millis+" frameCount: "+this.changeTime.frameCount);}
  setValue(_v){
    if(isNaN(_v)){console.log("[SimpleRadio, setValue] _v is NaN: "+_v); return;}
    _v=Math.floor(_v);
    if(_v<0){console.log("[SimpleRadio, setValue] _v < 0, _v: "+_v); return;}
    if(_v>=this.items.length){console.log("[SimpleRadio, setValue] _v >= items.length, _v: "+_v); return;}
    this.value=_v;
    if(this.p){this.changeTime.frameCount=this.p.frameCount; this.changeTime.millis=this.p.millis();}
    if(this.id>=0) this.onChange(this.id,this.value);
  }
  getValue(){return this.value;}
  setLabel(_label){this.label=_label;}
  getLabel(){return this.label;}
  draw(_fontName,_fontSize){
    // draw bg
    this.pg.noStroke();
    for(let i=0;i<this.items.length;i++){
      if(this.value===i){ // is pressed (selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.pressed.background.r,this.colors.backlightOn.pressed.background.g,this.colors.backlightOn.pressed.background.b,this.colors.backlightOn.pressed.background.a);
        }else{
          this.pg.fill(this.colors.backlightOff.pressed.background.r,this.colors.backlightOff.pressed.background.g,this.colors.backlightOff.pressed.background.b,this.colors.backlightOff.pressed.background.a);
        }
      }else{ // is released (not selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.released.background.r,this.colors.backlightOn.released.background.g,this.colors.backlightOn.released.background.b,this.colors.backlightOn.released.background.a);
        }else{
          this.pg.fill(this.colors.backlightOff.released.background.r,this.colors.backlightOff.released.background.g,this.colors.backlightOff.released.background.b,this.colors.backlightOff.released.background.a);
        }
      }
      if(i===0){
        if(this.items.length===1){
          this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
        }else{
          this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h,this.roundCorner,0,0,this.roundCorner);
        }
        continue;
      }
      if(i===(this.items.length-1)){
        this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h,0,this.roundCorner,this.roundCorner,0);
        continue;
      }
      this.pg.rect(this.items[i].x,this.items[i].y,this.items[i].w,this.items[i].h);
    }
    this.pg.noStroke();
    //this.pg.textAlign(this.p.CENTER,this.p.TOP); this.pg.textSize(_fontSize*3);
    /*
    for(let i=0;i<this.items.length;i++){
      if(this.value===i){ // is pressed (selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.pressed.text.r,this.colors.backlightOn.pressed.text.g,this.colors.backlightOn.pressed.text.b,this.colors.backlightOn.pressed.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.pressed.text.r,this.colors.backlightOff.pressed.text.g,this.colors.backlightOff.pressed.text.b,this.colors.backlightOff.pressed.text.a);
        }
      }else{ // is released (not selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.released.text.r,this.colors.backlightOn.released.text.g,this.colors.backlightOn.released.text.b,this.colors.backlightOn.released.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.released.text.r,this.colors.backlightOff.released.text.g,this.colors.backlightOff.released.text.b,this.colors.backlightOff.released.text.a);
        }
      }
      this.pg.text(this.items[i].iconAsUnicode,this.items[i].x+this.items[i].w*0.5,this.items[i].y);
    }
    */
    this.pg.textAlign(this.p.CENTER,this.p.CENTER); this.pg.textSize(_fontSize);
    for(let i=0;i<this.items.length;i++){
      if(this.value===i){ // is pressed (selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.pressed.text.r,this.colors.backlightOn.pressed.text.g,this.colors.backlightOn.pressed.text.b,this.colors.backlightOn.pressed.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.pressed.text.r,this.colors.backlightOff.pressed.text.g,this.colors.backlightOff.pressed.text.b,this.colors.backlightOff.pressed.text.a);
        }
      }else{ // is released (not selected)
        if(this.isBacklighted){
          this.pg.fill(this.colors.backlightOn.released.text.r,this.colors.backlightOn.released.text.g,this.colors.backlightOn.released.text.b,this.colors.backlightOn.released.text.a);
        }else{
          this.pg.fill(this.colors.backlightOff.released.text.r,this.colors.backlightOff.released.text.g,this.colors.backlightOff.released.text.b,this.colors.backlightOff.released.text.a);
        }
      }
      this.pg.text(this.items[i].label,this.items[i].x+this.items[i].w*0.5,this.items[i].y+this.items[i].h*0.5);
    }
    this.pg.noFill(); this.pg.strokeWeight(this.outlineStrokeWeight);
    if(this.isBacklighted)
      this.pg.stroke(this.colors.backlightOn.outline.r,this.colors.backlightOn.outline.g,this.colors.backlightOn.outline.b,this.colors.backlightOn.outline.a);
    else
      this.pg.stroke(this.colors.backlightOff.outline.r,this.colors.backlightOff.outline.g,this.colors.backlightOff.outline.b,this.colors.backlightOff.outline.a);
      this.pg.rect(this.x,this.y,this.w,this.h,this.roundCorner,this.roundCorner,this.roundCorner,this.roundCorner);
  }
}
								

									midi.js
									class Midi{
    constructor(){
        this.isEnabled=false;
        this.inputPortIndex=-1;this.outputPortIndex=-1;this.inputPort=null;this.outputPort=null;
    }
    init(_inputPortIndex,_outputPortIndex){
        if(!isNaN(_inputPortIndex)) this.inputPortIndex=Math.floor(_inputPortIndex);
        if(!isNaN(_outputPortIndex)) this.outputPortIndex=Math.floor(_outputPortIndex);
        WebMidi.enable().then(()=>{this.onMidiEnabled()}).catch(_err=>this.onMidiNotAvailable(_err));
    }
    onMidiNotAvailable(_err){this.isEnabled=false;console.log("[Midi, onMidiNotAvailable] WebMIDI is not available: "+_err);/*alert(_e);*/};
    onMidiEnabled(){
        this.printMidiPorts();
        if(this.inputPortIndex<0){
            console.log("[Midi, onMidiEnabled] no MIDI input port is selected (input port index < 0)");
        }else{
            if(this.inputPortIndex<WebMidi.inputs.length){
                this.inputPort=WebMidi.inputs[this.inputPortIndex];
                if(this.onNoteOn) this.inputPort.addListener('noteon', 'all', (_midiEvent)=>this.onNoteOn(_midiEvent));
                if(this.onNoteOff) this.inputPort.addListener('noteoff', 'all', (_midiEvent)=>this.onNoteOff(_midiEvent));
                if(this.onCC) this.inputPort.addListener('controlchange', 'all', (_midiEvent)=>this.onCC(_midiEvent));
                if(this.onClock) this.inputPort.addListener('clock', 'all', (_midiEvent)=>this.onClock(_midiEvent));
                if(this.onStart) this.inputPort.addListener('start', 'all', (_midiEvent)=>this.onStart(_midiEvent));
                if(this.onStop) this.inputPort.addListener('stop', 'all', (_midiEvent)=>this.onStop(_midiEvent));
                if(this.onContinue) this.inputPort.addListener('continue', 'all', (_midiEvent)=>this.onContinue(_midiEvent));
                console.log("[Midi, onMidiEnabled] selected MIDI input port is: ("+this.inputPortIndex+") "+ this.inputPort.name);
            }else{console.log("[Midi, onMidiEnabled] selected MIDI input port index is out of range: "+this.inputPortIndex);}
        }
        if(this.outputPortIndex<0){
            console.log("[Midi, onMidiEnabled] no MIDI output port is selected (output port index < 0)");
        }else{
            if(this.outputPortIndex<WebMidi.outputs.length){
                this.outputPort=WebMidi.outputs[this.outputPortIndex];
                console.log("[Midi, onMidiEnabled] selected MIDI output port is: ("+this.outputPortIndex+") "+ this.outputPort.name);
            }else{console.log("[Midi, onMidiEnabled] selected MIDI output port index is out of range: "+this.outputPortIndex);}
        }
        this.isEnabled=true;
    }
    onNoteOn(_midiEvent){console.log(_midiEvent);};
    onNoteOff(_midiEvent){console.log(_midiEvent);};
    onCC(_midiEvent){console.log();};
    onClock(_midiEvent){console.log(_midiEvent);};
    onStart(_midiEvent){console.log(_midiEvent);};
    onContinue(_midiEvent){console.log(_midiEvent);};
    onStop(_midiEvent){console.log(_midiEvent);};
    sendCC(_ctrl,_val,_chn){this.outputPort.sendControlChange(_ctrl,_val,_chn);} // ctrl: 0-127, val: 0-127 chn: 1-16
    sendMidiNoteOn(_pitch,_amp,_chn){this.outputPort.sendNoteOn(_pitch,{attack:_amp,channels:[_chn]});} // chn: 1-16
    sendMidiNoteOff=function(_pitch,_chn){this.outputPort.sendNoteOff(_pitch,{channels:[_chn]});} // chn: 1-16
    sendMidiNote=function(_pitch,_amp,_chn){if(_amp>0.0) this.sendMidiNoteOn(_pitch,_amp,_chn); else this.sendMidiNoteOff(_pitch,_chn);} // chn: 1-16
    printMidiPorts(){
        console.log("WebMIDI enabled.");
        console.log("**** MIDI input ports ****");
        for(let i=0;i<WebMidi.inputs.length;i++) console.log(i+" "+WebMidi.inputs[i].name);
        console.log("**** MIDI output ports ****");
        for(let i=0;i<WebMidi.outputs.length;i++) console.log(i+" "+WebMidi.outputs[i].name);
        if(WebMidi.inputs.length<1&&WebMidi.outputs.length<1) console.log("The browser appears to support MIDI, but no MIDI device is detected.");
    }
}
								

									ws.js
									// https://github.com/chr15m/pd-ws

class WS{
  constructor(){this.isEnabled=false; this.address="ws://localhost:9001/"; this.websocket=null;}
  init(_address,_handler){
    this.address=_address;
    this.websocket = new WebSocket(this.address);
    this.websocket.onmessage=function(_msg){_handler(_msg);}
    this.websocket.onopen=()=>{console.log("[WS, init, onopen] connected"); this.isEnabled=true;};
    this.websocket.onclose=()=>{console.log("[WS, init, onclose] disconnected"); this.isEnabled=false;};
    this.websocket.onerror=(_err)=>{console.log("[WS, init, onerror] "+_err);};
  }
  safeSend(_arr){if(this.isEnabled) this.send(_arr);} 
  send(_arr){this.websocket.send(_arr);} // ws.send(["hello", 42, "beep"])
}
								