Planes

avoid atrophy and exercise the ear
Preview: default camera Preview: back camera
Parameters
bthreshold		próg jasości, powyżej którego piksel jest traktowany jako zawierający informację o ruchu
cut		znormalizowany próg minimalnej jasności pikseli branych pod uwagę w pracy detektora ruchu
displaymode		tryb wyświetlania: 0 - obraz nieprzetworzony oraz wykryte ruchome obiekty, 1 - obraz po wzmocnienniu i odfiltrowaniu ciemnych obiektów oraz wykryte ruchome obiekty, 2 - tło oraz wykryte ruchome obiekty, 3 - obraz różnicowy (pomiędzy aktualnym obrazem a tłem) oraz wykryte ruchome obiekty, 4 - biarna reprezentacja obrazu różnicowego oraz wykryte ruchome obiekty, 5 - malowanie światłem (finalny efekt)
feedback		poziom sprzężenia zwrotnego w obrazie tła
gui		hide / show the GUI
lang		set the interface language
mirror		mirorr the camera image
mul		znormalizowany poziom wzmocnienia (podbicie jasności) obrazu
pointer		hide / show the mouse pointer
synth		wyłącza/włącza wewnętrzny generator dźwięku
vol		ustala inicjalny poziom głośności instrumentu (globalny suwak "vol")
zh		znormalizowana wysokość "hebla"
zonecol		kolor stref
zpad		znormalizowany dystans pomiędzy "heblami"
zop		znormalizowany dystans "hebli" do górnej krawędzi obrazu
zw		znormalizowana szerokość "hebla"
Description
“Heble” (“planes”) is a motion-controlled drone instrument. The name of the Miniature comes from a Polish slang term for a slider (e.g., one that allows you to adjust the volume) on studio audio equipment.
Wave your hands in front of the camera. See how the sounds change as you start moving at a different pace. Try different gestures and speeds of movement. Watch how the accompanying animations transform along with the music.
The work creates a consonance effect, allowing the sounds to harmoniously resonate with each other.
Technical documentation
Parametry przekazywane przez adres URL

