Painting by Light

interaction and light (and darkness)
Preview: default camera Preview: back camera
Parameters
gui		hide / show the GUI
lang		set the interface language
pointer		hide / show the mouse pointer
alpha		transparency (0 - completely transparent objects, 255 - no transparency)
blend		color blending method: 0 - overlay ("BLEND"), 1 - additive ("ADD")
colpicker		method for determining the center of a moving object: 0 - center of "mass", 1 - geometrically defined center
colsrc		image from which colors are sourced: 0 - enhanced image, 1 - background image
cut		normalized threshold for the minimum brightness of pixels considered in motion detector operation
displaymode		display mode: 0 - unprocessed image and detected moving objects, 1 - enhanced image with dark objects filtered out and detected moving objects, 2 - background image and detected moving objects, 3 - difference image (between current image and background) and detected moving objects, 4 - binary representation of the difference image and detected moving objects, 5 - light painting (final effect)
fade		duration for object fade-out
feedback		intensity of feedback for the background image
mirror		mirorr the camera image
mul		normalized enhancement level (brightness boost) of the image
points		number of vertices for the polygon representing a moving object
polys		normalized size corresponding to the maximum number of objects on the screen
synth		disables/enables the internal sound synthesizer
threshold		brightness threshold above which a pixel is treated as containing motion information
ttl		normalized duration for objects to remain on the screen
vol		volume of the built-in synthesizer
Description
“Painting by Light” is a web-based version of the interactive installation of the same title by Dominika Sobolewska and Paweł Janicki. The original version of “Painting with Light” was premiered as part of the “Interactive Playground” exhibition (Patrycja Mastej, Dominika Sobolewska, Paweł Janicki) — opening the new WRO Art Center in 2008.
The work explores several important and interesting issues: non-semantic interaction (mutual and with the work) with multiple people simultaneously, the use of light/color/darkness as fundamental visual qualities, and the use of code as the material of art. Traditionally, exhibition versions of “Painting with Light” — and there’s nothing stopping you from using the same strategy at home — use various light-emitting objects (toys, ordinary, inspection, and workshop lamps, etc.), establishing a relationship to objects closer to readymades and performance art than to a staged approach and “props.”
Technical documentation
Parameters passed via URL

alpha 0 … 255; default 255; transparency (0 – completely transparent objects, 255 – no transparency)
blend 0 or 1; default 0; color blending method: 0 – overlay (“BLEND”), 1 – additive (“ADD”)
colpicker 0 or 1; default 1; method for determining the center of a moving object: 0 – center of “mass”, 1 – geometrically determined center
colsrc 0 or 1; default 0; image from which colors are taken: 0 – amplified image, 1 – background image
cut 0.0 … 1.0; default 0.01; normalized threshold of minimum pixel brightness considered by the motion detector
displaymode 0 … 5; default 5; display mode: 0 – unprocessed image and detected moving objects, 1 – amplified and dark-object-filtered image and detected moving objects, 2 – background and detected moving objects, 3 – differential image (between current image and background) and detected moving objects, 4 – binary representation of differential image and detected moving objects, 5 – light painting (final effect)
fade 1 … 10; default 3; object fade-out time
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)
feedback 0.0 … 1.0; default 0.5; feedback intensity for the background image
gui 0 or 1; default 1; hides/shows the graphical user interface panel
h vertical camera resolution
lang en or pl; default pl; sets the content language of the installation (additional languages can be added)
midioutchnoldblobs 1 … 16; default 2; MIDI channel number on which messages related to objects detected by the motion detector are sent
midioutchnoldblobs 1 … 16; default 3; MIDI channel number on which messages related to objects transitioning to the fade-out state are sent
midioutport disabled by default; MIDI port number for external control of Miniature (sending messages)
mirror 0 or 1; default 1; disables/enables mirroring of the image from the capture device (usually a camera)
mul 0.0 … 1.0; default 0.1; normalized amplification level (brightness boost) of the image
pointer 0 or 1; default 1; hides/shows the mouse cursor
points 3 … 20; default 8; number of points of the polygon representing a moving object
polys 0.0 … 1.0; default 0.5; normalized size corresponding to the maximum number of objects on the screen
synth 0 or 1; default 1; disables/enables the internal sound generator
threshold 0.0 … 1.0; default 0.5; brightness threshold above which a pixel is considered to contain motion information
ttl 0.0 … 1.0; default 0.3; normalized time objects remain on screen
vol 0.0 … 1.0; default 0.63; volume of the built-in synthesizer
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
not applicable
Messages sent by Miniature
pbl new new objects (detected by the motion detector): x (normalized horizontal position) y (normalized vertical position) s (normalized size)
pbl old objects transitioning to the fade-out phase: x (normalized horizontal position) y (normalized vertical position) s (normalized size)
MIDI

Messages to which Miniature responds
not applicable
Messages sent by Miniature
note on/off on channel 2 (default channel can be changed via URL parameters) two notes with pitch calculated based on the horizontal and vertical coordinates of an object detected by the motion detector; on channel 3 (default channel can be changed via URL parameters) two notes with pitch calculated based on the horizontal and vertical coordinates of an object transitioning to the fade-out phase;
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 name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta charset="utf-8">
  <meta name="description" content="Painting by Light">
  <meta name="keywords" content="computer vision, music, audio, sound, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <style>body {padding:0;margin:0;}</style>
  <title>Malowanie Światłem (Painting by Light), Pawel Janicki, 2008-25, https://paweljanicki.jp</title>
  <script src="shaders.js"></script>
  <script src="https://unpkg.com/tone"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
  <script src="synth.js"></script>
  <script src="midi.js"></script>
  <script src="p5.vida.js"></script>
  <script src="pbl.js"></script>
  <script src="gui.js"></script>
  <script src="ws.js"></script>
  <script src="sketch.js" type="module"></script>

</head>

<body>
</body>

</html>
								

									sketch.js
									function detectMax(){try{window.max.outlet('Hello Max!');return true;}catch(_e){console.log('Max, where are you? '+_e);} return false;}
