Krata

ciało, intuicja, reakcje i oczekiwania
Podgląd: domyślna kamera Podgląd: tylna kamera
Parametry
bthreshold		próg jasości, powyżej którego piksel jest traktowany jako zawierający informację o ruchu
cellr		znormalizowana wartość stopnia zaokrąglenia rogów komórek kraty
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 wzmocnieniu 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)
epleft		znormalizowana odległość kraty od lewej krawędzi pola widzenia kamery
epright		znormalizowana odległość kraty od dolnej krawędzi pola widzenia kamery
epright		znormalizowana odległość kraty od prawej krawędzi pola widzenia kamery
eptop		znormalizowana odległość kraty od górnej krawędzi pola widzenia kamery
feedback		domyślnie 0.5 intensywność sprzężenia zwrotnego dla obrazu tła
gphor		znormalizowana odległość pomiędzy komórkami kraty w tym samym rzędzie
gpver		znormalizowana odległość pomiędzy komórkami kraty w tej samej kolumnie
gridh		ilość komórek kraty w każdej kolumnie
gridw		ilość komórek kraty w każdym rzędzie
gui		chowa / pokazuje panel z interfejsem graficznym
lang		ustawia język interfejsu
mirror		lustrzane odbicie obrazu z kamery
mul		znormalizowany poziom wzmocnienia (podbicie jasności) obrazu
pointer		chowa / pokazuje kursor myszy
synth		wyłącza/włącza wewnętrzny generator dźwięku
voices		ilość głosów wewnętrznego syntezatora
vol		ustala inicjalny poziom głośności instrumentu (globalny suwak "vol")
zthreshold		próg stopnia wypełnienia komórki kraty od którego jest ona traktowana jako zawierająca ruch
Opis
„Krata” to sterowany ruchem polifoniczny instrument muzyczny w formie nałożonej na obraz widziany przez kamerę matrycy komórek których „naruszenie” za pomocą ruchu powoduje wyzwolenie dźwięku. Praca luźno nawiązuje do „Platformy interaktywnej” (Paweł Janicki, Dominika Sobolewska, 2011) jednej ze starszych instalacji Interaktywnego Placu Zabaw. „Krata”, podobnie jak pokrewne Miniatury („Malowanie Światłem”, „Heble”) jest skonstruowana w taki sposób, by ominąć typowy problem prac interaktywnych związany ze sztywnym ograniczeniem ilości osób wchodzących w kontakt z dziełem: „Krata” i pokrewne Miniatury mogą być prezentowane i użytkowane w różnych skalach i wersjach, angażując jedną lub więcej osób. Zarazem „Krata”, pomimo swojej wyraźnie programistyczno-digitalnej proweniencji koncentruje się na ciele, intuicji, naturalnych reakcjach i oczekiwaniach.
Dokumentacja techniczna
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 0.0 … 1.0 znormalizowana wartość stopnia zaokrąglenia rogów komórek kraty
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 wzmocnieniu 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)
epleft 0.0 … 1.0 znormalizowana odległość kraty od lewej krawędzi pola widzenia kamery
epright 0.0 … 1.0 znormalizowana odległość kraty od dolnej krawędzi pola widzenia kamery
epright 0.0 … 1.0 znormalizowana odległość kraty od prawej krawędzi pola widzenia kamery
eptop 0.0 … 1.0 znormalizowana odległość kraty od górnej krawędzi pola widzenia kamery
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; domyślnie 0.5 intensywność sprzężenia zwrotnego dla obrazu tła
gphor 0.0 … 1.0 znormalizowana odległość pomiędzy komórkami kraty w tym samym rzędzie
gpver 0.0 … 1.0 znormalizowana odległość pomiędzy komórkami kraty w tej samej kolumnie
gridh ilość komórek kraty w każdej kolumnie
gridw ilość komórek kraty w każdym rzędzie
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)
midimax najwyższy użyty dźwięk (numer nuty MIDI)
midimin najniższy użyty dźwięk (numer nuty MIDI)
midioutchn domyślnie wyłączone; numer kanału MIDI do zewnętrznego sterowania Miniaturą (nadawanie komunikatów)
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 C c# D d# E F f# G g# A a# B; sekwencja binarna złożona z 12 liczb (0 lub 1), z których każda określa, czy odpowiadający jej pozycją dźwięk w oktawie jest włączony
voices ilość głosów wewnętrznego syntezatora
voices ilość głosów wewętrznego sytezatora
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)
zonecol 0xRRGGBB kolor stref
zthreshold 0.0 … 1.0; domyślnie 0.5; próg stopnia wypełnienia komórki kraty od którego jest ona traktowana jako zawierająca ruch
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
Nie dotyczy
Komunikaty wysyłane przez Miniaturę
grid ampimage 0.0 … 1.0; raport zmiany poziomu wzmocnienia obrazu
grid bthreshold 0.0 … 1.0; raport zmiany poziomu progu systemu wykrywania ruchu
grid cell raport zmiany statusu komórki kraty: indeks, kolumna, rząd, status (włączona/wyłączona), znormalizowana wartość stopienia wypełnienia
grid displaymode 0 … 5 raport zmiany trybu wyświetlania
grid feedback 0.0 … 1.0; raport zmiany poziomu sprzężenia zwrotnego w systemie wykrywania tła obrazu
grid midimax raportuje zmianę najwyzszego wykorzystanego dźwięku (numer nuty MIDI)
grid midimin raportuje zmianę najniższego wykorzystanego dźwięku (numer nuty MIDI)
grid minbrightness 0.0 … 1.0; raport zmiany poziomu odcinania ciemnych rejonów obrazu
grid tuning raportuje zmianę stroju (zwraca sekwencję binarną 12 liczb oznaczających włączenie lub wyłączenie danego dźwięku w oktawie)
grid vol 0.0 … 1.0; raport zmiany poziomu głośności
grid zthreshold 0.0 … 1.0; raport zmiany poziomu progu systemu wykrywania ruchu wewnątrz komórek kraty
MIDI

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
note on/off nuta MIDI odpowiadająca strojowi komórce kraty zmieniającej status
Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura
Nie dotyczy
Komunikaty wysyłane przez Miniaturę
grid ampimage 0.0 … 1.0; raport zmiany poziomu wzmocnienia obrazu
grid bthreshold 0.0 … 1.0; raport zmiany poziomu progu systemu wykrywania ruchu
grid cell raport zmiany statusu komórki kraty: indeks, kolumna, rząd, status (włączona/wyłączona), znormalizowana wartość stopienia wypełnienia
grid displaymode 0 … 5 raport zmiany trybu wyświetlania
grid feedback 0.0 … 1.0; raport zmiany poziomu sprzężenia zwrotnego w systemie wykrywania tła obrazu
grid midimax raportuje zmianę najwyzszego wykorzystanego dźwięku (numer nuty MIDI)
grid midimin raportuje zmianę najniższego wykorzystanego dźwięku (numer nuty MIDI)
grid minbrightness 0.0 … 1.0; raport zmiany poziomu odcinania ciemnych rejonów obrazu
grid tuning raportuje zmianę stroju (zwraca sekwencję binarną 12 liczb oznaczających włączenie lub wyłączenie danego dźwięku w oktawie)
grid vol 0.0 … 1.0; raport zmiany poziomu głośności
grid zthreshold 0.0 … 1.0; raport zmiany poziomu progu systemu wykrywania ruchu wewnątrz komórek kraty
Kod źródłowy
									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="Krata">
  <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>Krata (The Grid), 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="grid.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 grid = new Grid(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,
      grid:{w:6,h:4},
      //storedTuning:[true,false,true,false,true,true,false,true,false,true,false,true]
      storedTuning:[true,false,true,false,true,false,false,true,false,true,false,false]
    },
    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();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);
    grid.init(guiContainer.urlParamsProxy.grid.w,guiContainer.urlParamsProxy.grid.h);
    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 x=0;x<grid.grid.w;x++){
      for(let y=0;y<grid.grid.h;y++){
        let zoneCoords=grid.grid.cells[x][y].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(){
    let x=0; let y=0;
    for(let i=0;i<gesturalInterface.vida.processor.activeZones.length;i++){
      x=gesturalInterface.vida.processor.activeZones[i].id%grid.grid.w;
      y=Math.floor(gesturalInterface.vida.processor.activeZones[i].id/grid.grid.w);
      let zoneCoords=grid.grid.cells[x][y].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);
      grid.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) grid.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){
    let x=0; let y=0; synth.clearSoundsCounter();
    // built-in synth
    if(synth.isActive&&synth.audioEnabled){
      for(let i=0;i<_vidaZones.length;i++){
        x=_vidaZones[i].id%grid.grid.w;y=Math.floor(_vidaZones[i].id/grid.grid.w);
        //this.grid.cells[x][y].normFill; this.grid.cells[x][y].triggered; this.grid.cells[x][y].changed;
        //console.log(grid.grid.cells[x][y].triggered);
        if(grid.grid.cells[x][y].changed) synth.zoneEvent(grid.grid.cells[x][y].midiNote, 0.75, grid.grid.cells[x][y].triggered);
      }
    }
    // web socket
    if(webSocket.isActive&&webSocket.processor){
      if(webSocket.processor.isEnabled){
        for(let i=0;i<_vidaZones.length;i++){
          x=_vidaZones[i].id%grid.grid.w;y=Math.floor(_vidaZones[i].id/grid.grid.w);
          if(grid.grid.cells[x][y].changed) webSocket.processor.safeSend(["grid",_vidaZones[i].id,x,y,grid.grid.cells[x][y].triggered,grid.grid.cells[x][y].normFill]);
        }
      }
    }
    // max
    if(maxIsDetected){
      for(let i=0;i<_vidaZones.length;i++){
        x=_vidaZones[i].id%grid.grid.w;y=Math.floor(_vidaZones[i].id/grid.grid.w);
        if(grid.grid.cells[x][y].changed) window.max.outlet("grid",_vidaZones[i].id,x,y,grid.grid.cells[x][y].triggered,grid.grid.cells[x][y].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++){
          x=_vidaZones[i].id%grid.grid.w;y=Math.floor(_vidaZones[i].id/grid.grid.w);
          if(grid.grid.cells[x][y].triggered){
            if(midi.memory[grid.grid.cells[x][y].midiNote]>=0) midi.processor.sendMidiNote(grid.grid.cells[x][y].midiNote,0.0,midi.channels.out);
            midi.processor.sendMidiNote(grid.grid.cells[x][y].midiNote,0.75,midi.channels.out);
            midi.memory[grid.grid.cells[x][y].midiNote]=t;
          }else{
            if(midi.memory[grid.grid.cells[x][y].midiNote]>=0){
              midi.processor.sendMidiNote(grid.grid.cells[x][y].midiNote,0.0,midi.channels.out);
              midi.memory[grid.grid.cells[x][y].midiNote]=-1;
            }
          }
        }
      }
    }
  };
  p.tune=function(){
    let tuningarr=guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].getAllValuesAsArray();
    let midimin=guiContainer.gui.items[guiContainer.handlers.toMidiMinSlider.id].getValue();
    midimin=Math.abs(Math.floor(midimin)); if(midimin<0) midimin=0; if(midimin>127) midimin=127;
    let midimax=guiContainer.gui.items[guiContainer.handlers.toMidiMaxSlider.id].getValue();
    midimax=Math.abs(Math.floor(midimax)); if(midimax<0) midimax=0; if(midimax>127) midimax=127;
    if(midimin>midimax){let swap=midimin; midimin=midimax; midimax=swap;}
    if(synth.isActive&&synth.audioEnabled) synth.flush();
    if(midi.isActive&&midi.processor&&(midi.outputPortIndex>=0)){
      if(midi.processor.isEnabled&&(midi.channels.out>=0)){
        for(let i=0;i<midi.memory.length;i++){
          if(midi.memory[i]>=0){
            midi.processor.sendMidiNote(i,0.0,midi.channels.out);midi.memory[i]=-1;
          }
        }
      }
    }
    grid.tune(gesturalInterface.vida.processor.activeZones,midimin,midimax,tuningarr);
  };
  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,435,true);guiContainer.gui.setBackgroundPanelRect(20,20,380,410,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,390,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,350,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);
    */
    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,190,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 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("epleft" in urlparams){
          let v=parseFloat(urlparams.epleft);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; grid.grid.edgepadding.left=v;}
          console.log("[p.handleUrlParams] edge padding left: "+v);
        }
        if("epright" in urlparams){
          let v=parseFloat(urlparams.right);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; grid.grid.edgepadding.right=v;}
          console.log("[p.handleUrlParams] edge padding right: "+v);
        }
        if("epbottom" in urlparams){
          let v=parseFloat(urlparams.bottom);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; grid.grid.edgepadding.bottom=v;}
          console.log("[p.handleUrlParams] edge padding bottom: "+v);
        }
        if("eptop" in urlparams){
          let v=parseFloat(urlparams.top);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; grid.grid.edgepadding.top=v;}
          console.log("[p.handleUrlParams] edge padding top: "+v);
        }
        if("gpver" in urlparams){
          let v=parseFloat(urlparams.gpver);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; grid.grid.gridpadding.vertical=v;}
          console.log("[p.handleUrlParams] grid padding vertical: "+v);
        }
        if("gphor" in urlparams){
          let v=parseFloat(urlparams.gphor);
          if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; grid.grid.gridpadding.horizontal=v;}
          console.log("[p.handleUrlParams] grid padding horizontal: "+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);
    }
  }
}
								

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

									roi.js
									
								

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

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

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