bthreshold 0.0 … 1.0; domyślnie 0.5; próg jasości, powyżej którego piksel jest traktowany jako zawierający informację o ruchu
cellr stopień zaokroąglenia rogów “hebla”
cut 0.0 … 1.0; domyślnie 0.01; znormalizowany próg minimalnej jasności pikseli branych pod uwagę w pracy detektora ruchu
displaymode 0 … 5; domyślnie 5; tryb wyświetlania: 0 – obraz nieprzetworzony oraz wykryte ruchome obiekty, 1 – obraz po wzmocnienniu i odfiltrowaniu ciemnych obiektów oraz wykryte ruchome obiekty, 2 – tło oraz wykryte ruchome obiekty, 3 – obraz różnicowy (pomiędzy aktualnym obrazem a tłem) oraz wykryte ruchome obiekty, 4 – biarna reprezentacja obrazu różnicowego oraz wykryte ruchome obiekty, 5 – malowanie światłem (finalny efekt)
famo user | environment (lub env); domyślnie user; [facingMode] pozwala wymusić użycie przedniej (user) lub tylnej (environment) kamery na urządzeniach, które są wyposażone w podwójne kamery/aparaty (większość współczesnych urządzeń mobilnych)
feedback 0.0 … 1.0; poziom sprzężenia zwrotnego w obrazie tła
gui 0 lub 1; domyślnie 1; chowa/pokazuje panel z interfejsem graficznym
h pionowa rozdzielczość kamery
lang en lub pl; domyślnie en; ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
midioutchn numer kanału MIDI użytego do emisji komunikatów o stanie interfejsu (domyślnie 2)
midioutport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (nadawanie komunikatów)
mirror 0 lub 1; domyślnie 1; wyłącza/włącza lustrzane odbicie obrazu z urządzenia przechwytującego (zwykle kamery)
mul 0.0 … 1.0; domyślnie 0.1; znormalizowany poziom wzmocnienia (podbicie jasności) obrazu
pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
synth 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny generator dźwięku
tuning seria liczb (0 … 127) oddzielonych przecinkami, reprezentujacych wysokości nut MIDI każdego utworzonego “hebla” (ilość “hebli” będzie odpowiadała ilości liczb)
vol 0.0 … 1.0; ustala inicjalny poziom głośności instrumentu (globalny suwak “vol”)
w pozioma rozdzielczość kamery
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
zh znormalizowana wysokość “hebla”
zonecol 0xRRGGBB kolor stref
zpad znormalizowany dystans pomiędzy “heblami”
ztop znormalizowany dystans “hebli” do górnej krawędzi obrazu
zw znormalizowana szerokość “hebla”
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
planes ampimage 0.0 … 1.0; raport zmiany poziomu wzmocnienia obrazu
planes bthreshold 0.0 … 1.0; raport zmiany poziomu progu systemu wykrywania ruchu
planes displaymode 0 … 5 raport zmiany trybu wyświetlania
planes minbrightness 0.0 … 1.0; raport zmiany poziomu odcinania ciemnych rejonów obrazu
planes vol 0.0 … 1.0; raport zmiany poziomu głośności
planes zone raport stanu “hebla”: indeks, nuta MIDI, stopień wypełnienia
MIDI

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
CC numer kontrolera odpowiada numerowi “hebla”, wartość kontrolera odpowiada stopniowi wypełnienia
Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
planes ampimage 0.0 … 1.0; raport zmiany poziomu wzmocnienia obrazu
planes bthreshold 0.0 … 1.0; raport zmiany poziomu progu systemu wykrywania ruchu
planes displaymode 0 … 5 raport zmiany trybu wyświetlania
planes minbrightness 0.0 … 1.0; raport zmiany poziomu odcinania ciemnych rejonów obrazu
planes vol 0.0 … 1.0; raport zmiany poziomu głośności
planes zone raport stanu “hebla”: indeks, nuta MIDI, stopień wypełnienia
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="Heble">
  <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>Heble (Planes), Pawel Janicki, 2011-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="planes.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 planes = new Planes(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:320, h:240, flip:true},
    coords:{x:-1,y:-1,w:-1,h:-1},
    vida:{
      progressiveBackgroundFlag:true,
      imageFilterFeedback:0.9,
      imageFilterThreshold:0.1,
      handleBlobsFlag:false,
      normMinBlobMass:0.0001,
      normMaxBlobMass:0.2,
      normMinBlobArea:0.0001,
      normMaxBlobArea:0.2,
      trackBlobsFlag:false,
      handleActiveZonesFlag:true,
      trackBlobsMaxNormDist:0.3,
      mirror:Vida.MIRROR_NONE,
      rejectBlobsMethod:Vida.REJECT_INNER_BLOBS,
      approximateBlobPolygonsFlag:false,
      pointsPerApproximatedBlobPolygon:8,
      activeZonesNormFillThreshold:0.02,
      processor:(new Vida(p))
    }
  };
  let theme={
    bgColor:{r:0,g:0,b:0},imageToDisplay:3,preset:-1,
    pointer:true,speakerIcon:null,
  };
  let midi={
    isActive:false,
    processor:(new Midi()),outputPortIndex:-1,inputPortIndex:-1,
    channels:{in:-1,out:2},clock:{},ccmap:{in:{},out:{}},
    //memory:[],
    //min:36,max:72
  };
  let synth = new Synth(p);
  let useWorker =false;
  let guiContainer={
    urlParamsProxy:{
      imageFilterFeedback:0.5,imageFilterThreshold:0.5,activeZonesNormFillThreshold:0.2,
      vol:0.63, //alpha:255,
      displayMode:3, mulrgb:0.33,
      sliders:[50,52,55,57,59]
    },
    isGuiAlwaysOff:false,
    gui:null, isActive:true, lock:-1, lang:'en',
    handlers:{
      toVolSlider:{id:-1,label:{en:'vol',pl:'głośność'}},
      toImageFilterFeedbackSlider:{id:-1,label:{en:'feedback',pl:'feedback'}},
      toImageFilterThresholdSlider:{id:-1,label:{en:'brightness threshold',pl:'próg jasności'}},
      toImageShaderAmpSlider:{id:-1,label:{en:'image amp',pl:'wzmocnienie'}},
      toImageShaderCutSlider:{id:-1,label:{en:'min brightness',pl:'minimalna jasność'}},
      //toMidiMinSlider:{id:-1,label:{en:'MIDI min',pl:'MIDI min'}},
      //toMidiMaxSlider:{id:-1,label:{en:'MIDI max',pl:'MIDI max'}},
      //toMidiNoteSelector:{id:-1,label:{en:'',pl:''}},
      toDisplayModeSelector:{id:-1,label:{en:'display mode',pl:'tryb wyświetlania'}},
      //toActiveZonesNormFillThresholdSlider:{id:-1,label:{en:'zone threshold',pl:'próg strefy'}}
      //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[i]=-1;midi.memory[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();
    p.drawGesturalInterface(true, false, true); // _drawImageFlag,_drawRawBlobsAndZonesFlag,_drawGridFlag
    guiContainer.gui.draw();
    //p.push();p.translate(-p.width*0.5,-p.height*0.5,0);gesturalInterface.vida.processor.simpleDrawZones(p,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h);p.pop();
    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);
      p.repositionVidaZones();
      //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(guiContainer.urlParamsProxy.sliders);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();
  };
  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.toActiveZonesNormFillThresholdSlider.id].setValue(guiContainer.urlParamsProxy.activeZonesNormFillThreshold);
    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.toImageShaderAmpSlider.id].setValue(guiContainer.urlParamsProxy.mulrgb);
    planes.init(guiContainer.urlParamsProxy.sliders);
    //for(let i=0;i<guiContainer.urlParamsProxy.storedTuning.length;i++) guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(i,guiContainer.urlParamsProxy.storedTuning[i]);
    p.addZonesToVida();
  };
  p.addZonesToVida=function(){
    for(let i=0;i<planes.planes.items.length;i++){
      let zoneCoords=planes.planes.items[i].calcVidaNormCoords(gesturalInterface.coords,gesturalInterface.capture.w,gesturalInterface.capture.h,p.width,p.height);
      gesturalInterface.vida.processor.addActiveZone(zoneCoords.id,zoneCoords.normx,zoneCoords.normy,zoneCoords.normw,zoneCoords.normh);
    }
    console.log("[p.addZonesToVida] number of added zones: "+gesturalInterface.vida.processor.activeZones.length);
  };
  p.repositionVidaZones=function(){
    for(let i=0;i<gesturalInterface.vida.processor.activeZones.length;i++){
      let zoneCoords=planes.planes.items[i].calcVidaNormCoords(gesturalInterface.coords,gesturalInterface.capture.w,gesturalInterface.capture.h,p.width,p.height);
      gesturalInterface.vida.processor.activeZones[i].normX=zoneCoords.normx;
      gesturalInterface.vida.processor.activeZones[i].normY=zoneCoords.normy;
      gesturalInterface.vida.processor.activeZones[i].normW=zoneCoords.normw;
      gesturalInterface.vida.processor.activeZones[i].normH=zoneCoords.normh;
    }
  };
  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;
    gesturalInterface.vida.processor.setActiveZonesNormFillThreshold(gesturalInterface.vida.activeZonesNormFillThreshold);
  };
  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);
      planes.update(gesturalInterface.vida.processor.activeZones);
      p.messaging(gesturalInterface.vida.processor.activeZones);
    }
  };
  p.drawGesturalInterface=function(_drawImageFlag,_drawRawBlobsAndZonesFlag,_drawGridFlag){
    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(_drawGridFlag) planes.draw(p);
      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.messaging=function(_vidaZones){
    // built-in synth
    if(synth.isActive&&synth.audioEnabled){
      for(let i=0;i<_vidaZones.length;i++){
        synth.zoneEvent(i,planes.planes.items[i].normFill);
      }
    }
    // web socket
    if(webSocket.isActive&&webSocket.processor){
      if(webSocket.processor.isEnabled){
        for(let i=0;i<_vidaZones.length;i++){
          webSocket.processor.safeSend(["planes",i,planes.planes.items[i].midiNote,planes.planes.items[i].normFill]);
        }
      }
    }
    // max
    if(maxIsDetected){
      for(let i=0;i<_vidaZones.length;i++){
        window.max.outlet("planes",i,planes.planes.items[i].midiNote,planes.planes.items[i].normFill);
      }
    }
    // MIDI
    if(midi.isActive&&midi.processor&&(midi.outputPortIndex>=0)){
      if(midi.processor.isEnabled&&(midi.channels.out>=0)){
        let t=p.millis();
        for(let i=0;i<_vidaZones.length;i++){
          midi.processor.sendCC(i,Math.floor(planes.planes.items[i].normFill*127.0),midi.channels.out);
        }
      }
    }
  };
  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,true,400,280,true);guiContainer.gui.setBackgroundPanelRect(20,20,380,250,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,230,360,30,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('grid','vol',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','vol',_v]);}
      synth.setVol(_v);
    };
    guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
    // display mode
    let gui_sr_dsplmode = new SimpleRadio(30,190,50,30,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"}
        ]);
        gui_sr_dsplmode.setValue(guiContainer.urlParamsProxy.displayMode);
      break;
      case "en":
        gui_sr_dsplmode.setItems([
          {label:"in"},
          {label:"proc"},
          {label:"bg"},
          {label:"diff"},
          {label:"bin"}
        ]);
        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('grid','displaymode',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','displaymode',_v]);}
      theme.displayMode=_v;
      switch(_v){
        case 0: // in
          theme.imageToDisplay=1;
        break;
        case 1: // proc
          theme.imageToDisplay=3;
        break;
        case 2: // bg
          theme.imageToDisplay=4;
        break;
        case 3: // diff
          theme.imageToDisplay=5;
        break;
        case 4: // bin
          theme.imageToDisplay=6;
        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('grid','alpha',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','alpha',_v]);}
      pbl.blobAlpha=_v;
    };
    guiContainer.handlers.toTransparencySlider.id=guiContainer.gui.addItem(gui_sld_alpha);
    */
   // MIDI note selector
   /*
    let gui_mns_tng = new SimpleMidiNotesSelector(30,310,30,30,GUI.ORIENTATION_HORIZONTAL,36,12);
    gui_mns_tng.onChange=function(_id,_key,_status){
      let tuningarr=guiContainer.gui.items[_id].getAllValuesAsArray();
      if(webSocket.isActive) webSocket.processor.safeSend(["grid","tuning",p.b2i(tuningarr[0]),p.b2i(tuningarr[1]),p.b2i(tuningarr[2]),p.b2i(tuningarr[3]),p.b2i(tuningarr[4]),p.b2i(tuningarr[5]),p.b2i(tuningarr[6]),p.b2i(tuningarr[7]),p.b2i(tuningarr[8]),p.b2i(tuningarr[9]),p.b2i(tuningarr[10]),p.b2i(tuningarr[11])]);
      if(maxIsDetected) window.max.outlet('"grid",tuning',p.b2i(tuningarr[0]),p.b2i(tuningarr[1]),p.b2i(tuningarr[2]),p.b2i(tuningarr[3]),p.b2i(tuningarr[4]),p.b2i(tuningarr[5]),p.b2i(tuningarr[6]),p.b2i(tuningarr[7]),p.b2i(tuningarr[8]),p.b2i(tuningarr[9]),p.b2i(tuningarr[10]),p.b2i(tuningarr[11]));
      p.tune();
    };
    guiContainer.handlers.toMidiNoteSelector.id=guiContainer.gui.addItem(gui_mns_tng);
    */
    // MIDI max
    /*
    let gui_sld_midimax = new SimpleSlider(30,270,360,30,GUI.ORIENTATION_HORIZONTAL,false,0,127,midi.max,guiContainer.getLabelByLang(guiContainer.handlers.toMidiMaxSlider));
    gui_sld_midimax.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('grid','midimin',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','midimin',_v]);}
      p.tune();
    };
    guiContainer.handlers.toMidiMaxSlider.id=guiContainer.gui.addItem(gui_sld_midimax);
    */
    // MIDI min
    /*
    let gui_sld_midimin = new SimpleSlider(30,230,360,30,GUI.ORIENTATION_HORIZONTAL,false,0,127,midi.min,guiContainer.getLabelByLang(guiContainer.handlers.toMidiMinSlider));
    gui_sld_midimin.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('grid','midimax',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','midimax',_v]);}
      p.tune();
    };
    guiContainer.handlers.toMidiMinSlider.id=guiContainer.gui.addItem(gui_sld_midimin);
    */
    // amp image
    let gui_sld_ampimg = new SimpleSlider(30,150,360,30,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('grid','ampimage',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','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);
    // zone threshold
    /*
    let gui_sld_zthresh = new SimpleSlider(30,150,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,gesturalInterface.vida.activeZonesNormFillThreshold,guiContainer.getLabelByLang(guiContainer.handlers.toActiveZonesNormFillThresholdSlider));
    gui_sld_zthresh.onChange=function(_id,_v){
      if(maxIsDetected) window.max.outlet('grid','zthreshold',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','zthreshold',_v]);}
      gesturalInterface.vida.activeZonesNormFillThreshold=_v; guiContainer.urlParamsProxy.activeZonesNormFillThreshold=_v; p.transferGesturalInterfaceConfigToVida();
    };
    guiContainer.handlers.toActiveZonesNormFillThresholdSlider.id=guiContainer.gui.addItem(gui_sld_zthresh);
    */
    // min brightness
    let gui_sld_cutshdr = new SimpleSlider(30,110,360,30,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('grid','minbrightness',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','minbrightness',_v]);}
      gesturalInterface.capture.shader.params.threshold=_v;
    };
    guiContainer.handlers.toImageShaderCutSlider.id=guiContainer.gui.addItem(gui_sld_cutshdr);
    // brightness threshold
    let gui_sld_thrshld = new SimpleSlider(30,70,360,30,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('grid','bthreshold',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','bthreshold',_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,360,30,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('grid','feedback',_v);
      if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['grid','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){
        switch(arr[0].toLowerCase()){
          case "imagefilterfeedback":
            arr[1]=parseFloat(arr[1]); if(isNaN(arr[1])) return; if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
            gesturalInterface.vida.imageFilterFeedback=_v;p.transferGesturalInterfaceConfigToVida();
          break;
          case "imagefilterthreshold":
            arr[1]=parseFloat(arr[1]); if(isNaN(arr[1])) return; if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
            gesturalInterface.vida.imageFilterThreshold=_v;p.transferGesturalInterfaceConfigToVida();
          break;
          /*
          case "zonefillthreshold":
            arr[1]=parseFloat(arr[1]); if(isNaN(arr[1])) return; if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
            gesturalInterface.vida.activeZonesNormFillThreshold=_v;p.transferGesturalInterfaceConfigToVida();
          break;
          */
          case "vol":
            arr[1]=parseFloat(arr[1]); if(isNaN(arr[1])) return; if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
            if(guiContainer.handlers.toVolSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setValue(_v);
          break;
          case "displaymode":
            arr[1]=parseInt(arr[1]); if(isNaN(arr[1])) return; arr[1]=Math.abs(arr[1]); if(arr[1]<0) arr[1]=0; if(arr[1]>5) arr[1]=5;
            if(guiContainer.handlers.toVolSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setValue(_v);
          break;
          case "brightnesslocut":
            arr[1]=parseFloat(arr[1]); if(isNaN(arr[1])) return; if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
            if(guiContainer.handlers.toImageShaderCutSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toImageShaderCutSlider.id].setValue(_v);
          break;
          case "brightnessthreshold":
            arr[1]=parseFloat(arr[1]); if(isNaN(arr[1])) return; if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
            if(guiContainer.handlers.toImageShaderAmpSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toImageShaderAmpSlider.id].setValue(_v);
          break;
          default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
        }
      }else{
        if(arr.length===4){
          switch(arr[0].toLowerCase()){
            case "zonecol":
              arr[1]=parseInt(arr[1]); if(isNaN(arr[1])) return; arr[1]=Math.abs(arr[1]); if(arr[1]<0) arr[1]=0; if(arr[1]>255) arr[1]=255;
              arr[2]=parseInt(arr[2]); if(isNaN(arr[2])) return; arr[2]=Math.abs(arr[2]); if(arr[2]<0) arr[2]=0; if(arr[2]>255) arr[2]=255;
              arr[3]=parseInt(arr[3]); if(isNaN(arr[3])) return; arr[3]=Math.abs(arr[3]); if(arr[3]<0) arr[3]=0; if(arr[3]>255) arr[3]=255;
              grid.setZoneColor(arr[1],arr[2],arr[3]);
            break;
            default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
          }
        }else{
          if(arr.length===13){
            /*
            switch(arr[0].toLowerCase()){
              case "tuning":
                arr[1]=parseInt(arr[1]); if(isNaN(arr[1])) return; arr[1]=(arr[1]>0);
                arr[2]=parseInt(arr[2]); if(isNaN(arr[2])) return; arr[2]=(arr[2]>0);
                arr[3]=parseInt(arr[3]); if(isNaN(arr[3])) return; arr[3]=(arr[3]>0);
                arr[4]=parseInt(arr[4]); if(isNaN(arr[4])) return; arr[4]=(arr[4]>0);
                arr[5]=parseInt(arr[5]); if(isNaN(arr[5])) return; arr[5]=(arr[5]>0);
                arr[6]=parseInt(arr[6]); if(isNaN(arr[6])) return; arr[6]=(arr[6]>0);
                arr[7]=parseInt(arr[7]); if(isNaN(arr[7])) return; arr[7]=(arr[7]>0);
                arr[8]=parseInt(arr[8]); if(isNaN(arr[8])) return; arr[8]=(arr[8]>0);
                arr[9]=parseInt(arr[9]); if(isNaN(arr[9])) return; arr[9]=(arr[9]>0);
                arr[10]=parseInt(arr[10]); if(isNaN(arr[10])) return; arr[10]=(arr[10]>0);
                arr[11]=parseInt(arr[11]); if(isNaN(arr[11])) return; arr[11]=(arr[11]>0);
                arr[12]=parseInt(arr[12]); if(isNaN(arr[12])) return; arr[12]=(arr[12]>0);
                if(guiContainer.handlers.toMidiNoteSelector.id>=0){
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(0,arr[1]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(1,arr[2]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(2,arr[3]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(3,arr[4]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(4,arr[5]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(5,arr[6]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(6,arr[7]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(7,arr[8]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(8,arr[9]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(9,arr[10]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(10,arr[11]);
                  guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(11,arr[12]);
                }
              break;
              default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
            }
            */
          }else{
            //
          }
        }
      }
    });
  };
  p.initMax=function(){
    if(!maxIsDetected) return; document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    window.max.bindInlet('imagefilterfeedback',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
      gesturalInterface.vida.imageFilterFeedback=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('imagefilterthreshold',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
      gesturalInterface.vida.imageFilterThreshold=_v;p.transferGesturalInterfaceConfigToVida();
    });
    /*
    window.max.bindInlet('zonefillthreshold',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
      gesturalInterface.vida.activeZonesNormFillThreshold=_v;p.transferGesturalInterfaceConfigToVida();
    });
    */
    window.max.bindInlet('vol',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
      if(guiContainer.handlers.toVolSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setValue(_v);
    });
    window.max.bindInlet('displaymode',function(_v){
      _v=parseInt(_v); if(isNaN(_v)) return; _v=Math.abs(_v); if(_v<0) _v=0; if(_v>5) _v=5;
      if(guiContainer.handlers.toDisplayModeSelector.id>=0) guiContainer.gui.items[guiContainer.handlers.toDisplayModeSelector.id].setValue(_v);
    });
    window.max.bindInlet('brightnesslocut',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
      if(guiContainer.handlers.toImageShaderCutSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toImageShaderCutSlider.id].setValue(_v);
    });
    window.max.bindInlet('brightnessthreshold',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return; if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
      if(guiContainer.handlers.toImageShaderAmpSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toImageShaderAmpSlider.id].setValue(_v);
    });
    window.max.bindInlet('zonecol',function(_r,_g,_b){
      _r=parseInt(_r); if(isNaN(_r)) return; if(_r<0) _r=0; if(_r>255) _r=255;
      _g=parseInt(_g); if(isNaN(_g)) return; if(_g<0) _g=0; if(_g>255) _g=255;
      _b=parseInt(_b); if(isNaN(_b)) return; if(_b<0) _b=0; if(_b>255) _b=255;
      grid.setZoneColor(_r,_g,_b);
    });
    /*
    window.max.bindInlet('tuning',function(_v0,_v1,_v2,_v3,_v4,_v5,_v6,_v7,_v8,_v9,_v10,_v11,){
      _v0=parseInt(_v0); if(isNaN(_v0)) return; _v0=(_v0>0);
      _v1=parseInt(_v1); if(isNaN(_v1)) return; _v1=(_v1>0);
      _v2=parseInt(_v2); if(isNaN(_v2)) return; _v2=(_v2>0);
      _v3=parseInt(_v3); if(isNaN(_v3)) return; _v3=(_v3>0);
      _v4=parseInt(_v4); if(isNaN(_v4)) return; _v4=(_v4>0);
      _v5=parseInt(_v5); if(isNaN(_v5)) return; _v5=(_v5>0);
      _v6=parseInt(_v6); if(isNaN(_v6)) return; _v6=(_v6>0);
      _v7=parseInt(_v7); if(isNaN(_v7)) return; _v7=(_v7>0);
      _v8=parseInt(_v8); if(isNaN(_v8)) return; _v8=(_v8>0);
      _v9=parseInt(_v9); if(isNaN(_v9)) return; _v9=(_v9>0);
      _v10=parseInt(_v10); if(isNaN(_v10)) return; _v10=(_v10>0);
      _v11=parseInt(_v11); if(isNaN(_v11)) return; _v11=(_v11>0);
      if(guiContainer.handlers.toMidiNoteSelector.id>=0){
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(0,_v0);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(1,_v1);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(2,_v2);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(3,_v3);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(4,_v4);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(5,_v5);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(6,_v6);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(7,_v7);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(8,_v8);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(9,_v9);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(10,_v10);
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(11,_v11);
      }
    });
    */
  };
  p.huskColorComponentsARGB=function(_argb){
    return{
      a:( (_argb >> 24) & 0xFF),
      r:( (_argb >> 16) & 0xFF),
      g:( (_argb >> 8) & 0xFF),
      b:( _argb & 0xFF)
    };
  };
  p.huskColorComponentsRGB=function(_rgb){
    return{
      r:( (_rgb >> 16) & 0xFF),
      g:( (_rgb >> 8) & 0xFF),
      b:( _rgb & 0xFF)
    };
  };
  p.handleUrlParams=function(){
    try{
      let urlparams = p.getURLParams();
      if(urlparams){
        if("gui" in urlparams){let v=parseInt(urlparams.gui); if(!isNaN(v)){guiContainer.isActive=(v>0);}console.log("[p.handleUrlParams] gui: "+guiContainer.isActive);}
        if("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("bthreshold" in urlparams){
          let v=parseFloat(urlparams.bthreshold);
          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 brightness threshold: "+v);
          }
        }
        /*
        if("zthreshold" in urlparams){
          let v=parseFloat(urlparams.zthreshold);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.urlParamsProxy.activeZonesNormFillThreshold=v; console.log("[p.handleUrlParams] vida zone threshold: "+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("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("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("midioutchn" in urlparams){if(!isNaN(urlparams.midioutchn)){midi.channels.out=(Math.abs(Math.floor(urlparams.midioutchn))%16); console.log("[p.handleUrlParams] MIDI output channel index: "+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);}}
        if("zonecol" in urlparams){
          let v=parseInt(urlparams.zonecol);
          if(!isNaN(v)){
            let col=p.huskColorComponentsRGB(v);
            grid.setZoneColor(col.r,col.g,col.b);}
          console.log("[p.handleUrlParams] zone color: "+col.r+" "+col.g+" "+col.b);
        }
        if("tuning" in urlparams){
          let v1=urlparams.tuning.split(',');
          if(Array.isArray(v1)){
            let v2=[];
            for(let i=0;i<v1.length;i++){
              let temp=parseInt(v1[i]);
              if(isNaN(temp)) continue; if((temp<0)||(temp>127)) continue;
              v2[v2.length]=temp;
            }
            if(v2.length>0){
              guiContainer.urlParamsProxy.sliders.splice(0,guiContainer.urlParamsProxy.sliders.length);
              for(let i=0;i<v2.length;i++) guiContainer.urlParamsProxy.sliders[i]=v2[i];
            }
            console.log("[p.handleUrlParams] tuning: "+v2.toString());
          }
        }
        /*
        if("tuning" in urlparams){
          let v=parseInt(urlparams.tuning);
          if(!isNaN(v)){
            let s=""+v; for(let i=0;i<guiContainer.urlParamsProxy.storedTuning.length;i++) guiContainer.urlParamsProxy.storedTuning[i]=false;
            for(let i=0;i<s.length();i++){let n=s.length()-i-1; if((n>=0)&&(n<s.length())){if(s.charAt(n)!=='0')guiContainer.urlParamsProxy.storedTuning[n]=true;}else{break;}}
            let b=true; for(let i=0;i<guiContainer.urlParamsProxy.storedTuning.length;i++) if(guiContainer.urlParamsProxy.storedTuning[i]){b=false;break;}
            if(b) for(let i=0;i<guiContainer.urlParamsProxy.storedTuning.length;i++) guiContainer.urlParamsProxy.storedTuning[i]=true;
          }
          console.log("[p.handleUrlParams] tuning: "+guiContainer.urlParamsProxy.storedTuning[0]+" "+guiContainer.urlParamsProxy.storedTuning[1]+" "+guiContainer.urlParamsProxy.storedTuning[2]+" "+guiContainer.urlParamsProxy.storedTuning[3]+" "+guiContainer.urlParamsProxy.storedTuning[4]+" "+guiContainer.urlParamsProxy.storedTuning[5]+" "+guiContainer.urlParamsProxy.storedTuning[6]+" "+guiContainer.urlParamsProxy.storedTuning[7]+" "+guiContainer.urlParamsProxy.storedTuning[8]+" "+guiContainer.urlParamsProxy.storedTuning[9]+" "+guiContainer.urlParamsProxy.storedTuning[10]+" "+guiContainer.urlParamsProxy.storedTuning[11]);
        }
        */
        //if("gridw" in urlparams){let v=parseInt(urlparams.gridw); if(!isNaN(v)){if(v>0) guiContainer.urlParamsProxy.grid.w=v; console.log("[p.handleUrlParams] guiContainer.urlParamsProxy.grid.w: "+v);}}
        //if("gridh" in urlparams){let v=parseInt(urlparams.gridh); if(!isNaN(v)){if(v>0) guiContainer.urlParamsProxy.grid.h=v; console.log("[p.handleUrlParams] guiContainer.urlParamsProxy.grid.h: "+v);}}
        if("ztop" in urlparams){
          let v=parseFloat(urlparams.ztop);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; planes.planes.top=v;}
          console.log("[p.handleUrlParams] zone top: "+v);
        }
        if("zpad" in urlparams){
          let v=parseFloat(urlparams.zpad);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; planes.planes.padding.horizontal=v;}
          console.log("[p.handleUrlParams] zone padding: "+v);
        }
        if("zw" in urlparams){
          let v=parseFloat(urlparams.zw);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; planes.planes.w=v;}
          console.log("[p.handleUrlParams] zone w: "+v);
        }
        if("zh" in urlparams){
          let v=parseFloat(urlparams.zh);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; planes.planes.h=v;}
          console.log("[p.handleUrlParams] zone h: "+v);
        }
        if("cellr" in urlparams){
          let v=parseFloat(urlparams.cellr);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; grid.grid.r=v;}
          console.log("[p.handleUrlParams] r: "+v);
        }
        //if("voices" in urlparams){let v=parseInt(urlparams.voices); if(!isNaN(v)){v=Math.floor(v); if(v>=1) synth.setPolyphonyBeforeInit(_v);} console.log("[p.handleUrlParams] voices: "+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"
								

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

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/60.);
								

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

									planes.js
									class PlaneCell{
  constructor(_id,_normx,_normy,_normw,_normh,_midiNote){
    this.id=_id;this.normx=_normx;this.normy=_normy;this.normw=_normw;this.normh=_normh;
    this.normFill=0.0;this.midiNote=_midiNote;
  }
  calcVidaNormCoords(_coords,_vidaImgSrcPixWidth,_vidaImgSrcPixHeight,_ctxWidth,_ctxHeight){ // _ctx is pix based
    return {
      id:this.id,
      normx:((this.normx*_ctxWidth-_coords.x)/_coords.w),
      normy:((this.normy*_ctxHeight-_coords.y)/_coords.h),
      normw:((this.normw*_ctxWidth)/_coords.w),
      normh:((this.normh*_ctxHeight)/_coords.h)
    };
  }
}