let s=function(p){
  let pbl = new PbL(p);
  let gesturalInterface={
    isActive:true,
    capture:{processor:null, proxyGfx:null, shader:{origCtx:null,dstCtx:null,params:{threshold:0.01,mul_rgb:[1.0,1.0,1.0]}}, w:160, h:120, flip:true},
    coords:{x:-1,y:-1,w:-1,h:-1},
    vida:{
      progressiveBackgroundFlag:true,
      imageFilterFeedback:0.9,
      imageFilterThreshold:0.1,
      handleBlobsFlag:true,
      normMinBlobMass:0.0001,
      normMaxBlobMass:0.2,
      normMinBlobArea:0.0001,
      normMaxBlobArea:0.2,
      trackBlobsFlag:false,
      handleActiveZonesFlag:false,
      trackBlobsMaxNormDist:0.3,
      mirror:Vida.MIRROR_NONE,
      rejectBlobsMethod:Vida.REJECT_INNER_BLOBS,
      approximateBlobPolygonsFlag:true,
      pointsPerApproximatedBlobPolygon:8,
      processor:(new Vida(p))
    }
  };
  let theme={
    bgColor:{r:0,g:0,b:0},imageToDisplay:1,preset:-1,
    pointer:true,techDisplayModeFlag:false,speakerIcon:null,
  };
  let midi={
    isActive:false,
    processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1,
    channels:{in:-1,out:{old:2,new:3}},
    memory:{old:[],new:[],dur:200},
    clock:{},
    ccmap:{
      in:{},
      out:{}
    }
  };
  let synth = new Synth(p);
  let useWorker =false;
  let guiContainer={
    urlParamsProxy:{
      imageFilterFeedback:0.5, imageFilterThreshold:0.5, pointsPerApproximatedBlobPolygon:8,
      vol:0.63, alpha:255, polygonttl:0.3, colorPicker:0,
      displayMode:5, fade:3, colorSourceImage:1,//0-proxy,1-background
      normNumOfPolys:0.33, mulrgb:0.33
    },
    isGuiAlwaysOff:false,
    gui:null, isActive:true, lock:-1, lang:'en',
    handlers:{
      toVolSlider:{id:-1,label:{en:'vol',pl:'głośność'}},
      toColorSourceSelector:{id:-1,label:{en:'color source',pl:'źródło koloru'}},
      toImageFilterFeedbackSlider:{id:-1,label:{en:'feedback',pl:'feedback'}},
      toImageFilterThresholdSlider:{id:-1,label:{en:'threshold',pl:'próg'}},
      toImageShaderAmpSlider:{id:-1,label:{en:'image amp',pl:'wzmocnienie'}},
      toImageShaderCutSlider:{id:-1,label:{en:'min brightness',pl:'minimalna jasność'}},
      toPolygontTTLSlider:{id:-1,label:{en:'polygon TTL',pl:'czas trwania'}},
      toFadeFrameModuloValSlider:{id:-1,label:{en:'fade lag',pl:'czas zanikania'}},
      toNumOfPolygonsSlider:{id:-1,label:{en:'polygons',pl:'ilość wieloboków'}},
      toPointsPerPolygonSlider:{id:-1,label:{en:'points',pl:'ilość punktów'}},
      toDisplayModeSelector:{id:-1,label:{en:'display mode',pl:'tryb wyświetlania'}},
      toColorPickerSelector:{id:-1,label:{en:'color picker',pl:'próbnik koloru'}},
      toBlendModeSelector:{id:-1,label:{en:'blend mode',pl:'tryb koloru'}},
      toTransparencySlider:{id:-1,label:{en:'alpha',pl:'alpha'}}
    },
    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:[],
  };
  const maxIsDetected=detectMax();
  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.preload=function(){theme.speakerIcon=p.loadImage("speaker-svgrepo-com.svg");};
  p.setup=function(){
    p.handleUrlParams(); p.createCanvas(10,10,p.WEBGL);
    for(let i=0;i<128;i++){midi.memory.new[i]=-1;midi.memory.old[i]=-1;}
    try{this._renderer.GL.disable(this._renderer.GL.DEPTH_TEST);console.log("[p.setup] depth test disabled");}catch(_err){console.log("[p.setup] disabling depth test error: "+_err);}
    p.initGesturalInterface(); p.initGui(); p.initWebSocket(); p.initMax(); p.initMidi();
    p.transferUrlParamsProxyStorageToGui();
    guiContainer.gui.forceBroadcast(); if((!theme.pointer)&&(!guiContainer.isActive)) p.noCursor();
    if(guiContainer.isActive) guiContainer.gui.setBackgroundPanelVisibility(true);
    //if(maxIsDetected){}
    if(window.DeviceOrientationEvent){window.addEventListener("deviceorientation",p.onOrientationChange);}
    if(theme.preset===0) p.presetZones(); if(theme.preset===1) p.presetBlobs();
    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.handleWorker=function(){p.redraw();}
  p.draw=function(){
    if((p.width!=innerWidth)||p.height!=innerHeight){p.handleResize();}
    p.setBackground(p,theme.bgColor.r,theme.bgColor.g,theme.bgColor.b,true);
    p.updateGesturalInterface();
    if(theme.techDisplayModeFlag) p.drawGesturalInterface(true, true, false); else p.drawGesturalInterface(false, false, true); // _drawImageFlag,_drawRawBlobsAndZonesFlag,_drawPblFlag
    if(synth.isActive&&synth.audioEnabled){
      synth.clearSoundsCounter();
      for(let i=0;i<pbl.messages.length;i++){
        switch(pbl.messages[i][0]){
          case "new": synth.newBlobSound(pbl.messages[i]); break;
          case "old": synth.oldBlobSound(pbl.messages[i]); break;
          default: console.log("[p.draw] unhandled pbl.messages[i][0]: "+pbl.messages[i][0]);
        }
      }
    }
    p.updateMidi();
    guiContainer.gui.draw();
    if(synth.isActive&&(!synth.audioEnabled))p.drawMutedIcon();
  };
  p.drawMutedIcon=function(){
    let tf1=1.0+Math.sin(p.millis()*0.01)*0.2;
    let tf2=1.0+Math.sin(p.millis()*0.017)*0.1;
    let tf3=p.millis()*0.0001;
    let sz=p.width; if(p.width>p.height) sz=p.height;
    let scl=sz/theme.speakerIcon.width*0.4;
    p.push();
      p.translate(-0.5*p.width,-0.5*p.height);
      p.noStroke(); p.fill(128,128); p.rect(0,0,p.width,p.height);
      p.fill(30,70,255,128);p.circle(
        p.width*0.5,
        p.height*0.5,
        theme.speakerIcon.width*scl*1.1*tf2
      );
      p.image(
        theme.speakerIcon,
        p.width*0.5-theme.speakerIcon.width*scl*0.5*tf2,
        p.height*0.5-theme.speakerIcon.height*scl*0.5*tf2,
        theme.speakerIcon.width*scl*tf2,
        theme.speakerIcon.height*scl*tf2
      );
      p.noFill();p.stroke(255,0,0,128);p.strokeWeight(10);
      p.push();
        p.translate(p.width*0.5,p.height*0.5);
        p.rotate(tf3);
        p.line(
          -theme.speakerIcon.width*scl*0.6*tf1,
          -theme.speakerIcon.width*scl*0.6*tf1,
          theme.speakerIcon.width*scl*0.6*tf1,
          theme.speakerIcon.width*scl*0.6*tf1
        );
      p.pop();
      //p.noStroke(); p.fill(128,128); p.rect(0,0,p.width,p.height);
      //let size=p.width; if(p.width>p.height) size=p.height; size*=0.2;
      //p.textAlign(p.CENTER,p.CENTER);
      //p.fill(255,128); p.textSize(size*0.5); p.text("tap",p.width*0.5,p.height*0.5-size);
      //p.fill(0,255); p.textSize(size); p.text("🔇",p.width*0.5,p.height*0.5);
    p.pop();
  };
  p.touchStarted=function(_touchEvent){
    let changedTouches=p.huskChangedTouches(_touchEvent);
    for(let i=0;i<changedTouches.length;i++) p.unifiedTactileEventPressed(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
    return false;
  }
  p.touchMoved=function(_touchEvent){
    let changedTouches=p.huskChangedTouches(_touchEvent);
    for(let i=0;i<changedTouches.length;i++) p.unifiedTactileEventDragged(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
    return false;
  }
  p.touchEnded=function(_touchEvent){
    let changedTouches=p.huskChangedTouches(_touchEvent);
    for(let i=0;i<changedTouches.length;i++) p.unifiedTactileEventReleased(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
    return false;
  }
  p.doubleClicked=function(){return false;};
  p.mouseClicked=function(){return false;};
  p.mouseMoved=function(){if(guiContainer.gui) guiContainer.gui.moveIdlePointer(p.mouseX,p.mouseY); return false;};
  p.mouseDragged=function(){p.unifiedTactileEventDragged(p.mouseX,p.mouseY,0); return false;};
  p.mousePressed=function(){p.unifiedTactileEventPressed(p.mouseX,p.mouseY,0); return false;};
  p.mouseReleased=function(){p.unifiedTactileEventReleased(p.mouseX,p.mouseY,0); return false;};
  p.mouseWheel=function(){return false;};
  p.onOrientationChange=function(){p.fullscreen(true);};
  p.handleResize=function(){
    p.resizeCanvas(innerWidth,innerHeight);
    if(gesturalInterface.isActive){
      let f=gesturalInterface.capture.w/gesturalInterface.capture.h;
      gesturalInterface.coords.w=p.width; gesturalInterface.coords.h=p.width/f;
      if(gesturalInterface.coords.h<p.height){
        gesturalInterface.coords.h=p.height; gesturalInterface.coords.w=p.height*f;
      }
      gesturalInterface.coords.x=0.5*(p.width-gesturalInterface.coords.w);
      gesturalInterface.coords.y=0.5*(p.height-gesturalInterface.coords.h);
      console.log("[p.handleResize] coords (x,y,w,h): "+gesturalInterface.coords.x+" "+gesturalInterface.coords.y+" "+gesturalInterface.coords.w+" "+gesturalInterface.coords.h);
    }
  };
  p.huskChangedTouches=function(_touchEvent){
    let result=[]; let ct=_touchEvent.changedTouches; let ctl=_touchEvent.changedTouches.length;
    for(let i=0;i<ctl;i++){let t=ct.item(i);result[result.length]={id:t.identifier,x:t.clientX,y:t.clientY};}
    return result;
  };
  p.unifiedTactileEventDragged=function(_pixx,_pixy,_eventid){
    guiContainer.gui.dragPointer(_pixx,_pixy);
    //magnets.touchMoved(_pixx,_pixy,_eventid);
  };
  p.unifiedTactileEventClicked=function(){
    if(synth.isActive&&(!synth.audioEnabled)){synth.init();return;}
    if(!guiContainer.isGuiAlwaysOff){
      if(guiContainer.isActive){
        if(guiContainer.lock<0){
          if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){guiContainer.gui.disableAllItems();guiContainer.gui.setBackgroundPanelVisibility(false);guiContainer.isActive=false;}
        }
      }else{
        guiContainer.gui.enableAllItems(); guiContainer.gui.setBackgroundPanelVisibility(true); guiContainer.isActive=true;
        //if((midi.isEnabled&&midi.inputPort)||(maxIsDetected&&midi.isMaxMidiEnabled)) guiContainer.gui.disableItemAccessedById(guiContainer.handlers.toMidiNoteSelector.id);
      }
    }
  }
  p.unifiedTactileEventPressed=function(_pixx,_pixy,_eventid){
    //if(synth.isActive){synth.processor.init();guiContainer.gui.forceBroadcast();}
    guiContainer.lock=guiContainer.gui.lockPointer(_pixx,_pixy);
    //magnets.touchStarted(_pixx,_pixy,_eventid);
    //theme.imageToDisplay+=1; if(theme.imageToDisplay>6) theme.imageToDisplay=0;
  };
  p.unifiedTactileEventReleased=function(_pixx,_pixy,_eventid){
    p.unifiedTactileEventClicked();
    guiContainer.gui.unlockPointer(_pixx,_pixy);
    //magnets.touchReleased(_pixx,_pixy,_eventid);
  };
  p.initGesturalInterface=function(){
    gesturalInterface.capture.proxyGfx=p.createGraphics(gesturalInterface.capture.w,gesturalInterface.capture.h,p.WEBGL);gesturalInterface.capture.proxyGfx.background(0,0,128);
    gesturalInterface.capture.processor=p.createCapture(p.VIDEO,{flipped:gesturalInterface.capture.flip});
    gesturalInterface.capture.processor.size(gesturalInterface.capture.w,gesturalInterface.capture.h);
    gesturalInterface.capture.processor.hide();
    gesturalInterface.capture.shader.origCtx=p.createFilterShader(captureColorCorrectorShaderTxt);
    gesturalInterface.capture.shader.dstCtx=gesturalInterface.capture.shader.origCtx.copyToContext(gesturalInterface.capture.proxyGfx);
    p.transferGesturalInterfaceConfigToVida();
    pbl.init(gesturalInterface.capture.processor.width,gesturalInterface.capture.processor.height);
  };
  p.transferUrlParamsProxyStorageToGui=function(){
    guiContainer.gui.items[guiContainer.handlers.toImageFilterFeedbackSlider.id].setValue(guiContainer.urlParamsProxy.imageFilterFeedback);
    guiContainer.gui.items[guiContainer.handlers.toImageFilterThresholdSlider.id].setValue(guiContainer.urlParamsProxy.imageFilterThreshold);
    guiContainer.gui.items[guiContainer.handlers.toPointsPerPolygonSlider.id].setValue(guiContainer.urlParamsProxy.pointsPerApproximatedBlobPolygon);
    guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setValue(guiContainer.urlParamsProxy.vol);
    guiContainer.gui.items[guiContainer.handlers.toTransparencySlider.id].setValue(guiContainer.urlParamsProxy.alpha);
    guiContainer.gui.items[guiContainer.handlers.toFadeFrameModuloValSlider.id].setValue(guiContainer.urlParamsProxy.fade);
    guiContainer.gui.items[guiContainer.handlers.toPolygontTTLSlider.id].setValue(guiContainer.urlParamsProxy.polygonttl);
    guiContainer.gui.items[guiContainer.handlers.toColorPickerSelector.id].setValue(guiContainer.urlParamsProxy.colorPicker);
    guiContainer.gui.items[guiContainer.handlers.toImageShaderAmpSlider.id].setValue(guiContainer.urlParamsProxy.mulrgb);
  };
  p.presetZones=function(){
    gesturalInterface.vida.processor.addActiveZone(0, 0.1, 0.3, 0.2, 0.3);
    gesturalInterface.vida.processor.addActiveZone(1, 0.4, 0.3, 0.2, 0.3);
    gesturalInterface.vida.processor.addActiveZone(2, 0.7, 0.3, 0.2, 0.3);
    gesturalInterface.vida.handleActiveZonesFlag=true;
    p.transferGesturalInterfaceConfigToVida();
  }
  p.presetBlobs=function(){
    gesturalInterface.vida.handleBlobsFlag=true;
    p.transferGesturalInterfaceConfigToVida();
  }
  p.transferGesturalInterfaceConfigToVida=function(){
    gesturalInterface.vida.processor.progressiveBackgroundFlag=gesturalInterface.vida.progressiveBackgroundFlag;
    gesturalInterface.vida.processor.imageFilterFeedback=gesturalInterface.vida.imageFilterFeedback;
    gesturalInterface.vida.processor.imageFilterThreshold=gesturalInterface.vida.imageFilterThreshold;
    gesturalInterface.vida.processor.handleActiveZonesFlag=gesturalInterface.vida.handleActiveZonesFlag;
    gesturalInterface.vida.processor.handleBlobsFlag=gesturalInterface.vida.handleBlobsFlag;
    gesturalInterface.vida.processor.normMinBlobMass=gesturalInterface.vida.normMinBlobMass;
    gesturalInterface.vida.processor.normMaxBlobMass=gesturalInterface.vida.normMaxBlobMass;
    gesturalInterface.vida.processor.normMinBlobArea=gesturalInterface.vida.normMinBlobArea;
    gesturalInterface.vida.processor.normMaxBlobArea=gesturalInterface.vida.normMaxBlobArea;
    gesturalInterface.vida.processor.trackBlobsFlag=gesturalInterface.vida.trackBlobsFlag;
    gesturalInterface.vida.processor.trackBlobsMaxNormDist=gesturalInterface.vida.trackBlobsMaxNormDist;
    gesturalInterface.vida.processor.mirror=gesturalInterface.vida.mirror;
    gesturalInterface.vida.processor.rejectBlobsMethod=gesturalInterface.vida.rejectBlobsMethod;
    gesturalInterface.vida.processor.approximateBlobPolygonsFlag=gesturalInterface.vida.approximateBlobPolygonsFlag;
    gesturalInterface.vida.processor.pointsPerApproximatedBlobPolygon=gesturalInterface.vida.pointsPerApproximatedBlobPolygon; 
  };
  p.updateMidi=function(){
    if((!midi.isActive)||(!midi.processor)||(midi.outputPortIndex<0)) return; if(!midi.processor.isEnabled) return;
    let t=p.millis();
    if(midi.channels.out.new>=0){
      for(let i=0;i<128;i++){
        if(midi.memory.new[i]<0) continue;
        if((t-midi.memory.new[i])>midi.memory.dur) midi.processor.sendMidiNote(i,0.0,midi.channels.out.new);
      }
    }
    if(midi.channels.out.old>=0){
      for(let i=0;i<128;i++){
        if(midi.memory.old[i]<0) continue;
        if((t-midi.memory.old[i])>midi.memory.dur) midi.processor.sendMidiNote(i,0.0,midi.channels.out.old);
      }
    }
  }
  p.updateGesturalInterface=function(){
    if(gesturalInterface.isActive&&gesturalInterface.capture.processor){
      gesturalInterface.capture.proxyGfx.image(gesturalInterface.capture.processor,-0.5*gesturalInterface.capture.proxyGfx.width,-0.5*gesturalInterface.capture.proxyGfx.height);
      gesturalInterface.capture.shader.dstCtx.setUniform('thresh',gesturalInterface.capture.shader.params.threshold);
      gesturalInterface.capture.shader.dstCtx.setUniform('u_mul_rgb',gesturalInterface.capture.shader.params.mul_rgb);
      gesturalInterface.capture.proxyGfx.filter(gesturalInterface.capture.shader.dstCtx);
      //gesturalInterface.capture.proxyGfx.rect(0,0,gesturalInterface.capture.proxyGfx.width,gesturalInterface.capture.proxyGfx.height);  
      gesturalInterface.vida.processor.update(gesturalInterface.capture.proxyGfx);
      switch(guiContainer.urlParamsProxy.colorSourceImage){
        case 0: pbl.updateWithVidaBlobs(gesturalInterface.capture.proxyGfx,gesturalInterface.coords,gesturalInterface.vida.processor.getBlobs(),gesturalInterface.capture.shader.params.threshold); break;
        case 1: pbl.updateWithVidaBlobs(gesturalInterface.vida.processor.backgroundImage,gesturalInterface.coords,gesturalInterface.vida.processor.getBlobs(),gesturalInterface.capture.shader.params.threshold); break;
        default: console.log("[p.updateGesturalInterface] unhandled theme.colorSourceImage: "+theme.colorSourceImage);
      }
      // web socket
      if(webSocket.isActive&&webSocket.processor){
        if(webSocket.processor.isEnabled){
          if(gesturalInterface.vida.processor.handleBlobsFlag){
            for(let i=0;i<pbl.messages.length;i++) webSocket.processor.safeSend(["pbl",pbl.messages[i][0],pbl.messages[i][1],pbl.messages[i][2],pbl.messages[i][3]]); // old/new,normx,normy,norm_size
          }
        }
      }
      // max
      if(maxIsDetected){
        if(gesturalInterface.vida.processor.handleBlobsFlag){
          for(let i=0;i<pbl.messages.length;i++) window.max.outlet("pbl",pbl.messages[i][0],pbl.messages[i][1],pbl.messages[i][2],pbl.messages[i][3]); // old/new,normx,normy,norm_size
        }
      }
      // MIDI
      if(midi.isActive&&midi.processor&&(midi.outputPortIndex>=0)){
        if(midi.processor.isEnabled){
          let t=p.millis(); let p1,p2;
          for(let i=0;i<pbl.messages.length;i++){
            p1=synth.normValToMidiPitch(pbl.messages[i][1]);
            p2=synth.normValToMidiPitch(pbl.messages[i][2]);
            if(pbl.messages[i][0]==='old'){
              if(midi.channels.out.old>=0){
                if(midi.memory.old[p1]>=0) midi.processor.sendMidiNote(p1,0.0,midi.channels.out.old);
                midi.processor.sendMidiNote(p1,1.0,midi.channels.out.old);
                midi.memory.old[p1]=t;
                if(midi.memory.old[p2]>=0) midi.processor.sendMidiNote(p2,0.0,midi.channels.out.old);
                midi.processor.sendMidiNote(p2,1.0,midi.channels.out.old);
                midi.memory.old[p2]=t;
              }
            }else{//new
              if(midi.channels.out.new>=0){
                if(midi.memory.new[p1]>=0) midi.processor.sendMidiNote(p1,0.0,midi.channels.out.new);
                midi.processor.sendMidiNote(p1,1.0,midi.channels.out.new);
                midi.memory.new[p1]=t;
                if(midi.memory.new[p2]>=0) midi.processor.sendMidiNote(p2,0.0,midi.channels.out.new);
                midi.processor.sendMidiNote(p2,1.0,midi.channels.out.new);
                midi.memory.new[p2]=t;
              }
            }
          }
        }
      }
    }
  };
  p.drawGesturalInterface=function(_drawImageFlag,_drawRawBlobsAndZonesFlag,_drawPblFlag){
    p.push();
      p.translate(-p.width*0.5,-p.height*0.5,0);
      if(_drawImageFlag){
        switch(theme.imageToDisplay){
          case 0: break;
          case 1: p.image(gesturalInterface.capture.processor,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
          case 2: p.image(gesturalInterface.capture.proxyGfx,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
          case 3: p.image(gesturalInterface.vida.processor.currentImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
          case 4: p.image(gesturalInterface.vida.processor.backgroundImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
          case 5: p.image(gesturalInterface.vida.processor.differenceImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
          case 6: p.image(gesturalInterface.vida.processor.thresholdImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
        }
      }
      if(_drawPblFlag) pbl.draw(gesturalInterface.capture.proxyGfx,gesturalInterface.coords);
      if(gesturalInterface.vida.handleBlobsFlag&&_drawRawBlobsAndZonesFlag) gesturalInterface.vida.processor.simpleDrawBlobs(p,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h);
      if(gesturalInterface.vida.handleActiveZonesFlag&&_drawRawBlobsAndZonesFlag) gesturalInterface.vida.processor.simpleDrawZones(p,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h);
    p.pop();
  };
  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);};
      //midi.processor.onNoteOn=function(_midiEvent){p.handleIncomingMidiNoteOnMessages(_midiEvent);}; // _midiEvent.note.number, _midiEvent.message.channel // _midiEvent.note.attack
      //midi.processor.onNoteOff=function(_midiEvent){p.handleIncomingMidiNoteOffMessages(_midiEvent);};
      //midi.processor.onClock=function(_midiEvent){if((midi.ticks%midi.ticksperframe)===0) p.updateCA(); midi.ticks+=1;};
      //midi.processor.onStart=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(true);};
      //midi.processor.onContinue=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(true);};
      //midi.processor.onStop=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(false);};
    }
  };
  p.initGui=function(){
    //guiContainer.gui = new GUI(p,false);
    guiContainer.gui = new GUI(p,true,360,395,true);guiContainer.gui.setBackgroundPanelRect(20,20,335,370,5);
    guiContainer.gui.backgroundPanel.color.r=127;guiContainer.gui.backgroundPanel.color.g=127;guiContainer.gui.backgroundPanel.color.b=127;guiContainer.gui.backgroundPanel.color.a=127;
    // vol
    let gui_sld_vol = new SimpleSlider(30,360,315,20,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.75,guiContainer.getLabelByLang(guiContainer.handlers.toVolSlider));
    gui_sld_vol.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','vol',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','vol',_v]);}
      synth.setVol(_v);
    };
    guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
    // display mode
    let gui_sr_dsplmode = new SimpleRadio(30,330,50,20,GUI.ORIENTATION_HORIZONTAL,0,guiContainer.getLabelByLang(guiContainer.handlers.toDisplayModeSelector));
    switch(guiContainer.lang){
      case "pl":
        gui_sr_dsplmode.setItems([
          {label:"in"},
          {label:"proc"},
          {label:"bg"},
          {label:"diff"},
          {label:"bin"},
          {label:"PbL"}
        ]);
        gui_sr_dsplmode.setValue(guiContainer.urlParamsProxy.displayMode);
      break;
      case "en":
        gui_sr_dsplmode.setItems([
          {label:"in"},
          {label:"proc"},
          {label:"bg"},
          {label:"diff"},
          {label:"bin"},
          {label:"PbL"},
        ]);
        gui_sr_dsplmode.setValue(guiContainer.urlParamsProxy.displayMode);
      break;
      default: console.log("[p.initGui] unhandled guiContainer.lang: "+guiContainer.lang);
    }
    gui_sr_dsplmode.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','displaymode',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','displaymode',_v]);}
      theme.displayMode=_v;
      switch(_v){
        case 0: // in
          theme.techDisplayModeFlag=true;theme.imageToDisplay=1;
        break;
        case 1: // proc
          theme.techDisplayModeFlag=true;theme.imageToDisplay=3;
        break;
        case 2: // bg
          theme.techDisplayModeFlag=true;theme.imageToDisplay=4;
        break;
        case 3: // diff
          theme.techDisplayModeFlag=true;theme.imageToDisplay=5;
        break;
        case 4: // bin
          theme.techDisplayModeFlag=true;theme.imageToDisplay=6;
        break;
        case 5: // pbl
          theme.techDisplayModeFlag=false;theme.imageToDisplay=0;
        break;
        default: console.log("[gui_sr_dsplmode.onChange] unhandled _v: "+_v);
      }
    };
    guiContainer.handlers.toDisplayModeSelector.id=guiContainer.gui.addItem(gui_sr_dsplmode);
    // blob alpha
    let gui_sld_alpha = new SimpleSlider(30,300,315,20,GUI.ORIENTATION_HORIZONTAL,false,0,255,255,guiContainer.getLabelByLang(guiContainer.handlers.toTransparencySlider));
    gui_sld_alpha.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','alpha',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','alpha',_v]);}
      pbl.blobAlpha=_v;
    };
    guiContainer.handlers.toTransparencySlider.id=guiContainer.gui.addItem(gui_sld_alpha);
    // color source
    let gui_sr_colsrc = new SimpleRadio(30,270,45,20,GUI.ORIENTATION_HORIZONTAL,0,guiContainer.getLabelByLang(guiContainer.handlers.toColorSourceSelector));
    switch(guiContainer.lang){
      case "pl":
        gui_sr_colsrc.setItems([
          {label:"kam"},
          {label:"tło"},
        ]);
        gui_sr_colsrc.setValue(guiContainer.urlParamsProxy.colorSourceImage);
      break;
      case "en":
        gui_sr_colsrc.setItems([
          {label:"cap"},
          {label:"bg"},
        ]);
        gui_sr_colsrc.setValue(guiContainer.urlParamsProxy.colorSourceImage);
      break;
      default: console.log("[p.initGui] unhandled guiContainer.lang: "+guiContainer.lang);
    }
    gui_sr_colsrc.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','colorsource',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','colorsource',_v]);}
      //theme.displayMode=_v;
      switch(_v){
        case 0: // current image
          theme.colorSourceImage=0;
        break;
        case 1: // background image
          theme.colorSourceImage=1;
        break;
        default: console.log("[gui_sr_colsrc.onChange] unhandled _v: "+_v);
      }
    };
    guiContainer.handlers.toColorSourceSelector.id=guiContainer.gui.addItem(gui_sr_colsrc);
    // color picker
    let gui_sr_picker = new SimpleRadio(135,270,45,20,GUI.ORIENTATION_HORIZONTAL,0,guiContainer.getLabelByLang(guiContainer.handlers.toColorPickerSelector));
    switch(guiContainer.lang){
      case "pl":
        gui_sr_picker.setItems([
          {label:"masa"},
          {label:"geom"},
        ]);
        gui_sr_picker.setValue(pbl.colorDetectionMode);
      break;
      case "en":
        gui_sr_picker.setItems([
          {label:"mass"},
          {label:"geom"},
        ]);
        gui_sr_picker.setValue(pbl.colorDetectionMode);
      break;
      default: console.log("[p.initGui] unhandled guiContainer.lang: "+guiContainer.lang);
    }
    gui_sr_picker.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','colorpicker',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','colorpicker',_v]);}
      theme.displayMode=_v;
      switch(_v){
        case 0: pbl.colorDetectionMode=0; break; // mass
        case 1: pbl.colorDetectionMode=1; break; // geom
        default: console.log("[gui_sr_picker.onChange] unhandled _v: "+_v);
      }
    };
    guiContainer.handlers.toColorPickerSelector.id=guiContainer.gui.addItem(gui_sr_picker);
    // blend mode
    let gui_sr_blendmode = new SimpleRadio(242,270,45,20,GUI.ORIENTATION_HORIZONTAL,pbl.getNumericalBlendMode(),guiContainer.getLabelByLang(guiContainer.handlers.toBlendModeSelector));
    switch(guiContainer.lang){
      case "pl":
        gui_sr_blendmode.setItems([
          {label:"blend"},
          {label:"add"},
        ]);
        gui_sr_blendmode.setValue(pbl.getNumericalBlendMode());
      break;
      case "en":
        gui_sr_blendmode.setItems([
          {label:"blend"},
          {label:"add"},
        ]);
        gui_sr_blendmode.setValue(pbl.getNumericalBlendMode());
      break;
      default: console.log("[p.initGui] unhandled guiContainer.lang: "+guiContainer.lang);
    }
    gui_sr_blendmode.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','blendmode',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','blendmode',_v]);}
      switch(_v){
        case 0: pbl.setBlendMode('BLEND'); break;
        case 1: pbl.setBlendMode('ADD'); break;
        default: console.log("[gui_sr_blendmode.onChange] unhandled _v: "+_v);
      }
    };
    guiContainer.handlers.toBlendModeSelector.id=guiContainer.gui.addItem(gui_sr_blendmode);
    // fade modulo
    let gui_sld_fademodulo = new SimpleSlider(30,240,315,20,GUI.ORIENTATION_HORIZONTAL,false,1,10,3,guiContainer.getLabelByLang(guiContainer.handlers.toFadeFrameModuloValSlider));
    gui_sld_fademodulo.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','fadeframemodulo',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','fadeframemodulo',_v]);}
      pbl.transparentizeFramePeriod=_v;
    };
    guiContainer.handlers.toFadeFrameModuloValSlider.id=guiContainer.gui.addItem(gui_sld_fademodulo);
    // polygon TTL
    let gui_sld_polyttl = new SimpleSlider(30,210,315,20,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.33,guiContainer.getLabelByLang(guiContainer.handlers.toPolygontTTLSlider));
    gui_sld_polyttl.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','polygonttl',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','polygonttl',_v]);}
      pbl.setPolygonTTLWithNormVal(_v);
    };
    guiContainer.handlers.toPolygontTTLSlider.id=guiContainer.gui.addItem(gui_sld_polyttl);
    // max num of polygons
    let gui_sld_polys = new SimpleSlider(30,180,315,20,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,guiContainer.urlParamsProxy.normNumOfPolys,guiContainer.getLabelByLang(guiContainer.handlers.toNumOfPolygonsSlider));
    gui_sld_polys.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','maxnumofpolygons',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','maxnumofpolygons',_v]);}
      pbl.setMaxNumberOfPolygonsWithNormVal(_v);
    };
    guiContainer.handlers.toNumOfPolygonsSlider.id=guiContainer.gui.addItem(gui_sld_polys);
    // points per polygon
    let gui_sld_pntsperpoly = new SimpleSlider(30,150,315,20,GUI.ORIENTATION_HORIZONTAL,false,3,20,8,guiContainer.getLabelByLang(guiContainer.handlers.toPointsPerPolygonSlider));
    gui_sld_pntsperpoly.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','points',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','points',_v]);}
      gesturalInterface.vida.pointsPerApproximatedBlobPolygon=_v;
      p.transferGesturalInterfaceConfigToVida();
    };
    guiContainer.handlers.toPointsPerPolygonSlider.id=guiContainer.gui.addItem(gui_sld_pntsperpoly);
    // amp image
    let gui_sld_ampimg = new SimpleSlider(30,120,315,20,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,gesturalInterface.capture.shader.params.mul_rgb[0],guiContainer.getLabelByLang(guiContainer.handlers.toImageShaderAmpSlider));
    gui_sld_ampimg.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','ampimage',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','ampimage',_v]);}
      _v=_v*2.0+1.0;
      gesturalInterface.capture.shader.params.mul_rgb[0]=_v;gesturalInterface.capture.shader.params.mul_rgb[1]=_v;gesturalInterface.capture.shader.params.mul_rgb[2]=_v;
    };
    guiContainer.handlers.toImageShaderAmpSlider.id=guiContainer.gui.addItem(gui_sld_ampimg);
    // min brightness
    let gui_sld_cutshdr = new SimpleSlider(30,90,315,20,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,gesturalInterface.capture.shader.params.threshold,guiContainer.getLabelByLang(guiContainer.handlers.toImageShaderCutSlider));
    gui_sld_cutshdr.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','minbrightness',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','minbrightness',_v]);}
      gesturalInterface.capture.shader.params.threshold=_v;
    };
    guiContainer.handlers.toImageShaderCutSlider.id=guiContainer.gui.addItem(gui_sld_cutshdr);
    // threshold
    let gui_sld_thrshld = new SimpleSlider(30,60,315,20,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.5,guiContainer.getLabelByLang(guiContainer.handlers.toImageFilterThresholdSlider));
    gui_sld_thrshld.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','threshold',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','threshold',_v]);}
      gesturalInterface.vida.imageFilterThreshold=_v*0.2;
      p.transferGesturalInterfaceConfigToVida();
    };
    guiContainer.handlers.toImageFilterThresholdSlider.id=guiContainer.gui.addItem(gui_sld_thrshld);
    // feedback
    let gui_sld_fdbck = new SimpleSlider(30,30,315,20,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.5,guiContainer.getLabelByLang(guiContainer.handlers.toImageFilterFeedbackSlider));
    gui_sld_fdbck.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('pbl','feedback',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['pbl','feedback',_v]);}
      gesturalInterface.vida.imageFilterFeedback=0.85+_v*0.1;
      p.transferGesturalInterfaceConfigToVida();
    };
    guiContainer.handlers.toImageFilterFeedbackSlider.id=guiContainer.gui.addItem(gui_sld_fdbck);
    if(guiContainer.isActive) guiContainer.gui.enableAllItems(); else guiContainer.gui.disableAllItems();
  };
  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){
        //
      }else{
        if(arr.length===6){
          //
        }else{
          //
        }
      }
    });
  };
  p.initMax=function(){if(!maxIsDetected) return;}
  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("mirror" in urlparams){let v=parseInt(urlparams.mirror); if(!isNaN(v)){gesturalInterface.capture.flip=(v>0);} console.log("[p.handleUrlParams] mirror: "+(v>0));}
        if("famo" in urlparams){
          gesturalInterface.capture.facingMode=decodeURIComponent(urlparams.famo);
          gesturalInterface.capture.facingMode=gesturalInterface.capture.facingMode.toLowerCase();
          if(gesturalInterface.capture.facingMode==="env") gesturalInterface.capture.facingMode="environment";
          console.log("[p.handleUrlParams] camera facing mode: "+gesturalInterface.capture.facingMode);
        }
        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("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0);} console.log("[p.handleUrlParams] worker: "+useWorker);}
        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("feedback" in urlparams){
          let v=parseFloat(urlparams.feedback);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.urlParamsProxy.imageFilterFeedback=v; console.log("[p.handleUrlParams] vida feedback: "+v);
          }
        }
        if("threshold" in urlparams){
          let v=parseFloat(urlparams.threshold);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.urlParamsProxy.imageFilterThreshold=v; console.log("[p.handleUrlParams] vida threshold: "+v);
          }
        }
        if("points" in urlparams){
          let v=parseInt(urlparams.points);
          if(!isNaN(v)){
            if(v<0) v=0;
            gesturalInterface.urlParamsProxy.pointsPerApproximatedBlobPolygon=v; console.log("[p.handleUrlParams] vida points per polygon: "+v);
          }
        }
        if("vol" in urlparams){
          let v=parseFloat(urlparams.vol);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.urlParamsProxy.vol=v; console.log("[p.handleUrlParams] vol: "+v);
          }
        }
        if("displaymode" in urlparams){
          let v=parseInt(urlparams.displaymode);
          if(!isNaN(v)){
            if(v<0) v=0; if(v>5) v=5; v=Math.floor(v);
            gesturalInterface.urlParamsProxy.displayMode=v; console.log("[p.handleUrlParams] display mode: "+v);
          }
        }
        if("alpha" in urlparams){
          let v=parseFloat(urlparams.alpha);
          if(!isNaN(v)){
            if(v<0) v=0.0; if(v>255.0) v=255.0;
            gesturalInterface.urlParamsProxy.alpha=v; console.log("[p.handleUrlParams] alpha: "+v);
          }
        }
        if("colsrc" in urlparams){
          let v=parseInt(urlparams.colsrc);
          if(!isNaN(v)){
            if(v<0) v=0; if(v>1) v=1; v=Math.floor(v);
            gesturalInterface.urlParamsProxy.colorSourceImage=v; console.log("[p.handleUrlParams] color source: "+v);
          }
        }
        if("colpicker" in urlparams){
          let v=parseInt(urlparams.colpicker);
          if(!isNaN(v)){
            if(v<0) v=0; if(v>1) v=1; v=Math.floor(v);
            gesturalInterface.urlParamsProxy.colorPicker=v; console.log("[p.handleUrlParams] color detection mode (vel picker, vel centers): "+v);
          }
        }
        if("blend" in urlparams){
          let v=parseInt(urlparams.blend);
          if(!isNaN(v)){
            if(v<0) v=0; if(v>1) v=1; v=Math.floor(v);
            if(v===0) pbl.setBlendMode('BLEND'); else pbl.setBlendMode('ADD'); console.log("[p.handleUrlParams] blend mode: "+v);
          }
        }
        if("fade" in urlparams){
          let v=parseInt(urlparams.fade);
          if(!isNaN(v)){
            if(v<1) v=1; if(v>10) v=10; v=Math.floor(v);
            gesturalInterface.urlParamsProxy.fade=v; console.log("[p.handleUrlParams] fade modulo (fade period expressed in frames): "+v);
          }
        }
        if("ttl" in urlparams){
          let v=parseFloat(urlparams.ttl);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.urlParamsProxy.polygonttl=v; console.log("[p.handleUrlParams] fade modulo (fade period expressed in frames): "+v);
          }
        }
        if("cut" in urlparams){
          let v=parseFloat(urlparams.cut);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.capture.shader.params.threshold=v; console.log("[p.handleUrlParams] cut: "+v);
          }
        }
        if("mul" in urlparams){
          let v=parseFloat(urlparams.mul);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gui.urlParamsProxy.mulrgb=v; console.log("[p.handleUrlParams] mul rgb: "+v);
          }
        }
        if("polys" in urlparams){
          let v=parseFloat(urlparams.polys);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.urlParamsProxy.normNumOfPolys=v; console.log("[p.handleUrlParams] norm polys: "+v);
          }
        }
        if("synth" in urlparams){
          let v=parseInt(urlparams.synth);
          if(!isNaN(v)){
            v=(v>0);synth.isActive=v; console.log("[p.handleUrlParams] synth: "+v);
          }
        }
        //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.channels.in=(Math.abs(Math.floor(urlparams.midiinchn))%16); console.log("[p.handleUrlParams] MIDI input channel index: "+v);}}
        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("midioutchnoldblobs" in urlparams){if(!isNaN(urlparams.midioutchnoldblobs)){midi.channels.out.old=(Math.abs(Math.floor(urlparams.midioutchnoldblobs))%16); console.log("[p.handleUrlParams] MIDI output channel index for old blobs: "+v);}}
        if("midioutchnnewblobs" in urlparams){if(!isNaN(urlparams.midioutchnnewblobs)){midi.channels.out.new=(Math.abs(Math.floor(urlparams.midioutchnnewblobs))%16); console.log("[p.handleUrlParams] MIDI output channel index for new blobs: "+v);}}
        //if("midioutbarschn" in urlparams){if(!isNaN(urlparams.midioutbarschn)){midi.channels.outBars=(Math.abs(Math.floor(urlparams.midioutbarschn))%16);; console.log("[p.handleUrlParams] MIDI output channel index for bars data: "+v);}}
        if("w" in urlparams){let v=parseInt(urlparams.w); if(!isNaN(v)){if(v>0) gesturalInterface.capture.w=v; console.log("[p.handleUrlParams] gesturalInterface.capture.w: "+v);}}
        if("h" in urlparams){let v=parseInt(urlparams.h); if(!isNaN(v)){if(v>0) gesturalInterface.capture.h=v; console.log("[p.handleUrlParams] gesturalInterface.capture.h: "+v);}}
      }
    }catch(_e){console.log("[p.handleUrlParams] _e: "+_e);}
  };
  p.b2int=function(_v){return p.b2i(_v);};
  p.b2i=function(_v){if(_v) return 1; return 0;};
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

									p5.vida.js
									class VidaBlob{
  constructor(_p){
    this.__sketch=_p;
    this.normRectX = 0.0; this.normRectY = 0.0; this.normRectW = 0.0; this.normRectH = 0.0;
    this.normMassCenterX = 0.0; this.normMassCenterY = 0.0; this.normMass = 0.0;
    this.approximatedPolygon = [];
    this.creationTime = this.__sketch.millis();
    this.creationFrameCount = this.__sketch.frameCount;
    this.id = -1; this.__rawId = -1; this.isNewFlag = true;
  }
}
class VidaZone{
  constructor(_id, _normX, _normY, _normW, _normH, _onChangeCallbackFunction){
    this.normX = _normX; this.normY = _normY; this.normW = _normW; this.normH = _normH;
    this.isEnabledFlag = true; this.isMovementDetectedFlag = false;
    this.isChangedFlag = false; this.changedTime = 0; this.changedFrameCount = 0;
    this.normFillFactor = 0.0; this.normFillThreshold = 0.02; this.id = _id;
    this.onChange = _onChangeCallbackFunction;
  }
}
class Vida{
  static get MIRROR_NONE(){return 0;}
  static get MIRROR_VERTICAL(){return 1;}
  static get MIRROR_HORIZONTAL(){return 2;}
  static get MIRROR_BOTH(){return 3;}
  static get REJECT_NONE_BLOBS(){return 0;}
  static get REJECT_INNER_BLOBS(){return 1;}
  static get REJECT_OUTER_BLOBS(){return 2;}
  constructor(_p){
    this.__sketch=_p;
    this.__normRoi={normx:0.0,normy:0.0,normw:1.0,normh:1.0};
    this.mirror = Vida.MIRROR_NONE;
    this.progressiveBackgroundFlag = true;
    this.currentImage    = this.__sketch.createGraphics(10, 10);
    this.backgroundImage = this.__sketch.createImage(10, 10);
    this.differenceImage = this.__sketch.createImage(10, 10);
    this.thresholdImage  = this.__sketch.createImage(10, 10);
    this.imageFilterFeedback = 0.92;
    this.imageFilterThreshold = 0.4;
    this.__automaticPixelsDataTransferFlag = true;
    this.lastUpdateTime = 0; this.lastUpdateFrameCount = 0;
    this.__activeZonesNormFillThreshold = 0.02;
    this.handleActiveZonesFlag = false;
    this.activeZones = [];
    this.__currentBlobsLocation = 0; this.__previousBlobsLocation = 1;
    this.__blobs = [[],[]];
    this.handleBlobsFlag = false;
    this.rejectBlobsMethod = Vida.REJECT_NONE_BLOBS;
    this.trackBlobsFlag = false;
    this.trackBlobsMaxNormDist = 0.15;
    this.normMinBlobMass = 0.0002; this.normMaxBlobMass = 0.5;
    this.normMinBlobArea = 0.0002; this.normMaxBlobArea = 0.5;
    this.approximateBlobPolygonsFlag = false;
    this.pointsPerApproximatedBlobPolygon = 6;
    this.__blobMapArray = [];
    this.numberOfDetectedBlobs = 0;
    this.resizeBlobMapArray(this.thresholdImage.width, this.thresholdImage.height);
  }
  setRoi(_normx,_normy,_normw,_normh){this.__normRoi.normx=_normx;this.__normRoi.normy=_normy;this.__normRoi.normw=_normw;this.__normRoi.normh=_normh;}
  resizeGraphicsWorkaround(_g, _w, _h) {
    if(_g === null || _g === undefined) {
      _g = this.__sketch.createGraphics(_w, _h);
      _g.pixelDensity(1);
    }else{
      _g.width = _w; _g.height = _h; _g.elt.width = _w; _g.elt.height = _h;// * this._pInst._pixelDensity;
      _g.elt.style.width = _w + 'px'; _g.elt.style.height = _h + 'px';
      _g.pixelDensity(1); _g.loadPixels(); // console.log(_g.width);
      //_g.elt.style.width = _w +'px'; _g.elt.style.height = _h + 'px';
      _g.elt.setAttribute('style', 'display: none');
    }
    _g.updatePixels(); _g.background(0); _g.loadPixels();
    if(_w * _h !== _g.pixels.length / 4) {
      console.log(
        '[Vida, 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)
      );
    }
  }
  getBlobs(_location){
    if(arguments.length === 0) _location = this.__currentBlobsLocation;
    else
      if(
        _location !== this.__currentBlobsLocation && _location !== this.__previousBlobsLocation
      ){
        console.log(
          '[Vida, getBlobs] Unhandled _location parameter value: ' +
          _location + '. The _location value will be change to ' +
          this.__currentBlobsLocation + ' (' + this.__currentBlobsLocation + ').'
        );
        _location = this.__currentBlobsLocation;
      }
    return this.__blobs[_location];
  }
  getCurrentBlobsLocation(){return this.__currentBlobsLocation;}
  getPreviousBlobsLocation(){return this.__previousBlobsLocation;}
  resizeBlobMapArray(_w,_h){
    this.__blobMapArray.splice(0, this.__blobMapArray.length);
    for(let x=0;x<_w;x++) {
      let temp_column_array = [];
      for(let y=0;y<_h;y++) temp_column_array[y] = 0;
      this.__blobMapArray[x] = temp_column_array;
    }
  }
  resetBlobMapArray(){
    for(let y=0;y<this.thresholdImage.height;y++) for(let x=0;x<this.thresholdImage.width;x++) this.__blobMapArray[x][y] = 0;
  }
  hitTestThresholdImage(_norm_x, _norm_y){
    let temp_coord_x = Math.floor(_norm_x * this.thresholdImage.width);
    let temp_coord_y = Math.floor(_norm_y * this.thresholdImage.height);
    if(temp_coord_x < 0.0) return false;
    if(temp_coord_y < 0.0) return false;
    if(temp_coord_x >= this.thresholdImage.width) return false;
    if(temp_coord_y >= this.thresholdImage.height) return false;
    let temp_pixel_position = (temp_coord_y * this.thresholdImage.width + temp_coord_x) * 4;
    if(this.thresholdImage.pixels[temp_pixel_position] > 0) return true;
    return false;
  }
  setActiveZonesNormFillThreshold(_v){
    if(_v < 0.0) _v = 0.0; if(_v > 1.0) _v = 1.0; // safety first
    this.__activeZonesNormFillThreshold = _v; // momorize new threshold value
    // assigning a new threshold value to all existing active zones
    for(let i = 0; i < this.activeZones.length; i++) this.activeZones[i].normFillThreshold = this.__activeZonesNormFillThreshold;
  }
  getActiveZonesNormFillThreshold(){return this.__activeZonesNormFillThreshold;}
  addActiveZone(_id, _normX, _normY, _normW, _normH, _onChangeCallbackFunction){
    if(arguments.length === 5) _onChangeCallbackFunction = function(_activeZone) {};
    /*
    for(let i = 0; i < this.activeZones.length; i++)
      if(_id == this.activeZones[i].id)
        console.log(
          '[Vida, addActiveZone] There are already active zones with the same' +
          ' id: ' + _id
        );
    */
    if(_onChangeCallbackFunction === null || _onChangeCallbackFunction === undefined) _onChangeCallbackFunction = function(_activeZone) {};
    this.activeZones[this.activeZones.length] = new VidaZone(_id, _normX, _normY, _normW, _normH, _onChangeCallbackFunction);
  }
  removeAllActiveZones(){this.activeZones.splice(0,this.activeZones.length);}
  removeActiveZone(_id){
    for(let i=this.activeZones.length-1;i>=0;i--){if(_id===this.activeZones[i].id)this.activeZones.splice(i, 1);}
  }
  getActiveZone(_id){
    for(let i = 0; i < this.activeZones.length; i++){if(_id == this.activeZones[i].id) return this.activeZones[i];}
    return -1;
  }
  updateActiveZones(){
    let temp_coord_start_x, temp_coord_start_y, temp_coord_end_x, temp_coord_end_y,
        temp_pixel_position, temp_number_of_filled_pixels, temp_zone_area,
        temp_isMovementDetectedFlag;
    for(let i = 0; i < this.activeZones.length; i++){
      if(!this.activeZones[i].isEnabledFlag){
        this.activeZones[i].isChangedFlag = false;
        this.activeZones[i].isMovementDetectedFlag = false;
        continue;
      }
      temp_coord_start_x = Math.floor(this.activeZones[i].normX * this.thresholdImage.width);
      temp_coord_start_y = Math.floor(this.activeZones[i].normY * this.thresholdImage.height);
      temp_coord_end_x = Math.floor((this.activeZones[i].normX + this.activeZones[i].normW) * this.thresholdImage.width);
      temp_coord_end_y = Math.floor((this.activeZones[i].normY + this.activeZones[i].normH) * this.thresholdImage.height);
      //temp_zone_area = Math.floor(this.activeZones[i].normW * this.thresholdImage.width) + Math.floor(this.activeZones[i].normH * this.thresholdImage.height);
      temp_zone_area=(temp_coord_end_x-temp_coord_start_x+1)*(temp_coord_end_y-temp_coord_start_y+1);
      temp_number_of_filled_pixels = 0;
      for(let y = temp_coord_start_y; y <= temp_coord_end_y; y++) {
        for(let x = temp_coord_start_x; x <= temp_coord_end_x; x++) {
          temp_pixel_position = (y * this.thresholdImage.width + x) * 4;
          if(this.thresholdImage.pixels[temp_pixel_position] > 0) temp_number_of_filled_pixels += 1;
        }
      }
      this.activeZones[i].normFillFactor = temp_number_of_filled_pixels / temp_zone_area;
      if(this.activeZones[i].normFillFactor > this.activeZones[i].normFillThreshold)
        temp_isMovementDetectedFlag = true;
      else
        temp_isMovementDetectedFlag = false;
      if(temp_isMovementDetectedFlag !== this.activeZones[i].isMovementDetectedFlag){
        this.activeZones[i].isChangedFlag = true;
        this.activeZones[i].changedTime = this.__sketch.millis();
        this.activeZones[i].changedFrameCount = this.__sketch.frameCount;
        this.activeZones[i].isMovementDetectedFlag = temp_isMovementDetectedFlag;
        this.activeZones[i].onChange(this.activeZones[i]);
      }else{
        this.activeZones[i].isChangedFlag = false;
      }
      //console.log(this.activeZones[i].normFillFactor);
    }
  }
  update(_image) {
    if(this.updateImageProcessor(_image)) {
      if(this.handleActiveZonesFlag) this.updateActiveZones();
      if(this.handleBlobsFlag) this.updateBlobs();
      this.lastUpdateTime = this.__sketch.millis();
      this.lastUpdateFrameCount = this.__sketch.frameCount;
    }
    else {
      console.log(
        '[Vida, update] something went wrong. Probably the ' +
        'updateImageProcessor function call failed.'
      );
    }
  }
  setBackgroundImage(_image){
    if(_image === null) {console.log('[Vida, setBackgroundImage] error: _image === null'); return false;}
    if(_image.width < 1 || _image.height < 1) {
      console.log(
        '[Vida, setBackgroundImage] possible error: resolution of the _image ' +
        'seems to be incorrect: _image.width = ' + _image.width +
        ' _image.height = ' + _image.height + '.'
      );
      return false;
    }
    if(_image.width != this.backgroundImage.width || _image.height != this.backgroundImage.height) {
      console.log('[Vida, setBackgroundImage] adjusting images size to: ' + _image.width + ' ' + _image.height);
      this.resizeGraphicsWorkaround(this.currentImage, _image.width, _image.height);
      this.backgroundImage.resize(_image.width, _image.height);
      this.differenceImage.resize(_image.width, _image.height);
      this.thresholdImage.resize(_image.width, _image.height);
      this.resizeBlobMapArray(_image.width, _image.height);
    }
    if(this.__automaticPixelsDataTransferFlag){_image.loadPixels();this.backgroundImage.loadPixels();this.differenceImage.loadPixels();}
    switch(this.mirror) {
      case Vida.MIRROR_NONE:
        this.backgroundImage.copy(
          _image,
          0, 0, _image.width, _image.height, 0, 0, _image.width, _image.height
        );
      break;
      case Vida.MIRROR_HORIZONTAL:
        this.currentImage.push();
          this.currentImage.scale(-1, 1);
          this.currentImage.image(_image, -this.currentImage.width, 0);
        this.currentImage.pop();
        this.backgroundImage.copy(
          this.currentImage,
          0, 0, _image.width, _image.height, 0, 0, _image.width, _image.height
        );
      break;
      case Vida.MIRROR_VERTICAL:
        this.currentImage.push();
          this.currentImage.scale(1, -1);
          this.currentImage.image(_image, 0, -this.currentImage.height);
        this.currentImage.pop();
        this.backgroundImage.copy(
          this.currentImage,
          0, 0, _image.width, _image.height, 0, 0, _image.width, _image.height
        );
      break;
      case Vida.MIRROR_BOTH:
      this.currentImage.push();
        this.currentImage.scale(-1, -1);
        this.currentImage.image(
          _image, -this.currentImage.width, -this.currentImage.height
        );
      this.currentImage.pop();
      this.backgroundImage.copy(
        this.currentImage,
        0, 0, _image.width, _image.height, 0, 0, _image.width, _image.height
      );
      break;
      default: console.log('[Vida, setBackgroundImage] unhandled mirror value: ' + this.mirror);
    }
  }
  updateImageProcessor(_image){
    if(_image === null) {console.log('[Vida, updateImageProcessor] error: _image === null'); return false;}
    if(_image.width < 1 || _image.height < 1) {
      console.log(
        '[Vida, updateImageProcessor] possible error: resolution of the _image '
        + 'seems to be incorrect: _image.width = ' + _image.width +
        ' _image.height = ' + _image.height + '.'
      );
      return false;
    }
    if( _image.width != this.backgroundImage.width||_image.height != this.backgroundImage.height){
      console.log('[Vida, updateImageProcessor] adjusting images size to: ' + _image.width + ' ' + _image.height);
      this.resizeGraphicsWorkaround(this.currentImage, _image.width, _image.height);
      this.backgroundImage.resize(_image.width, _image.height);
      this.differenceImage.resize(_image.width, _image.height);
      this.thresholdImage.resize(_image.width, _image.height);
      this.resizeBlobMapArray(_image.width, _image.height);
    }
    if(this.__automaticPixelsDataTransferFlag){ _image.loadPixels();this.backgroundImage.loadPixels();this.differenceImage.loadPixels();}
    switch(this.mirror) {
      case Vida.MIRROR_NONE:
        this.currentImage.image(_image, 0, 0);
      break;
      case Vida.MIRROR_HORIZONTAL:
        this.currentImage.push();
          this.currentImage.scale(-1, 1);
          this.currentImage.image(_image, -this.currentImage.width, 0);
        this.currentImage.pop();
      break;
      case Vida.MIRROR_VERTICAL:
        this.currentImage.push();
          this.currentImage.scale(1, -1);
          this.currentImage.image(_image, 0, -this.currentImage.height);
        this.currentImage.pop();
      break;
      case Vida.MIRROR_BOTH:
      this.currentImage.push();
        this.currentImage.scale(-1, -1);
        this.currentImage.image(
          _image, -this.currentImage.width, -this.currentImage.height
        );
      this.currentImage.pop();
      break;
      default: console.log('[Vida, updateImageProcessor] unhandled mirror value: ' + this.mirror);
    }
    let temp_imageFilterFeedback_flipped = 1.0 - this.imageFilterFeedback;
    if(this.__automaticPixelsDataTransferFlag) this.currentImage.loadPixels();
    if(this.progressiveBackgroundFlag) {
      for(let i = 0; i < this.backgroundImage.pixels.length; i += 4) {
        this.backgroundImage.pixels[i] =
          this.backgroundImage.pixels[i] * this.imageFilterFeedback +
          this.currentImage.pixels[i] * temp_imageFilterFeedback_flipped;
        this.backgroundImage.pixels[i + 1] =
          this.backgroundImage.pixels[i + 1] * this.imageFilterFeedback +
          this.currentImage.pixels[i + 1] * temp_imageFilterFeedback_flipped;
        this.backgroundImage.pixels[i + 2] =
          this.backgroundImage.pixels[i + 2] * this.imageFilterFeedback +
          this.currentImage.pixels[i + 2] * temp_imageFilterFeedback_flipped;
        this.backgroundImage.pixels[i + 3] = 255;
        this.differenceImage.pixels[i] = Math.abs(this.backgroundImage.pixels[i] - this.currentImage.pixels[i]);
        this.differenceImage.pixels[i + 1] = Math.abs(this.backgroundImage.pixels[i + 1] - this.currentImage.pixels[i + 1]);
        this.differenceImage.pixels[i + 2] = Math.abs(this.backgroundImage.pixels[i + 2] - this.currentImage.pixels[i + 2]);
        this.differenceImage.pixels[i + 3] = 255;
      }
    }
    else {
      for(let i = 0; i < this.backgroundImage.pixels.length; i += 4) {
        this.differenceImage.pixels[i] = Math.abs(this.backgroundImage.pixels[i] - this.currentImage.pixels[i]);
        this.differenceImage.pixels[i + 1] = Math.abs(this.backgroundImage.pixels[i + 1] - this.currentImage.pixels[i + 1]);
        this.differenceImage.pixels[i + 2] = Math.abs(this.backgroundImage.pixels[i + 2] - this.currentImage.pixels[i + 2]);
        this.differenceImage.pixels[i + 3] = 255;
      }
    }
    if(this.__automaticPixelsDataTransferFlag) {this.backgroundImage.updatePixels();}
    if(this.__automaticPixelsDataTransferFlag) this.differenceImage.updatePixels();
    // copy this.differenceImage to this.thresholdImage
    this.thresholdImage.copy(
      this.differenceImage,
      0, 0, this.currentImage.width, this.currentImage.height,
      0, 0, this.differenceImage.width, this.differenceImage.height
    );
    // process the image to create final b/w threshold image
    this.thresholdImage.filter(this.__sketch.THRESHOLD, this.imageFilterThreshold);
    // load pixel data if needed
    if(this.__automaticPixelsDataTransferFlag) this.thresholdImage.loadPixels();
    return true; // return "true" on the end
  }
  findBlobIndexById(_location, _id) {
    for(let i = 0; i < this.__blobs[_location].length; i++) if(this.__blobs[_location][i].id === _id) return i;
    return -1;
  }
  findFirstFreeId(_location) {
    let temp_result = 0; var temp_b = true;
    while(temp_b) {
      temp_b = false;
      for(let i = 0; i < this.__blobs[_location].length; i++) {
        if(this.__blobs[_location][i].id === temp_result) {
          temp_b = true; temp_result += 1; break;
        }
      }
    }
    return temp_result;
  }
  trackBlobs(){
    if(this.__blobs[this.__previousBlobsLocation].length < 1) {
      for(let i = 0; i < this.numberOfDetectedBlobs; i++) this.__blobs[this.__currentBlobsLocation][i].id = i;
    }else{
      for(let i = 0; i < this.__blobs[this.__previousBlobsLocation].length; i++)
        if(this.__blobs[this.__previousBlobsLocation][i].id < 0) this.__blobs[this.__previousBlobsLocation][i].id = this.findFirstFreeId(this.__previousBlobsLocation);
    }
    let temp_dist, temp_index; var temp_distances = [];
    for(let i = 0; i < this.numberOfDetectedBlobs; i++) {this.__blobs[this.__currentBlobsLocation][i].id = -1; temp_distances[i] = 10.0;}
    for(let i = 0; i < this.numberOfDetectedBlobs; i++){
      for(let j = 0; j < this.__blobs[this.__previousBlobsLocation].length; j++){
        temp_dist = Math.sqrt(
          Math.pow(
            this.__blobs[this.__previousBlobsLocation][j].normMassCenterX - 
              this.__blobs[this.__currentBlobsLocation][i].normMassCenterX,
            2
          ) +
          Math.pow(
            this.__blobs[this.__previousBlobsLocation][j].normMassCenterY - 
              this.__blobs[this.__currentBlobsLocation][i].normMassCenterY,
            2
          )
        );
        if(temp_dist < temp_distances[i] && temp_dist < this.trackBlobsMaxNormDist) {
          temp_distances[i] = temp_dist;
          this.__blobs[this.__currentBlobsLocation][i].id = this.__blobs[this.__previousBlobsLocation][j].id;
        }
      }
    }
    for(let i = 0; i < this.numberOfDetectedBlobs; i++) {
      for(let j = 0; j < this.numberOfDetectedBlobs; j++) {
        if(i === j) continue;
        if(this.__blobs[this.__currentBlobsLocation][i].id < 0) continue;
        if(this.__blobs[this.__currentBlobsLocation][j].id < 0) continue;
        if(
          this.__blobs[this.__currentBlobsLocation][i].id !==
          this.__blobs[this.__currentBlobsLocation][j].id
        ) continue;
        if(temp_distances[i] > temp_distances[j])
          this.__blobs[this.__currentBlobsLocation][i].id = -1;
        else
          this.__blobs[this.__currentBlobsLocation][j].id = -1;
      }
    }
    for(let i = 0; i < this.numberOfDetectedBlobs; i++){
      if(this.__blobs[this.__currentBlobsLocation][i].id >= 0) continue;
      temp_distances[i] = 10.0;
      for(let j = 0; j < this.__blobs[this.__previousBlobsLocation].length; j++) {
        if(this.findBlobIndexById(this.__currentBlobsLocation,this.__blobs[this.__previousBlobsLocation][j].id) >= 0) continue;
        temp_dist = Math.sqrt(
          Math.pow(this.__blobs[this.__previousBlobsLocation][j].normMassCenterX-this.__blobs[this.__currentBlobsLocation][i].normMassCenterX,2) +
          Math.pow(this.__blobs[this.__previousBlobsLocation][j].normMassCenterY-this.__blobs[this.__currentBlobsLocation][i].normMassCenterY,2)
        );
        if(temp_dist < temp_distances[i] && temp_dist < this.trackBlobsMaxNormDist){
          temp_distances[i] = temp_dist;
          this.__blobs[this.__currentBlobsLocation][i].id = this.__blobs[this.__previousBlobsLocation][j].id;
        }
      }
    }
    for(let i = 0; i < this.numberOfDetectedBlobs; i++) {
      for(let j = 0; j < this.numberOfDetectedBlobs; j++) {
        if(i === j) continue;
        if(this.__blobs[this.__currentBlobsLocation][i].id < 0) {
          this.__blobs[this.__currentBlobsLocation][i].id =
            this.findFirstFreeId(this.__currentBlobsLocation);
          continue;
        }
        if(this.__blobs[this.__currentBlobsLocation][j].id < 0) {
          this.__blobs[this.__currentBlobsLocation][j].id = this.findFirstFreeId(this.__currentBlobsLocation);
          continue;
        }
        if(
          this.__blobs[this.__currentBlobsLocation][i].id !== this.__blobs[this.__currentBlobsLocation][j].id
        ) continue;
        if(temp_distances[i] > temp_distances[j])
          this.__blobs[this.__currentBlobsLocation][i].id = this.findFirstFreeId(this.__currentBlobsLocation);
        else
          this.__blobs[this.__currentBlobsLocation][j].id = this.findFirstFreeId(this.__currentBlobsLocation);
      }
    }
    for(let i = 0; i < this.numberOfDetectedBlobs; i++) {
      temp_index = this.findBlobIndexById(this.__previousBlobsLocation,this.__blobs[this.__currentBlobsLocation][i].id);
      if(temp_index < 0) continue;
      this.__blobs[this.__currentBlobsLocation][i].creationTime = this.__blobs[this.__previousBlobsLocation][temp_index].creationTime;
      this.__blobs[this.__currentBlobsLocation][i].creationFrameCount = this.__blobs[this.__previousBlobsLocation][temp_index].creationFrameCount;
      this.__blobs[this.__currentBlobsLocation][i].isNewFlag = false;
    }
  }
  approximateBlobPolygons(){
    let temp_2PI = Math.PI * 2;
    let temp_radius_1, temp_radius_2, temp_angle, temp_sin_angle, temp_cos_angle, temp_center_x, temp_center_y, temp_x, temp_y;
    if(this.pointsPerApproximatedBlobPolygon < 3) {
      console.log(
        '[Vida, approximateBlobPolygons] ' +
        'Minumum valid value of pointsPerApproximatedBlobPolygon is 3 ' +
        '(currently: ' +
        this.pointsPerApproximatedBlobPolygon + '). The value will be set to 3'
      );
      this.pointsPerApproximatedBlobPolygon = 3;
    } else {
      if(
        Math.floor(this.pointsPerApproximatedBlobPolygon) !==
        Math.ceil(this.pointsPerApproximatedBlobPolygon)
      ) {
        console.log(
          '[Vida, approximateBlobPolygons] ' +
          'The variable pointsPerApproximatedBlobPolygon should be of the ' +
          'integer type, not a float. Current value ' +
          this.pointsPerApproximatedBlobPolygon + ' will be changed to' +
          Math.floor(this.pointsPerApproximatedBlobPolygon) + '.'
        );
        this.pointsPerApproximatedBlobPolygon =
          Math.floor(this.pointsPerApproximatedBlobPolygon)
      }
    }
    // iterate over detected blobs
    for(let i = 0; i < this.numberOfDetectedBlobs; i++) {
      temp_radius_1 = Math.sqrt(
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectX - this.__blobs[this.__currentBlobsLocation][i].normMassCenterX) * this.thresholdImage.width, 2) +
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectY - this.__blobs[this.__currentBlobsLocation][i].normMassCenterY) * this.thresholdImage.height, 2)
      );
      temp_radius_2 = Math.sqrt(
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectX + this.__blobs[this.__currentBlobsLocation][i].normRectW - this.__blobs[this.__currentBlobsLocation][i].normMassCenterX) * this.thresholdImage.width, 2) +
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectY - this.__blobs[this.__currentBlobsLocation][i].normMassCenterY) * this.thresholdImage.height, 2)
      );
      if(temp_radius_1 < temp_radius_2) temp_radius_1 = temp_radius_2;
      // right bottom corner
      temp_radius_2 = Math.sqrt(
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectX + this.__blobs[this.__currentBlobsLocation][i].normRectW - this.__blobs[this.__currentBlobsLocation][i].normMassCenterX) * this.thresholdImage.width, 2) +
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectY + this.__blobs[this.__currentBlobsLocation][i].normRectH - this.__blobs[this.__currentBlobsLocation][i].normMassCenterY) * this.thresholdImage.height, 2)
      );
      if(temp_radius_1 < temp_radius_2) temp_radius_1 = temp_radius_2;
      // left bottom corner
      temp_radius_2 = Math.sqrt(
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectX - this.__blobs[this.__currentBlobsLocation][i].normMassCenterX) * this.thresholdImage.width, 2) +
        Math.pow((this.__blobs[this.__currentBlobsLocation][i].normRectY + this.__blobs[this.__currentBlobsLocation][i].normRectH - this.__blobs[this.__currentBlobsLocation][i].normMassCenterY) * this.thresholdImage.height, 2)
      );
      if(temp_radius_1 < temp_radius_2) temp_radius_1 = temp_radius_2;
      temp_radius_1 = Math.floor(temp_radius_1);
      temp_center_x = Math.floor(this.__blobs[this.__currentBlobsLocation][i].normMassCenterX * this.thresholdImage.width);
      temp_center_y = Math.floor(this.__blobs[this.__currentBlobsLocation][i].normMassCenterY * this.thresholdImage.height);
      for(let j = 0; j < this.pointsPerApproximatedBlobPolygon; j++) {
        temp_angle = j / this.pointsPerApproximatedBlobPolygon * temp_2PI;
        temp_sin_angle = Math.sin(temp_angle); temp_cos_angle = Math.cos(temp_angle);
        for(let r = temp_radius_1; r >= 0; r--) {
          temp_x = Math.floor(temp_center_x + r * temp_cos_angle);
          temp_y = Math.floor(temp_center_y + r * temp_sin_angle);
          if(temp_x < 0) {
            temp_x = 0;
          } else {
            if(temp_x >= this.thresholdImage.width)
              temp_x = this.thresholdImage.width - 1;
          }
          if(temp_y < 0) {
            temp_y = 0;
          } else {
            if(temp_y >= this.thresholdImage.height)
              temp_y = this.thresholdImage.height - 1;
          }
          if(this.__blobMapArray[temp_x][temp_y] === this.__blobs[this.__currentBlobsLocation][i].__rawId) break;
        }
        this.__blobs[this.__currentBlobsLocation][i].approximatedPolygon[j] = {normX: temp_x / this.thresholdImage.width, normY: temp_y / this.thresholdImage.height};
      }
    }
  }
  rejectInnerBlobs(){let b=true;while(b){b=this.__rejectInnerBlobs();}}
  __rejectInnerBlobs(){
    for(let i = this.numberOfDetectedBlobs - 1; i >= 0; i--) {
      for(let j = this.numberOfDetectedBlobs - 1; j >= 0; j--) {
        if(i === j) continue;
        if(
          this.__blobs[this.__currentBlobsLocation][j].normRectX <
          this.__blobs[this.__currentBlobsLocation][i].normRectX
        ) continue;
        if(
          this.__blobs[this.__currentBlobsLocation][j].normRectY <
          this.__blobs[this.__currentBlobsLocation][i].normRectY
        ) continue;
        if(
          this.__blobs[this.__currentBlobsLocation][j].normRectX +
          this.__blobs[this.__currentBlobsLocation][j].normRectW <
          this.__blobs[this.__currentBlobsLocation][i].normRectX +
          this.__blobs[this.__currentBlobsLocation][i].normRectW
        ) continue;
        if(
          this.__blobs[this.__currentBlobsLocation][j].normRectY +
          this.__blobs[this.__currentBlobsLocation][j].normRectH <
          this.__blobs[this.__currentBlobsLocation][i].normRectY +
          this.__blobs[this.__currentBlobsLocation][i].normRectH
        ) continue;
        this.__blobs[this.__currentBlobsLocation].splice(j, 1);
        this.numberOfDetectedBlobs -= 1;
        return true;
      }
    }
    return false;
  }
  rejectOuterBlobs(){let b=true;while(b){b=this.__rejectOuterBlobs();}}
  __rejectOuterBlobs(){
      for(let i = this.numberOfDetectedBlobs - 1; i >= 0; i--) {
        for(let j = this.numberOfDetectedBlobs - 1; j >= 0; j--) {
          if(i === j) continue; // the same blob, skip this case
          // check if second blob is located inside the first one
          if(
            this.__blobs[this.__currentBlobsLocation][j].normRectX >
            this.__blobs[this.__currentBlobsLocation][i].normRectX
          ) continue;
          if(
            this.__blobs[this.__currentBlobsLocation][j].normRectY >
            this.__blobs[this.__currentBlobsLocation][i].normRectY
          ) continue;
          if(
            this.__blobs[this.__currentBlobsLocation][j].normRectX +
            this.__blobs[this.__currentBlobsLocation][j].normRectW >
            this.__blobs[this.__currentBlobsLocation][i].normRectX +
            this.__blobs[this.__currentBlobsLocation][i].normRectW
          ) continue;
          if(
            this.__blobs[this.__currentBlobsLocation][j].normRectY +
            this.__blobs[this.__currentBlobsLocation][j].normRectH >
            this.__blobs[this.__currentBlobsLocation][i].normRectY +
            this.__blobs[this.__currentBlobsLocation][i].normRectH
          ) continue;
          this.__blobs[this.__currentBlobsLocation].splice(j, 1);
          this.numberOfDetectedBlobs -= 1;
          return true;
        }
      }
      return false;
  }
  applyNormRoi(){
    for(let i=this.numberOfDetectedBlobs-1;i>=0;i--){
      let blb=this.__blobs[this.__currentBlobsLocation][i];
      if(
        (blb.normRectX>(this.__normRoi.normx+this.__normRoi.normw))||
        (blb.normRectY>(this.__normRoi.normy+this.__normRoi.normh))||
        ((blb.normRectX+blb.normRectW)<this.__normRoi.normx)||
        ((blb.normRectY+blb.normRectH)<this.__normRoi.normy)
      ){this.__blobs[this.__currentBlobsLocation].splice(i, 1); this.numberOfDetectedBlobs -= 1;}
    }
  }
  processBlobs(){
    let temp_raw_blobs_data = []; let temp_index = -1; let temp_number_of_blobs = 0; let temp_area;
    for(let i = 0; i < this.numberOfDetectedBlobs; i++)
      temp_raw_blobs_data[i] = {
        __rawId: (i + 1),
        mass: 0, normMass: 0.0, normMassX: 0.0, normMassY: 0.0,
        normMinX: 100000.0, normMinY: 100000.0, normMaxX: -10.0, normMaxY: -10.0
      };
    for(let y = 0; y < this.thresholdImage.height; y++) {
      for(let x = 0; x < this.thresholdImage.width; x++) {
        temp_index = this.__blobMapArray[x][y] - 1;
        if(temp_index < 0) continue;
        temp_raw_blobs_data[temp_index].normMassX += x;
        temp_raw_blobs_data[temp_index].normMassY += y;
        temp_raw_blobs_data[temp_index].mass += 1;
        if(x < temp_raw_blobs_data[temp_index].normMinX) {
          temp_raw_blobs_data[temp_index].normMinX = x;
        } else {
          if(x > temp_raw_blobs_data[temp_index].normMaxX)
            temp_raw_blobs_data[temp_index].normMaxX = x;
        }
        if(y < temp_raw_blobs_data[temp_index].normMinY) {
          temp_raw_blobs_data[temp_index].normMinY = y;
        } else {
          if(y > temp_raw_blobs_data[temp_index].normMaxY)
            temp_raw_blobs_data[temp_index].normMaxY = y;
        }
      }
    }
    this.__blobs[this.__currentBlobsLocation].splice(0, this.__blobs[this.__currentBlobsLocation].length);
    // iterate over detected blobs
    for(let i = 0; i < this.numberOfDetectedBlobs; i++) {
      temp_raw_blobs_data[i].normMass = temp_raw_blobs_data[i].mass / (this.thresholdImage.height * this.thresholdImage.width);
      temp_area =
        (temp_raw_blobs_data[i].normMaxX - temp_raw_blobs_data[i].normMinX) *
        (temp_raw_blobs_data[i].normMaxY - temp_raw_blobs_data[i].normMinY) /
        (this.backgroundImage.width * this.backgroundImage.height);
      if(
        temp_raw_blobs_data[i].normMass < this.normMinBlobMass ||
        temp_raw_blobs_data[i].normMass > this.normMaxBlobMass ||
        temp_area                       < this.normMinBlobArea ||
        temp_area                       > this.normMaxBlobArea
      ) continue;
      temp_raw_blobs_data[i].normMassX /= temp_raw_blobs_data[i].mass;
      temp_raw_blobs_data[i].normMassY /= temp_raw_blobs_data[i].mass;
      temp_raw_blobs_data[i].normMassX /= this.backgroundImage.width;
      temp_raw_blobs_data[i].normMassY /= this.backgroundImage.height;
      temp_raw_blobs_data[i].normMinX /= this.thresholdImage.width;
      temp_raw_blobs_data[i].normMinY /= this.thresholdImage.height;
      temp_raw_blobs_data[i].normMaxX /= this.thresholdImage.width;
      temp_raw_blobs_data[i].normMaxY /= this.thresholdImage.height;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs] = new VidaBlob(this.__sketch);
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].normMassCenterX = temp_raw_blobs_data[i].normMassX;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].normMassCenterY = temp_raw_blobs_data[i].normMassY;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].normRectX = temp_raw_blobs_data[i].normMinX;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].normRectY = temp_raw_blobs_data[i].normMinY;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].normRectW = temp_raw_blobs_data[i].normMaxX - temp_raw_blobs_data[i].normMinX;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].normRectH = temp_raw_blobs_data[i].normMaxY - temp_raw_blobs_data[i].normMinY;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].normMass = temp_raw_blobs_data[i].normMass;
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].__rawId = temp_raw_blobs_data[i].__rawId;
      // set timetag
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].creationTime = this.__sketch.millis();
      this.__blobs[this.__currentBlobsLocation][temp_number_of_blobs].creationFrameCount = this.__sketch.frameCount;
      temp_number_of_blobs += 1; // update temporary number of blobs
    }
    this.numberOfDetectedBlobs = temp_number_of_blobs;
  }
  updateBlobs(){
    this.__currentBlobsLocation = (this.__currentBlobsLocation + 1) % 2;
    this.__previousBlobsLocation = (this.__currentBlobsLocation + 1) % 2;
    this.numberOfDetectedBlobs = this.findBlobs();
    this.processBlobs(); this.applyNormRoi();
    switch(this.rejectBlobsMethod) {
      case Vida.REJECT_NONE_BLOBS: /* nothing to do */ break;
      case Vida.REJECT_INNER_BLOBS: this.rejectInnerBlobs(); break;
      case Vida.REJECT_OUTER_BLOBS: this.rejectOuterBlobs(); break;
      default: console.log('[Vida, updateBlobs] unhandled rejectBlobsMethod value: ' + this.rejectBlobsMethod);
    }
    if(this.trackBlobsFlag) {
      this.trackBlobs();
    } else {
      // iterate over blobs to give them arbitrary identifiers
      for(let i = 0; i < this.numberOfDetectedBlobs; i++) this.__blobs[this.__currentBlobsLocation][i].id = i;
    }
    if(this.approximateBlobPolygonsFlag) this.approximateBlobPolygons();
  }
  findBlobs(){
    this.findBlobs_createTemporaryIndices();
    let temp_previousNumberOfIdentifiers = -1; let temp_currentNumberOfIdentifiers = 0;
    while(temp_previousNumberOfIdentifiers !== temp_currentNumberOfIdentifiers) {
      this.findBlobs_mergerIterationA(); this.findBlobs_mergerIterationB();
      temp_previousNumberOfIdentifiers = temp_currentNumberOfIdentifiers;
      temp_currentNumberOfIdentifiers = this.findBlobs_countUnorderedIdentifiers();
    }
    return this.findBlobs_optimizeIdentifiers();
  }
  findBlobs_createTemporaryIndices(){
    let temp_pixel_position; // index of the pixel we want to test
    let temp_blob_identifier = 1; // as the name suggests
    let temp_wmax = this.thresholdImage.width - 1; // safe bounds
    let temp_hmax = this.thresholdImage.height - 1; // safe bounds
    this.resetBlobMapArray(); // clear the array
    for(let temp_y = 1; temp_y < temp_hmax; temp_y++) {
      for(let temp_x = 1; temp_x < temp_wmax; temp_x++) {
        temp_pixel_position = (temp_y * this.thresholdImage.width + temp_x) * 4;
        // we're only looking at the red component (this.thresholdImage is b/w)
        if(this.thresholdImage.pixels[temp_pixel_position] > 0)
          this.__blobMapArray[temp_x][temp_y] = temp_blob_identifier;
        else
          temp_blob_identifier += 1; // increment value when pixel is empty
      }
    }
  }
  findBlobs_mergerIterationA(){
    let temp_nn, temp_ne, temp_ee, temp_se, temp_ss, temp_sw, temp_ww, temp_nw;
    let temp_wmax = this.thresholdImage.width - 1; // safe bounds
    let temp_hmax = this.thresholdImage.height - 1; // safe bounds
    let temp_lowest_index;
    for(let temp_y = 1; temp_y < temp_hmax; temp_y++) {
      for(let temp_x = 1; temp_x < temp_wmax; temp_x++) {
        // empty cell (no blob), move to the next one
        if(this.__blobMapArray[temp_x][temp_y] === 0) continue;
        // collect statuses of neighboring cells
        temp_nn = this.__blobMapArray[temp_x    ][temp_y - 1];
        temp_ne = this.__blobMapArray[temp_x + 1][temp_y - 1];
        temp_ee = this.__blobMapArray[temp_x + 1][temp_y    ];
        temp_se = this.__blobMapArray[temp_x + 1][temp_y + 1];
        temp_ss = this.__blobMapArray[temp_x    ][temp_y + 1];
        temp_sw = this.__blobMapArray[temp_x - 1][temp_y + 1];
        temp_ww = this.__blobMapArray[temp_x - 1][temp_y    ];
        temp_nw = this.__blobMapArray[temp_x - 1][temp_y - 1];
        temp_lowest_index = this.__blobMapArray[temp_x][temp_y];
        if(temp_nn > 0 && temp_nn < temp_lowest_index) temp_lowest_index = temp_nn;
        if(temp_ne > 0 && temp_ne < temp_lowest_index) temp_lowest_index = temp_ne;
        if(temp_ee > 0 && temp_ee < temp_lowest_index) temp_lowest_index = temp_ee;
        if(temp_se > 0 && temp_se < temp_lowest_index) temp_lowest_index = temp_se;
        if(temp_ss > 0 && temp_ss < temp_lowest_index) temp_lowest_index = temp_ss;
        if(temp_sw > 0 && temp_sw < temp_lowest_index) temp_lowest_index = temp_sw;
        if(temp_ww > 0 && temp_ww < temp_lowest_index) temp_lowest_index = temp_ww;
        if(temp_nw > 0 && temp_nw < temp_lowest_index) temp_lowest_index = temp_nw;
        this.__blobMapArray[temp_x][temp_y] = temp_lowest_index;
        if(this.__blobMapArray[temp_x    ][temp_y - 1] > 0) this.__blobMapArray[temp_x    ][temp_y - 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x + 1][temp_y - 1] > 0) this.__blobMapArray[temp_x + 1][temp_y - 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x + 1][temp_y    ] > 0) this.__blobMapArray[temp_x + 1][temp_y    ] = temp_lowest_index;
        if(this.__blobMapArray[temp_x + 1][temp_y + 1] > 0) this.__blobMapArray[temp_x + 1][temp_y + 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x    ][temp_y + 1] > 0) this.__blobMapArray[temp_x    ][temp_y + 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x - 1][temp_y + 1] > 0) this.__blobMapArray[temp_x - 1][temp_y + 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x - 1][temp_y    ] > 0) this.__blobMapArray[temp_x - 1][temp_y    ] = temp_lowest_index;
        if(this.__blobMapArray[temp_x - 1][temp_y - 1] > 0) this.__blobMapArray[temp_x - 1][temp_y - 1] = temp_lowest_index;
      }
    }
  }
  findBlobs_mergerIterationB(){
    let temp_nn, temp_ne, temp_ee, temp_se, temp_ss, temp_sw, temp_ww, temp_nw;
    let temp_wmax = this.thresholdImage.width - 2; // safe bounds
    let temp_hmax = this.thresholdImage.height - 2; // safe bounds
    let temp_lowest_index;
    for(let temp_x = temp_wmax; temp_x > 0; temp_x--) {
      for(let temp_y = temp_hmax; temp_y > 0; temp_y--) {
        if(this.__blobMapArray[temp_x][temp_y] === 0) continue;
        temp_nn = this.__blobMapArray[temp_x    ][temp_y - 1];
        temp_ne = this.__blobMapArray[temp_x + 1][temp_y - 1];
        temp_ee = this.__blobMapArray[temp_x + 1][temp_y    ];
        temp_se = this.__blobMapArray[temp_x + 1][temp_y + 1];
        temp_ss = this.__blobMapArray[temp_x    ][temp_y + 1];
        temp_sw = this.__blobMapArray[temp_x - 1][temp_y + 1];
        temp_ww = this.__blobMapArray[temp_x - 1][temp_y    ];
        temp_nw = this.__blobMapArray[temp_x - 1][temp_y - 1];
        temp_lowest_index = this.__blobMapArray[temp_x][temp_y];
        if(temp_nn > 0 && temp_nn < temp_lowest_index) temp_lowest_index = temp_nn;
        if(temp_ne > 0 && temp_ne < temp_lowest_index) temp_lowest_index = temp_ne;
        if(temp_ee > 0 && temp_ee < temp_lowest_index) temp_lowest_index = temp_ee;
        if(temp_se > 0 && temp_se < temp_lowest_index) temp_lowest_index = temp_se;
        if(temp_ss > 0 && temp_ss < temp_lowest_index)  temp_lowest_index = temp_ss;
        if(temp_sw > 0 && temp_sw < temp_lowest_index) temp_lowest_index = temp_sw;
        if(temp_ww > 0 && temp_ww < temp_lowest_index) temp_lowest_index = temp_ww;
        if(temp_nw > 0 && temp_nw < temp_lowest_index) temp_lowest_index = temp_nw;
        this.__blobMapArray[temp_x][temp_y] = temp_lowest_index;
        if(this.__blobMapArray[temp_x    ][temp_y - 1] > 0) this.__blobMapArray[temp_x    ][temp_y - 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x + 1][temp_y - 1] > 0) this.__blobMapArray[temp_x + 1][temp_y - 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x + 1][temp_y    ] > 0) this.__blobMapArray[temp_x + 1][temp_y    ] = temp_lowest_index;
        if(this.__blobMapArray[temp_x + 1][temp_y + 1] > 0) this.__blobMapArray[temp_x + 1][temp_y + 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x    ][temp_y + 1] > 0) this.__blobMapArray[temp_x    ][temp_y + 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x - 1][temp_y + 1] > 0) this.__blobMapArray[temp_x - 1][temp_y + 1] = temp_lowest_index;
        if(this.__blobMapArray[temp_x - 1][temp_y    ] > 0) this.__blobMapArray[temp_x - 1][temp_y    ] = temp_lowest_index;
        if(this.__blobMapArray[temp_x - 1][temp_y - 1] > 0) this.__blobMapArray[temp_x - 1][temp_y - 1] = temp_lowest_index;
      }
    }
  }
  findBlobs_optimizeIdentifiers(){
    let temp_wmax = this.thresholdImage.width - 1; // safe bounds
    let temp_hmax = this.thresholdImage.height - 1; // safe bounds
    let temp_redirections_array = []; let temp_b;
    for(let temp_y = 1; temp_y < temp_hmax; temp_y++) {
      for(let temp_x = 1; temp_x < temp_wmax; temp_x++) {
        if(this.__blobMapArray[temp_x][temp_y] === 0) continue;
        temp_b = true;
        for(let i = 0; i < temp_redirections_array.length; i++) {
          if(
            temp_redirections_array[i] === this.__blobMapArray[temp_x][temp_y]
          ) {
            this.__blobMapArray[temp_x][temp_y] = i + 1;
            temp_b = false;
            break;
          }
        }
        if(temp_b) {
          temp_redirections_array[temp_redirections_array.length] =
            this.__blobMapArray[temp_x][temp_y];
          this.__blobMapArray[temp_x][temp_y] =
            temp_redirections_array.length;
        }
      }
    }
    return temp_redirections_array.length;
  }
  findBlobs_countUnorderedIdentifiers(){
    let temp_wmax = this.thresholdImage.width - 1; // safe bounds
    let temp_hmax = this.thresholdImage.height - 1; // safe bounds
    let temp_identifiers_array = []; // list of detected identifiers
    let temp_b;
    for(let temp_y = 1; temp_y < temp_hmax; temp_y++) {
      for(let temp_x = 1; temp_x < temp_wmax; temp_x++) {
        if(this.__blobMapArray[temp_x][temp_y] === 0) continue;
        temp_b = true;
        for(let i = 0; i < temp_identifiers_array.length; i++) {
          if(
            temp_identifiers_array[i] === this.__blobMapArray[temp_x][temp_y]
          ) {
            temp_b = false;
            break;
          }
        }
        if(temp_b) {
          temp_identifiers_array[temp_identifiers_array.length] =
            this.__blobMapArray[temp_x][temp_y];
        }
      }
    }
    return temp_identifiers_array.length;
  }
  draw(_ctx,_roi,_mirror){ // mirror not implemented yet
    let fx=_ctx.width/_roi.w; let fy=_ctx.height/_roi.h;
    let x=-fx*_roi.x; let y=-fy*_roi.y; let w=fx*this.currentImage.width; let h=fy*this.currentImage.height;
    let temp_blobs=this.getBlobs();
    let temp_rect_x,temp_rect_y,temp_rect_w,temp_rect_h,temp_mass_center_x,temp_mass_center_y;
    for(let i=0;i<temp_blobs.length;i++){
      temp_rect_x = x+Math.floor(temp_blobs[i].normRectX*w);
      temp_rect_y = y+Math.floor(temp_blobs[i].normRectY*h);
      temp_rect_w = Math.floor(temp_blobs[i].normRectW*w);
      temp_rect_h = Math.floor(temp_blobs[i].normRectH*h);
      temp_mass_center_x = x+Math.floor(temp_blobs[i].normMassCenterX*w);
      temp_mass_center_y = y+Math.floor(temp_blobs[i].normMassCenterY*h);
      // draw bounding box
      _ctx.strokeWeight(1);_ctx.stroke(255,255,0);_ctx.noFill();
      _ctx.rect(temp_rect_x,temp_rect_y,temp_rect_w,temp_rect_h);
      // draw mass center
      _ctx.noStroke();_ctx.fill(255,0,0);_ctx.ellipseMode(this.__sketch.CENTER);
      _ctx.ellipse(temp_mass_center_x,temp_mass_center_y,3,3);
      // print id
      _ctx.noStroke();_ctx.fill(255,255,0);
      _ctx.text(temp_blobs[i].id,temp_rect_x,temp_rect_y-1);
      // draw approximated polygon (if available)
      _ctx.strokeWeight(1);_ctx.stroke(255,0,0);_ctx.noFill();
      _ctx.beginShape();
        for(let j=0;j<temp_blobs[i].approximatedPolygon.length;j++){
          _ctx.vertex(
            x+temp_blobs[i].approximatedPolygon[j].normX*w,
            y+temp_blobs[i].approximatedPolygon[j].normY*h,
          );
        }
      _ctx.endShape(this.__sketch.CLOSE);
    }
  }
  simpleDrawZones(_ctx,_pixx,_pixy,_pixw,_pixh){ // mirror not implemented yet
    let temp_coord_x, temp_coord_y, temp_coord_w, temp_coord_h;
    _ctx.push();
      _ctx.textFont('Helvetica', 10); _ctx.textAlign(this.__sketch.LEFT, this.__sketch.BOTTOM); _ctx.textStyle(this.__sketch.NORMAL);
      for(let i=0;i<this.activeZones.length;i++){
        temp_coord_x=Math.floor(_pixx+this.activeZones[i].normX*_pixw);
        temp_coord_y=Math.floor(_pixy+this.activeZones[i].normY*_pixh);
        temp_coord_w=Math.floor(this.activeZones[i].normW*_pixw);
        temp_coord_h=Math.floor(this.activeZones[i].normH*_pixh);
        _ctx.strokeWeight(1);
        if(this.activeZones[i].isEnabledFlag){
          _ctx.stroke(255,0,0);
          if(this.activeZones[i].isMovementDetectedFlag)
            _ctx.fill(255,0,0,128);
          else
            _ctx.noFill();
        }else{
          _ctx.stroke(0,0,255);
          if(this.activeZones[i].isMovementDetectedFlag)
            _ctx.fill(0, 0, 255, 128);
          else
            _ctx.noFill();
        }
        _ctx.rect(temp_coord_x,temp_coord_y,temp_coord_w,temp_coord_h);
        _ctx.noStroke();
        if(this.activeZones[i].isEnabledFlag)
          _ctx.fill(255, 0, 0);
        else
          _ctx.fill(0, 0, 255);
          _ctx.text(this.activeZones[i].id, temp_coord_x, temp_coord_y-1);
      }
    _ctx.pop();
  }
  simpleDrawBlobs(_ctx,_pixx,_pixy,_pixw,_pixh){ // mirror not implemented yet
    let temp_blobs=this.getBlobs();
    let temp_rect_x,temp_rect_y,temp_rect_w,temp_rect_h,temp_mass_center_x,temp_mass_center_y;
    for(let i=0;i<temp_blobs.length;i++){
      temp_rect_x = _pixx+Math.floor(temp_blobs[i].normRectX*_pixw);
      temp_rect_y = _pixy+Math.floor(temp_blobs[i].normRectY*_pixh);
      temp_rect_w = Math.floor(temp_blobs[i].normRectW*_pixw);
      temp_rect_h = Math.floor(temp_blobs[i].normRectH*_pixh);
      temp_mass_center_x = _pixx+Math.floor(temp_blobs[i].normMassCenterX*_pixw);
      temp_mass_center_y = _pixy+Math.floor(temp_blobs[i].normMassCenterY*_pixh);
      // draw bounding box
      _ctx.strokeWeight(1);_ctx.stroke(255,255,0);_ctx.noFill();
      _ctx.rect(temp_rect_x,temp_rect_y,temp_rect_w,temp_rect_h);
      // draw mass center
      _ctx.noStroke();_ctx.fill(255,0,0);_ctx.ellipseMode(this.__sketch.CENTER);
      _ctx.ellipse(temp_mass_center_x,temp_mass_center_y,3,3);
      // print id
      //_ctx.noStroke();_ctx.fill(255,255,0);
      //_ctx.text(temp_blobs[i].id,temp_rect_x,temp_rect_y-1);
      // draw approximated polygon (if available)
      _ctx.strokeWeight(1);_ctx.stroke(255,0,0);_ctx.noFill();
      _ctx.beginShape();
        for(let j=0;j<temp_blobs[i].approximatedPolygon.length;j++){
          _ctx.vertex(
            _pixx+temp_blobs[i].approximatedPolygon[j].normX*_pixw,
            _pixy+temp_blobs[i].approximatedPolygon[j].normY*_pixh,
          );
        }
      _ctx.endShape(this.__sketch.CLOSE);
    }
  }
}
								

									pbl.js
									class PbLPolygon{
  constructor(_normx,_normy,_normrectx,_normrecty,_normrectw,_normrecth,_r,_g,_b,_id,_creationTimetag){
    this.normx=_normx;this.normy=_normy;
    this.normrectx=_normrectx;this.normrecty=_normrecty;this.normrectw=_normrectw;this.normrecth=_normrecth;
    this.points=[];this.color={r:_r,g:_g,b:_b};this.id=_id;this.creationTimetag=_creationTimetag;
  }
  addPoint(_normx,_normy,_normz){
    this.points[this.points.length]={
      normx:_normx,normy:_normy,normz:_normz,
      tx:(this.creationTimetag+this.points.length+Math.random()),
      speedx:(0.001+Math.random()*0.003),
      ty:(this.creationTimetag+this.points.length+Math.random()),
      speedy:(0.001+Math.random()*0.003),
      rangex:0.005,rangey:0.005
    };
  }
}

class PbL{
  constructor(_p){
    this.p=_p;this.afterglowGfx=null;this.blobsGfx=null;this.drawTimetag=0;
    this.shaderTransparentizer={origCtx:null,dstCtx:null,params:{val:0.002}};
    this.polygons=[]; this.maxNumOfPolygons=3000; this.polygonTTL=6000; // ms
    this.transparentizeFramePeriod=3;
    this.blobAlpha=255;
    this.blobsBlendMode=this.getBlendModeByName("BLEND"); this.blobsBlendModeNumerical=0;
    this.colorDetectionMode=1; // color picker, 0 - mass centers; 1 - calculated centers
    this.messages=[];
    this.applyPerFrameOscilAnim=true;
  }
  init(_w,_h){
    if(this.blobsGfx) this.resizeGraphicsWorkaround(this.blobsGfx,this.p.width,this.p.height,true); else this.blobsGfx=this.p.createGraphics(this.p.width,this.p.height,this.p.WEBGL);
    if(this.afterglowGfx) this.resizeGraphicsWorkaround(this.afterglowGfx,this.p.width,this.p.height,true); else this.afterglowGfx=this.p.createGraphics(this.p.width,this.p.height,this.p.WEBGL);
    this.blobsGfx.clear(); this.afterglowGfx.clear();
    this.shaderTransparentizer.origCtx=this.p.createFilterShader(transparentizerShaderTxt);
    this.shaderTransparentizer.dstCtx=this.shaderTransparentizer.origCtx.copyToContext(this.afterglowGfx);
  }
  getNumericalBlendMode(){return this.blobsBlendModeNumerical;}
  setBlendMode(_v){
    if(_v==='ADD'){this.blobsBlendMode=this.getBlendModeByName("ADD");this.blobsBlendModeNumerical=1;return;}
    if(_v==='BLEND'){this.blobsBlendMode=this.getBlendModeByName("BLEND");this.blobsBlendModeNumerical=0;return;}
    console.log("[PbL, setBlendMode] unhandled _v: "+_v);
  }
  setMaxNumberOfPolygonsWithNormVal(_v){
    if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
    this.maxNumOfPolygons=100+Math.floor(_v*7000.0);
  }
  setPolygonTTLWithNormVal(_v){
    if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
    this.polygonTTL=300+Math.floor(_v*15000.0);
  }
  fitBlobsAndAfterglowGfx(){
    if(!this.blobsGfx){this.blobsGfx=this.p.createGraphics(this.p.width,this.p.height,this.p.WEBGL);this.blobsGfx.clear();}
    if((this.blobsGfx.width!==this.p.width)||(this.blobsGfx.height!==this.p.height)){this.resizeGraphicsWorkaround(this.blobsGfx,this.p.width,this.p.height,true);this.blobsGfx.clear();}
    if(!this.afterglowGfx){this.afterglowGfx=this.p.createGraphics(this.p.width,this.p.height,this.p.WEBGL);this.afterglowGfx.clear();}
    if((this.afterglowGfx.width!==this.p.width)||(this.afterglowGfx.height!==this.p.height)){this.resizeGraphicsWorkaround(this.afterglowGfx,this.p.width,this.p.height,true);this.afterglowGfx.clear();}
  }
  calcPolygonCenter(_polygon){
    let result={x:0.0,y:0.0};
    for(let i=0;i<_polygon.length;i++){result.x+=_polygon[i].normX;result.y+=_polygon[i].normY;}
    result.x/=_polygon.length;result.y/=_polygon.length;
    return result;
  }
  makePolygonsFromVidaBlobs(_img,_vidaBlobs,_minNormBrightnessThreshold){ // "_img" is for capture or capture proxy
    _img.loadPixels(); let c, center, normBrightness;
    for(let i=0;i<_vidaBlobs.length;i++){
      if(this.colorDetectionMode===0){
        center=this.calcPolygonCenter(_vidaBlobs[i].approximatedPolygon);
        c=this.getColor(_img,center.x,center.y);
      }else{ // this.colorDetectionMode===1
        c=this.getColor(_img,_vidaBlobs[i].normMassCenterX,_vidaBlobs[i].normMassCenterY);
      }
      normBrightness=(c.r+c.g+c.b)*0.3333/255.0;
      if(normBrightness<_minNormBrightnessThreshold) continue;
      let polygon = new PbLPolygon(
        _vidaBlobs[i].normMassCenterX,_vidaBlobs[i].normMassCenterY,
        _vidaBlobs[i].normRectX,_vidaBlobs[i].normRectY,_vidaBlobs[i].normRectW,_vidaBlobs[i].normRectH,
        c.r,c.g,c.b,_vidaBlobs[i].id,this.p.millis()
      );
      for(let j=0;j<_vidaBlobs[i].approximatedPolygon.length;j++) polygon.addPoint(_vidaBlobs[i].approximatedPolygon[j].normX,_vidaBlobs[i].approximatedPolygon[j].normY,0.0);
      this.messages[this.messages.length]=["new",polygon.normx,polygon.normy,polygon.normrectw*polygon.normrecth];
      this.polygons[this.polygons.length]=polygon;
    }
  }
  convertOldPolygonsToAfterglows(_img,_coords){ // "_img" is for capture or capture proxy
    let n=-1; let t=this.p.millis(); let result=false;
    for(let i=0;i<this.polygons.length;i++){
      if((t-this.polygons[i].creationTimetag)>this.polygonTTL) n=i; else break;
      this.messages[this.messages.length]=["old",this.polygons[i].normx,this.polygons[i].normy,this.polygons[i].normrectw*this.polygons[i].normrecth];
    }
    if(n>-1){
      this.drawPolygons(this.afterglowGfx,_img,_coords,0,n);
      this.polygons.splice(0,n+1); result=true;
    }
    if(this.polygons.length>this.maxNumOfPolygons) n=this.polygons.length-this.maxNumOfPolygons-1;
    if(n>-1){
      for(let i=0;i<n;i++){
        if(!this.polygons[i]) continue;
        this.messages[this.messages.length]=["old",this.polygons[i].normx,this.polygons[i].normy,this.polygons[i].normrectw*this.polygons[i].normrecth];
      }
      this.drawPolygons(this.afterglowGfx,_img,_coords,0,n);
      this.polygons.splice(0,n+1); result=true;
    }
    return result;
  }
  updateWithVidaBlobs(_img,_coords,_vidaBlobs){  // "_img" is for capture or capture proxy
    this.messages.splice(0,this.messages.length);
    this.blobsGfx.blendMode(this.blobsBlendMode);
    this.afterglowGfx.blendMode(this.blobsBlendMode);
    this.fitBlobsAndAfterglowGfx();
    let b=this.convertOldPolygonsToAfterglows(_img,_coords);
    this.makePolygonsFromVidaBlobs(_img,_vidaBlobs);
    //this.fitBlobsAndAfterglowGfx();
    if(!this.applyPerFrameOscilAnim){
      if(b){
        this.blobsGfx.clear(); this.drawPolygons(this.blobsGfx,_img,_coords,0,this.polygons.length-1);
      }else{
        if(_vidaBlobs.length>0) this.drawPolygons(this.blobsGfx,_img,_coords,this.polygons.length-_vidaBlobs.length,this.polygons.length-1);
      }
    }
    //this.testDrawingVidaBlobs(_vidaBlobs,_roi,_mirror);
  }
  drawPolygons(_gfx,_img,_coords,_firstIndex,_lastIndex){ // "_img" is for capture or capture proxy
    if(this.polygons.length<1) return; if(_firstIndex>_lastIndex) return; if((_firstIndex<0)||(_firstIndex>=this.polygons.length)||(_lastIndex<0)||(_lastIndex>=this.polygons.length)) return;
    let phase2, phase, t;
    _gfx.push();
      _gfx.translate(-_gfx.width/2,-_gfx.height/2,0); _gfx.noStroke();
      for(let i=_firstIndex;i<=_lastIndex;i++){
        t=this.p.millis();
        phase=(t-this.polygons[i].creationTimetag)/this.polygonTTL;
        phase2=Math.pow(Math.sin(phase*Math.PI*0.5),4);
        //temp_rect_x = _coords.x+Math.floor(temp_blobs[i].normRectX*_coords.w);
        //temp_rect_y = _coords.y+Math.floor(temp_blobs[i].normRectY*_coords.h);
        //temp_rect_w = Math.floor(temp_blobs[i].normRectW*_coords.w);
        //temp_rect_h = Math.floor(temp_blobs[i].normRectH*_coords.h);
        //temp_mass_center_x = _coords.x+Math.floor(temp_blobs[i].normMassCenterX*_coords.w);
        //temp_mass_center_y = _coords.y+Math.floor(temp_blobs[i].normMassCenterY*_coords.h);
        _gfx.fill(this.polygons[i].color.r,this.polygons[i].color.g,this.polygons[i].color.b,this.blobAlpha);
        _gfx.beginShape();
          for(let j=0;j<this.polygons[i].points.length;j++){
            _gfx.vertex(
              _coords.x+(this.polygons[i].points[j].normx+Math.sin((t+this.polygons[i].points[j].tx)*this.polygons[i].points[j].speedx)*this.polygons[i].points[j].rangex*phase2)*_coords.w,
              _coords.y+(this.polygons[i].points[j].normy+Math.sin((t+this.polygons[i].points[j].ty)*this.polygons[i].points[j].speedy)*this.polygons[i].points[j].rangex*phase2)*_coords.h
            );
          }
        _gfx.endShape(this.p.CLOSE);
      }
    _gfx.pop();
  }
  transparentizeAfterglowImage(){
    this.shaderTransparentizer.dstCtx.setUniform('val',this.shaderTransparentizer.params.val);
    this.afterglowGfx.filter(this.shaderTransparentizer.dstCtx);
  }
  draw(_img,_coords){
    let t=this.p.millis();let dt=t-this.drawTimetag;this.drawTimetag=t;
    if(this.applyPerFrameOscilAnim){
      this.blobsGfx.clear(); this.drawPolygons(this.blobsGfx,_img,_coords,0,this.polygons.length-1);
    }
    this._drawAfterglowAndBlobs();
  }
  _drawAfterglowAndBlobs(){ 
    this.p.push();
      this.p.blendMode(this.blobsBlendMode);
      if(this.afterglowGfx){
        this.p.image(this.afterglowGfx,0,0);
        if((this.p.frameCount%this.transparentizeFramePeriod)===0) this.transparentizeAfterglowImage();
      }
      if(this.blobsGfx) this.p.image(this.blobsGfx,0,0);
    this.p.pop();
  }
  getColor(_img,_normx,_normy){
    let result={r:0,g:0,b:0,a:255};
    let x=Math.floor(_img.width*_normx); let y=Math.floor(_img.height*_normy);
    if(x<0) x=0; if(x>=_img.width) x=_img.width; if(y<0) y=0; if(y>=_img.height) y=_img.height;
    let n=(y*_img.width+x)*4;
    result.r=_img.pixels[n];result.g=_img.pixels[n+1];result.b=_img.pixels[n+2];result.a=_img.pixels[n+3];
    return result;
  }
  getBlendModeByName(_name){
    let result=this.p.BLEND;
    switch(_name.toUpperCase()){
      case 'BLEND': result=this.p.BLEND; break;
      case 'ADD': result=this.p.ADD; break;
      case 'DARKEST': result=this.p.DARKEST; break;
      case 'LIGHTEST': result=this.p.LIGHTEST; break;
      case 'EXCLUSION': result=this.p.EXCLUSION; break;
      case 'MULTIPLY': result=this.p.MULTIPLY; break;
      case 'SCREEN': result=this.p.SCREEN; break;
      case 'REPLACE': result=this.p.REPLACE; break;
      case 'REMOVE': result=this.p.REMOVE; break;
      default: console.log("[PbL, getBlendModeByName] unhandled _name: "+_name);
    }
    return result;
  }
  rescale(_v,_vmin,_vmax,_min,_max){return(_min+((_v-_vmin)/(_vmax-_vmin))*(_max-_min));}
  resizeGraphicsWorkaround(_g, _w, _h, _webglflag) {
    if(_g === null || _g === undefined) {
      if(_webglflag) _g = this.p.createGraphics(_w, _h, this.p.WEBGL); else _g = this.p.createGraphics(_w, _h);
      _g.pixelDensity(1);
    }else{
      _g.width = _w; _g.height = _h;
      _g.elt.width = _w; _g.elt.height = _h;
      // * this._pInst._pixelDensity;
      _g.elt.style.width = _w + 'px'; _g.elt.style.height = _h + 'px';
      _g.pixelDensity(1); _g.loadPixels(); // console.log(_g.width);
      //_g.elt.style.width = _w +'px'; _g.elt.style.height = _h + 'px';
      _g.elt.setAttribute('style', 'display: none');
    }
    _g.updatePixels(); _g.background(0); _g.loadPixels();
    if(_w * _h !== _g.pixels.length / 4) {
      console.log(
        '[PbL, 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)
      );
    }
    _g.clear();
  }
}
								

									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.");
    }
}
								

									shaders.js
									let captureColorCorrectorShaderTxt = `
precision highp float;
uniform sampler2D tex0;
varying vec2 vTexCoord;
uniform vec3 u_mul_rgb;
uniform float thresh;

void main(){
  float r=texture2D(tex0, vTexCoord).r;
  float g=texture2D(tex0, vTexCoord).g;
  float b=texture2D(tex0, vTexCoord).b;
  float a=texture2D(tex0, vTexCoord).a;
  if(0.3333*(r+g+b)<thresh){r=0.0;g=0.0;b=0.0;}
  gl_FragColor=vec4(r*u_mul_rgb[0],g*u_mul_rgb[1],b*u_mul_rgb[2],a);
}
`;