class Planes{
  constructor(_p){
    this.p=_p;
    this.planes={n:5,items:[],top:0.25,padding:{horizontal:0.075},w:0.1,h:0.5,r:5};
    this.planeColor={r:255,g:255,b:0};
  }
  init(_itemsArr){ // arr of midi notes
    this.planes.items.splice(0,this.planes.items.length);
    if(_itemsArr===null) return; if(_itemsArr===undefined) return; if(_itemsArr.length<1) return;
    this.planes.n=_itemsArr.length;
    let w=this.planes.n*this.planes.w+(this.planes.n-1)*this.planes.padding.horizontal;
    for(let i=0;i<this.planes.n;i++){
      this.planes.items[i] = new PlaneCell(
        i,
        (1.0-w)*0.5+i*(this.planes.w+this.planes.padding.horizontal),
        this.planes.top,
        this.planes.w,this.planes.h,
        _itemsArr[i]
      );
    }
  }
  update(_vidaZones){
    for(let i=0;i<_vidaZones.length;i++){
      this.planes.items[i].normFill=_vidaZones[i].normFillFactor;
    }
  }
  draw(_ctx){
    if(_ctx===null) return; if(_ctx===undefined) return; if((_ctx.width===null)||(_ctx.height===null)) return;
    let h1=0.0; let h2=0.0;
    for(let i=0;i<this.planes.items.length;i++){
      h1=this.planes.items[i].normh*_ctx.height;
      h2=h1*this.planes.items[i].normFill;
      _ctx.noStroke();_ctx.fill(this.planeColor.r,this.planeColor.g,this.planeColor.b,128);
      _ctx.rect(
        this.planes.items[i].normx*_ctx.width,this.planes.items[i].normy*_ctx.height+h1-h2,
        this.planes.items[i].normw*_ctx.width,h2,
        this.planes.r,this.planes.r,this.planes.r,this.planes.r
      );
      _ctx.noFill();_ctx.stroke(this.planeColor.r,this.planeColor.g,this.planeColor.b); _ctx.strokeWeight(1);
      _ctx.rect(
        this.planes.items[i].normx*_ctx.width,this.planes.items[i].normy*_ctx.height,
        this.planes.items[i].normw*_ctx.width,h1,
        this.planes.r,this.planes.r,this.planes.r,this.planes.r
      );
    }
  }
  setZoneColor(_r,_g,_b){
    if(isNaN(_r)||isNaN(_g)||isNaN(_b)) return;
    _r=Math.floor(Math.abs(_r));_g=Math.floor(Math.abs(_g));_b=Math.floor(Math.abs(_b));
    if(_r<0) _r=0; if(_r>255) _r=255; if(_g<0) _g=0; if(_g>255) _g=255; if(_b<0) _b=0; if(_b>255) _b=255;
    this.planeColor.r=_r;this.planeColor.g=_g;this.planeColor.b=_b;
  }
  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(
        '[Planes, 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();
  }
}
								

									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.ampMul=0.5;
    this.oscilBank=[];
  }
  init(_tuningArr){
    if((!this.isActive)||this.audioEnabled) return;
    const myContext = new AudioContext({latencyHint:this.toneLatency}); Tone.setContext(myContext);
    for(let i=0;i<_tuningArr.length;i++){
      let f=this.mtof(_tuningArr[i]);
      this.oscilBank[i]={vol:0.0, osc:(new Tone.Oscillator(f,"sawtooth").toMaster().start())}; // -Infinity
      //this.oscilBank[i]={vol:0.0, osc:(new Tone.Oscillator(f,"sawtooth").toDestination())};
      //this.oscils[i] = new Tone.Oscillator(this.mtof(_tuningArr[i]), "sawtooth").toDestination(); //.toMaster().start();
      this.oscilBank[i].osc.partials = [1, 2, 3];
      this.oscilBank[i].osc.volume.value=this.mag2db(this.oscilBank[i].vol*this.ampFactor);
    }
    //Tone.start();
    this.audioEnabled=true;
    console.log("[Synth, init] internal synth enabled, latency: "+this.toneLatency);
  }
  setOscilVol(_idx,_mag){
    if(isNaN(_idx)||isNaN(_mag)) return;
    _idx=Math.floor(_idx); if((_idx<0)||(_idx>=this.oscilBank.length)) return;
    if((_mag<0.0)||(_mag>1.0)) return;
    this.oscilBank[_idx].vol=_mag;
    this.oscilBank[_idx].osc.volume.rampTo(this.mag2db(this.oscilBank[_idx].vol*this.ampFactor), 0.1);
    //this.oscilBank[_idx].osc.volume.value=this.mag2db(this.oscilBank[_idx].vol*this.ampFactor);
  }
  setVol(_mag){
    this.ampFactor=_mag*this.ampMul;
    for(let i=0;i<this.oscilBank.length;i++) this.oscilBank[i].osc.volume.value=this.mag2db(this.oscilBank[i].vol*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.cellSynth.synth) this.cellSynth.synth.releaseAll();}
  //normValToMidiPitch(_v){return Math.floor(_v*48+36);}
  zoneEvent(_idx,_normFill){
    if((!this.isActive)||(!this.audioEnabled)) return;
    this.setOscilVol(_idx,_normFill);
  }
  clearSoundsCounter(){
    //this.cellSynth.numOfSounds=0;this.cellSynth.freshFrame=true;
    //this.oldBlob.numOfSounds=0;this.oldBlob.freshFrame=true;
  }
  mtof(_m){return (440.0*Math.pow(2.0,(_m-69.0)/12.0));}

  //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);} 
}
								

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

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

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