let transparentizerShaderTxt = `
precision highp float;
uniform sampler2D tex0;
varying vec2 vTexCoord;
uniform float val;

void main(){
  gl_FragColor=vec4(
    texture2D(tex0, vTexCoord).r-val,
    texture2D(tex0, vTexCoord).g-val,
    texture2D(tex0, vTexCoord).b-val,
    texture2D(tex0, vTexCoord).a-val
  );
}
`;
								

									synth.js
									class Synth{
  constructor(_p){
    this.toneLatency="playback"; // "interactive", "playback", "balanced", number
    this.p=_p; this.isActive=true; this.audioEnabled=false;
    this.ampFactor=0.75;
    this.newBlob={synth:null,polyphony:16,freshFrame:true,numOfSounds:0,lastTrigTimetag:0,lag:60,maxNumOfSoundsPerFrame:1};
    //this.oldBlob={synth:null,polyphony:8,freshFrame:true,numOfSounds:0,lastTrigTimetag:0,lag:560,maxNumOfSoundsPerFrame:1};
  }
  init(){
    if((!this.isActive)||this.audioEnabled) return;
    const myContext = new AudioContext({latencyHint:this.toneLatency}); Tone.setContext(myContext);
    this.newBlob.synth = new Tone.PolySynth(
      Tone.Synth,{
        maxPolyphony: this.newBlob.polyphony, oscillator: {partials: [0,3],},
        envelope:{attack:0.01, decay:0.01, sustain:0.1, release:0.01, attackCurve:"exponential", decayCurve:"linear", releaseCurve:"exponential",} // liner, exponential
	  	}
    ).toDestination();
    this.newBlob.synth.maxPolyphony=this.newBlob.polyphony;this.setVol(this.ampFactor);
    /*
    this.oldBlob.synth = new Tone.PolySynth(
      Tone.Synth,{
        maxPolyphony: this.oldBlob.polyphony, oscillator: {partials: [0,3],},
        envelope:{attack:0.2, decay:0.2, sustain:0.3, release:0.3, attackCurve:"exponential", decayCurve:"linear", releaseCurve:"exponential",} // liner, exponential
	  	}
    ).toDestination();
    this.oldBlob.synth.maxPolyphony=this.oldBlob.polyphony;
    */
    //Tone.start();
    this.audioEnabled=true;
    console.log("[Synth, init] internal synth enabled, latency: "+this.toneLatency);
  }
  setPolyphonyForNewBlobBeforeInit(_polyphony){
    if(isNaN(_polyphony)||(_polyphony===null)||(_polyphony===undefined)) return;
    _polyphony=Math.floor(_polyphony); if(_polyphony<1) return;
    this.newBlob.polyphony=_polyphony;
  }
  setVol(_mag){this.ampFactor=_mag;if(this.newBlob.synth)this.newBlob.synth.volume.value=this.mag2db(this.ampFactor);}
  mag2db(_mag){return (20*Math.log10(_mag));}
  isMidiPitchNormal(_p){_p=_p%12; if((_p===0)||(_p===2)||(_p===4)||(_p===5)||(_p===7)||(_p===9)||(_p===11)) return true; return false;}
  isMidiPitchSharp(_p){_p=_p%12; if((_p===1)||(_p===3)||(_p===6)||(_p===8)||(_p===10)) return true; return false;}
  midiPitchToToneNoteName(_p){
    let result='?';
    switch(_p%12){
      case 0: result='C'; break; case 1: result='C#'; break; case 2: result='D'; break; case 3: result='D#'; break; case 4: result='E'; break; case 5: result='F'; break; case 6: result='F#'; break; case 7: result='G'; break; case 8: result='G#'; break; case 9: result='A'; break; case 10: result='A#'; break; case 11: result='B'; break;
      default: // ???
    }
    result+=Math.floor(_p/12); return result;
  }
  flush(){if(this.newBlob.synth) this.newBlob.synth.releaseAll();}
  normValToMidiPitch(_v){return Math.floor(_v*48+36);}
  newBlobSound(_pblMessage){
    if((!this.isActive)||(!this.audioEnabled)) return;
    if(this.newBlob.numOfSounds>=this.newBlob.maxNumOfSoundsPerFrame){
      if(this.newBlob.freshFrame){
        this.newBlob.synth.releaseAll();
      }else{
        return;
      }
    }
    if(this.p.millis()-this.newBlob.lastTrigTimetag<this.newBlob.lag) return;
    this.newBlob.synth.triggerAttackRelease(this.midiPitchToToneNoteName(this.normValToMidiPitch(_pblMessage[1])),0.05);
    this.newBlob.synth.triggerAttackRelease(this.midiPitchToToneNoteName(this.normValToMidiPitch(1.0-_pblMessage[2])),0.05);
    this.newBlob.lastTrigTimetag=this.p.millis();
    this.newBlob.numOfSounds+=1;this.newBlob.freshFrame=false;
  }
  oldBlobSound(_pblMessage){
    /*
    if((!this.isActive)||(!this.audioEnabled)) return;
    if(this.oldBlob.numOfSounds>=this.oldBlob.maxNumOfSoundsPerFrame){
      if(this.oldBlob.freshFrame){
        this.oldBlob.synth.releaseAll();
      }else{
        return;
      }
    }
    if(this.p.millis()-this.oldBlob.lastTrigTimetag<this.oldBlob.lag) return;
    this.oldBlob.synth.triggerAttackRelease(this.midiPitchToToneNoteName(Math.floor(_pblMessage[1]*48+36)),0.05);
    this.oldBlob.synth.triggerAttackRelease(this.midiPitchToToneNoteName(Math.floor((1.0-_pblMessage[2])*48+36)),0.05);
    this.oldBlob.lastTrigTimetag=this.p.millis();
    this.oldBlob.numOfSounds+=1;this.oldBlob.freshFrame=false;
    */
  }
  clearSoundsCounter(){
    this.newBlob.numOfSounds=0;this.newBlob.freshFrame=true;
    //this.oldBlob.numOfSounds=0;this.oldBlob.freshFrame=true;
  }

  //note(_pitch,_normVel){if(_normVel>0.0) noteOn(_pitch,_normVel); else noteOff(_pitch);}
  //noteOn(_pitch,_normVel){if(!this.audioEnabled||!this.isActive) return; _normVel*=this.ampFactor;this.tonePolySynth.triggerAttack(this.midiPitchToToneNoteName(_pitch),Tone.now(),_normVel);}
  //noteOff(_pitch){if(!this.audioEnabled||!this.isActive) return; this.tonePolySynth.triggerRelease(this.midiPitchToToneNoteName(_pitch),0);} 
}
								

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/60.);
								

									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"])
}
								