Vida

computer vision – computational transgression
Preview: default camera Preview: back camera
Parameters
mirror		mirorr the camera image
prst		launches the Miniature with a set of parameters: 0 – motion detection in 3 active zones; 1 – detection of moving objects
Description
Vida is a browser-based (slightly dusted off) version of the algorithms and code used in some of the interactive installations created at the WRO Art Center and as part of its educational activities since approximately 2008 (since the opening of the headquarters at ul. Widok 7). These mechanisms were used in early works presented as part of the Interactive Playground (“Faktury [Janicki/Mastej/Sobolewska], “Painting with Light” [Janicki/Sobolewska]), “Dies Irae” by Serhiy Petljuk, “Stay in Touch” by Maryna Khrypun and Valerie Karpan, etc.
Vida incorporates two computer vision (CV) mechanisms: a simple system for detecting motion in designated zones and an algorithm for detecting and tracking moving objects within the camera’s field of view. For some time now, such tasks have typically been entrusted to AI-based systems, but — from a practical perspective — Miniatura’s content can be useful for those designing software designed to run on devices with limited performance. Vida is also suitable for rapid prototyping and educational activities. The source code of Miniatura (especially the “heart” of Miniatura responsible for image processing) was intentionally left unedited and constitutes an interesting monument of “algorithmic literature” — with all its overrides and changes. Vida is therefore a Miniatura with strong instrumental origins — it can be coupled, as a synthetic sense, with other programs or devices, or rebuilt independently.
In the context of considerations on the connections between aesthetics and computational processes, the Hoshen–Kopelman algorithm (more: https://en.wikipedia.org/wiki/Hoshen–Kopelman_algorithm) used in Miniatura for object detection in an image is of great interest. It allows for a transition from a two-dimensional matrix of monochromatic “pixels” to a description in which groups of “pixels” forming separate objects are described by unique (for those objects) indices. This is a simple procedure, but it offers an informative “leap” from mechanical reproduction to the first steps of “understanding” or “interpreting” an image. Understanding the algorithm’s operation can evoke a sense of “computational transgression” — an experience of the “uncanny” resulting from the transition between two methods of perceiving reality.
Technical documentation
Parameters passed via URL

famo user | environment (or env); default user; [facingMode] allows forcing the use of the front (user) or rear (environment) camera on devices equipped with dual cameras (most modern mobile devices)
worker 0 or 1; default 0; allows blocking the browser’s built-in mechanisms that suspend the program when the window is not visible
mirror 0 or 1; default 0; disables/enables mirroring of the camera image (the “mirror” toggle)
ws address; disabled by default; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of Miniature and customization)
xws address; disabled by default; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of Miniature and customization)
w horizontal camera resolution
h vertical camera resolution
prst launches Miniature with a parameter set: 0 – motion detection in 3 active zones; 1 – detection of moving objects
Messages passed via WebSocket

Messages to which Miniature responds
removezone id [integer greater than or equal to 0] removes the zone with the specified index
handlezones 0 or 1; disables or enables handling of active zones
handleblobs 0 or 1; disables or enables handling of moving object detection
imagefilterfeedback 0.0 … 1.0; feedback level in the background detection system
imagefilterthreshold 0.0 … 1.0; motion detector activation threshold
zonefillthreshold 0.0 … 1.0; normalized fill level of a zone required for motion detector activation
approximateblobpolygons 0 or 1; disables or enables calculation of a rough contour of a moving object
addzone id [integer greater than or equal to 0] x [0.0 … 1.0] y [0.0 … 1.0] w [0.0 … 1.0] h [0.0 … 1.0]
minblobarea 0.0 … 1.0; minimum normalized area of a moving object
maxblobarea 0.0 … 1.0; maximum normalized area of a moving object
minblobmass 0.0 … 1.0; minimum normalized virtual mass of a moving object
maxblobmass 0.0 … 1.0; maximum normalized virtual mass of a moving object
trackblobs 0 or 1 (default 1); disables or enables handling of moving object tracking and maintaining their identifying indices (id) where possible
maxblobdist 0.0 … 1.0; maximum normalized distance within which moving objects are treated as a continuation of previous ones
approximateblobpolygonspoints > 2; number of points in the simplified outline of a moving object
Messages sent by Miniature
“vida” “blobs” i i – number of detected moving objects
“vida” “blob” id normMassCenterX normMassCenterY normRectX normRectY normRectW normRectH id – identifier; normMassCenterX, normMassCenterY – position of the object’s mass center; normRectX, normRectY, normRectW, normRectH – coordinates of the rectangle enclosing the object
“vida” “zone” id status id – identifier; status – 0 or 1 (zone empty or breached)
MIDI

Messages to which Miniature responds
not applicable
Messages sent by Miniature
not applicable
Communication with MaxMSP

Messages to which Miniature responds
removezone id [integer greater than or equal to 0] removes the zone with the specified index
handlezones 0 or 1; disables or enables handling of active zones
handleblobs 0 or 1; disables or enables handling of moving object detection
imagefilterfeedback 0.0 … 1.0; feedback level in the background detection system
imagefilterthreshold 0.0 … 1.0; motion detector activation threshold
zonefillthreshold 0.0 … 1.0; normalized fill level of a zone required for motion detector activation
approximateblobpolygons 0 or 1; disables or enables calculation of a rough contour of a moving object
addzone id [integer greater than or equal to 0] x [0.0 … 1.0] y [0.0 … 1.0] w [0.0 … 1.0] h [0.0 … 1.0]
minblobarea 0.0 … 1.0; minimum normalized area of a moving object
maxblobarea 0.0 … 1.0; maximum normalized area of a moving object
minblobmass 0.0 … 1.0; minimum normalized virtual mass of a moving object
maxblobmass 0.0 … 1.0; maximum normalized virtual mass of a moving object
trackblobs 0 or 1 (default 1); disables or enables handling of moving object tracking and maintaining their identifying indices (id) where possible
maxblobdist 0.0 … 1.0; maximum normalized distance within which moving objects are treated as a continuation of previous ones
approximateblobpolygonspoints > 2; number of points in the simplified outline of a moving object
Messages sent by Miniature
“vida” “blobs” i i – number of detected moving objects
“vida” “blob” id normMassCenterX normMassCenterY normRectX normRectY normRectW normRectH id – identifier; normMassCenterX, normMassCenterY – position of the object’s mass center; normRectX, normRectY, normRectW, normRectH – coordinates of the rectangle enclosing the object
“vida” “zone” id status id – identifier; status – 0 or 1 (zone empty or breached)
Source code
									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta charset="utf-8">
  <meta name="description" content="Vida">
  <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>Vida, Pawel Janicki, 2008-25, https://paweljanicki.jp</title>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
  <script src="p5.vida.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 gesturalInterface={
    isActive:true,
    capture:{processor:null, w:160, h:120, flip:true},
    coords:{x:-1,y:-1,w:-1,h:-1},
    vida:{
      progressiveBackgroundFlag:true,
      imageFilterFeedback:0.9,
      imageFilterThreshold:0.1,
      handleBlobsFlag:false,
      normMinBlobMass:0.0001,
      normMaxBlobMass:0.2,
      normMinBlobArea:0.0001,
      normMaxBlobArea:0.2,
      trackBlobsFlag:true,
      handleActiveZonesFlag:false,
      trackBlobsMaxNormDist:0.3,
      zoneFillThreshold:0.1,
      mirror:Vida.MIRROR_NONE,
      rejectBlobsMethod:Vida.REJECT_INNER_BLOBS,
      approximateBlobPolygonsFlag:true,
      pointsPerApproximatedBlobPolygon:8,
      processor:(new Vida(p))
    }
  };
  let theme={
    bgColor:{r:0,g:0,b:0},imageToDisplay:0,preset:-1
  };
  let useWorker =false;
  let guiContainer={
    isGuiAlwaysOff:true,
    gui:null, isActive:false, lock:-1, lang:'en',
    handlers:{
      toVolSlider:{id:-1,label:{en:'vol',pl:'głośność'}}
    },
    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(){pbl.preload();}
  p.setup=function(){
    p.handleUrlParams(); p.createCanvas(10,10); p.initGesturalInterface();
    p.initGui(); p.initWebSocket(); p.initMax();
    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();
    guiContainer.gui.draw();
  };
  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(){
    if(!guiContainer.isGuiAlwaysOff){
      if(guiContainer.isActive){
        if(guiContainer.lock<0){
          if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){guiContainer.gui.disableAllItems();guiContainer.isActive=false;}
        }
      }else{
        guiContainer.gui.enableAllItems(); guiContainer.isActive=true;
        //if((midi.isEnabled&&midi.inputPort)||(maxIsDetected&&midi.isMaxMidiEnabled)) guiContainer.gui.disableItemAccessedById(guiContainer.handlers.toMidiNoteSelector.id);
      }
    }
    return false;
  };
  p.mouseMoved=function(){if(guiContainer.gui) guiContainer.gui.moveIdlePointer(p.mouseX,p.mouseY); return false;};
  p.mouseDragged=function(){p.unifiedTactileEventDragged(p.mouseX,p.mouseY,0); return false;};
  p.mousePressed=function(){p.unifiedTactileEventPressed(p.mouseX,p.mouseY,0); return false;};
  p.mouseReleased=function(){p.unifiedTactileEventReleased(p.mouseX,p.mouseY,0); return false;};
  p.mouseWheel=function(){return false;};
  p.onOrientationChange=function(){p.fullscreen(true);};
  p.handleResize=function(){
    p.resizeCanvas(innerWidth,innerHeight);
    if(gesturalInterface.isActive){
      let f=gesturalInterface.capture.w/gesturalInterface.capture.h;
      gesturalInterface.coords.w=p.width; gesturalInterface.coords.h=p.width/f;
      if(gesturalInterface.coords.h>p.height){
        gesturalInterface.coords.h=p.height; gesturalInterface.coords.w=p.height*f;
      }
      gesturalInterface.coords.x=0.5*(p.width-gesturalInterface.coords.w);
      gesturalInterface.coords.y=0.5*(p.height-gesturalInterface.coords.h);
      console.log("[p.handleResize] coords (x,y,w,h): "+gesturalInterface.coords.x+" "+gesturalInterface.coords.y+" "+gesturalInterface.coords.w+" "+gesturalInterface.coords.h);
    }
  };
  p.huskChangedTouches=function(_touchEvent){
    let result=[]; let ct=_touchEvent.changedTouches; let ctl=_touchEvent.changedTouches.length;
    for(let i=0;i<ctl;i++){let t=ct.item(i);result[result.length]={id:t.identifier,x:t.clientX,y:t.clientY};}
    return result;
  };
  p.unifiedTactileEventDragged=function(_pixx,_pixy,_eventid){
    guiContainer.gui.dragPointer(_pixx,_pixy);
    //magnets.touchMoved(_pixx,_pixy,_eventid);
  };
  p.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>3) theme.imageToDisplay=0;
  };
  p.unifiedTactileEventReleased=function(_pixx,_pixy,_eventid){
    guiContainer.gui.unlockPointer(_pixx,_pixy);
    //magnets.touchReleased(_pixx,_pixy,_eventid);
  };
  p.initGesturalInterface=function(){
    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();p.transferGesturalInterfaceConfigToVida(); 
  };
  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.zoneFillThreshold);
  };
  p.updateGesturalInterface=function(){
    if(gesturalInterface.isActive&&gesturalInterface.capture.processor){
      gesturalInterface.vida.processor.update(gesturalInterface.capture.processor);
      // web socket
      if(webSocket.isActive&&webSocket.processor){
        if(webSocket.processor.isEnabled){
          if(gesturalInterface.vida.processor.handleBlobsFlag){
            let temp_blobs=gesturalInterface.vida.processor.getBlobs();
            webSocket.processor.safeSend(["vida","blobs",temp_blobs.length]);
            for(let i=0;i<temp_blobs.length;i++){
              webSocket.processor.safeSend([
                "vida","blob",temp_blobs[i].id,
                temp_blobs[i].normMassCenterX,temp_blobs[i].normMassCenterY,
                temp_blobs[i].normRectX,temp_blobs[i].normRectY,temp_blobs[i].normRectW,temp_blobs[i].normRectH,
              ]);
            }
          }
          if(gesturalInterface.vida.processor.handleActiveZonesFlag){
            for(let i=0;i<gesturalInterface.vida.processor.activeZones.length;i++){
              let z=gesturalInterface.vida.processor.activeZones[i];
              if(z.isChangedFlag) webSocket.processor.safeSend(["vida","zone",z.id,p.b2i(z.isMovementDetectedFlag)]);
            }
          }
        }
      }
      // max
      if(maxIsDetected){
        if(gesturalInterface.vida.processor.handleBlobsFlag){
          let temp_blobs=gesturalInterface.vida.processor.getBlobs();
          window.max.outlet("vida","blobs",temp_blobs.length);
          for(let i=0;i<temp_blobs.length;i++){
            window.max.outlet(
              "vida","blob",temp_blobs[i].id,
              temp_blobs[i].normMassCenterX,temp_blobs[i].normMassCenterY,
              temp_blobs[i].normRectX,temp_blobs[i].normRectY,temp_blobs[i].normRectW,temp_blobs[i].normRectH,
            );
          }
        }
        if(gesturalInterface.vida.processor.handleActiveZonesFlag){
          for(let i=0;i<gesturalInterface.vida.processor.activeZones.length;i++){
            let z=gesturalInterface.vida.processor.activeZones[i];
            if(z.isChangedFlag) window.max.outlet("vida","zone",z.id,b2i(z.isMovementDetectedFlag));
          }
        }
      }
    }
  };
  p.drawGesturalInterface=function(){
    switch(theme.imageToDisplay){
      case 0: p.image(gesturalInterface.vida.processor.currentImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
      case 1: p.image(gesturalInterface.vida.processor.backgroundImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
      case 2: p.image(gesturalInterface.vida.processor.differenceImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
      case 3: p.image(gesturalInterface.vida.processor.thresholdImage,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h); break;
    }
    if(gesturalInterface.vida.handleBlobsFlag) gesturalInterface.vida.processor.simpleDrawBlobs(p,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h);
    if(gesturalInterface.vida.handleActiveZonesFlag) gesturalInterface.vida.processor.simpleDrawZones(p,gesturalInterface.coords.x,gesturalInterface.coords.y,gesturalInterface.coords.w,gesturalInterface.coords.h);
  };
  p.initGui=function(){
    guiContainer.gui = new GUI(p,false);
    let gui_sld_vol = new SimpleSlider(30,270,270,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.66,guiContainer.getLabelByLang(guiContainer.handlers.toVolSlider));
    gui_sld_vol.onChange=function(_id,_v){if(maxIsDetected) window.max.outlet('vol',_v);};
    guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
    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 "removezone":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              if(arr[1]>=0){
                gesturalInterface.vida.processor.removeActiveZone(arr[1]);
              }else{
                gesturalInterface.vida.processor.removeAllActiveZones();
              }
            }
          break;
          case "handlezones":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.handleActiveZonesFlag=(arr[1]>0);p.transferGesturalInterfaceConfigToVida();}
          break;
          case "handleblobs":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.handleBlobsFlag=(arr[1]>0);p.transferGesturalInterfaceConfigToVida();}
          break;
          case "imagefilterfeedback":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.imageFilterFeedback=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "imagefilterthreshold":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.imageFilterThreshold=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "zonefillthreshold":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.zoneFillThreshold=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "approximateblobpolygons":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.approximateBlobPolygonsFlag=(arr[1]>0);p.transferGesturalInterfaceConfigToVida();}
          break;
          case "minblobmass":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.normMinBlobMass=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "maxblobmass":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.normMaxBlobMass=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "minblobarea":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.normMinBlobArea=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "maxblobarea":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.normMaxBlobArea=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "trackblobs":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.trackBlobsFlag=(arr[1]>0);p.transferGesturalInterfaceConfigToVida();}
          break;
          case "maxblobdist":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){gesturalInterface.vida.trackBlobsMaxNormDist=arr[1];p.transferGesturalInterfaceConfigToVida();}
          break;
          case "approximateblobpolygonspoints":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){if(arr[1]>=3){gesturalInterface.vida.pointsPerApproximatedBlobPolygon=arr[1];p.transferGesturalInterfaceConfigToVida();}}
          break;
          default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
        }
      }else{
        if(arr.length===6){
          switch(arr[0].toLowerCase()){
            case "addzone":
              arr[1]=parseInt(arr[1]);arr[2]=parseFloat(arr[2]);arr[3]=parseFloat(arr[3]);arr[4]=parseFloat(arr[4]);arr[5]=parseFloat(arr[5]);
              if((!isNaN(arr[1]))&&(!isNaN(arr[2]))&&(!isNaN(arr[3]))&&(!isNaN(arr[4]))&&(!isNaN(arr[5]))){
                gesturalInterface.vida.processor.addActiveZone(arr[1],arr[2],arr[3],arr[4],arr[5]);
              }
            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('removezone',function(_v){
      _v=parseInt(_v); if(isNaN(_v)) return;
      if(arr[1]>=0){
        gesturalInterface.vida.processor.removeActiveZone(_v);
      }else{
        gesturalInterface.vida.processor.removeAllActiveZones();
      }
    });
    window.max.bindInlet('handlezones',function(_v){
      _v=parseInt(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.handleActiveZonesFlag=(_v>0);p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('handleblobs',function(_v){
      _v=parseInt(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.handleBlobsFlag=(_v>0);p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('imagefilterfeedback',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.imageFilterFeedback=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('imagefilterthreshold',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.imageFilterThreshold=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('zonefillthreshold',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.zoneFillThreshold=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('approximateblobpolygons',function(_v){
      _v=parseInt(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.approximateBlobPolygonsFlag=(_v>0);p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('minblobmass',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.normMinBlobMass=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('maxblobmass',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.normMaxBlobMass=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('minblobarea',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.normMinBlobArea=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('maxblobarea',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.normMaxBlobArea=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('trackblobs',function(_v){
      _v=parseInt(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.trackBlobsFlag=(_v>0);p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('maxblobdist',function(_v){
      _v=parseFloat(_v); if(isNaN(_v)) return;
      gesturalInterface.vida.trackBlobsMaxNormDist=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('approximateblobpolygonspoints',function(_v){
      _v=parseInt(_v); if(isNaN(_v)) return; if(_v<3) return;
      gesturalInterface.vida.pointsPerApproximatedBlobPolygon=_v;p.transferGesturalInterfaceConfigToVida();
    });
    window.max.bindInlet('addzone',function(_id,_normx,_normy,_normw,_normh){
      _id=parseInt(_v); if(isNaN(_id)) return; _normx=parseFloat(_v); if(isNaN(_normx)) return; _normy=parseFloat(_v); if(isNaN(_normy)) return; _normw=parseFloat(_v); if(isNaN(_normw)) return; _normh=parseFloat(_v); if(isNaN(_normh)) return;
      gesturalInterface.vida.processor.addActiveZone(_id,_normx,_normy,_normw,_normh);
    });
  }
  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){
        //  visualScoreInterpreter.capture.facingMode=decodeURIComponent(urlparams.famo);
        //  visualScoreInterpreter.capture.facingMode=visualScoreInterpreter.capture.facingMode.toLowerCase();
        //  if(visualScoreInterpreter.capture.facingMode==="env") visualScoreInterpreter.capture.facingMode="environment";
        //  console.log("[p.handleUrlParams] camera facing mode: "+visualScoreInterpreter.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("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 for interface data: "+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("synth" in urlparams){let v=parseInt(urlparams.synth); if(!isNaN(v)){synth.isActive=(v>0);} console.log("[p.handleUrlParams] synth: "+synth.isActive);}
        //if("tps" in urlparams){let v=parseInt(urlparams.tps); if(!isNaN(v)){v=Math.floor(v); if(v>=1) midi.ticksperframe=v;} console.log("[p.handleUrlParams] ticks per frame: "+v);}
        //if("clock" in urlparams){let v=parseInt(urlparams.clock); if(!isNaN(v)){v=(v>0); midi.clock.auto=v;} console.log("[p.handleUrlParams] clock: "+v);}
        //if("scratch" in urlparams){let v=parseInt(urlparams.scratch); if(!isNaN(v)){if((v>=0)&&(v<=2)) midi.clock.scratchMode=v;} console.log("[p.handleUrlParams] scratch mode: "+v);}
        //if("play" in urlparams){let v=parseInt(urlparams.play); if(!isNaN(v)){defPlay=(v>0);} console.log("[p.handleUrlParams] play: "+v);}
        //if("loop" in urlparams){let v=parseInt(urlparams.loop); if(!isNaN(v)){defLoop=(v>0);} console.log("[p.handleUrlParams] loop: "+v);}
        //if("pendulum" in urlparams){let v=parseInt(urlparams.pendulum); if(!isNaN(v)){defPendulum=(v>0);} console.log("[p.handleUrlParams] pendulum: "+v);}
        //if("dark" in urlparams){let v=parseInt(urlparams.dark); if(!isNaN(v)){defDark=(v>0);} console.log("[p.handleUrlParams] dark: "+v);}
        //if("invert" in urlparams){let v=parseInt(urlparams.invert); if(!isNaN(v)){defInvert=(v>0);} console.log("[p.handleUrlParams] invert: "+v);}
        //if("camera" in urlparams){let v=parseInt(urlparams.camera); if(!isNaN(v)){defCamera=(v>0);} console.log("[p.handleUrlParams] camera: "+v);}
        //if("dense" in urlparams){let v=parseInt(urlparams.dense); if(!isNaN(v)){defDense=(v>0);} console.log("[p.handleUrlParams] dense: "+v);}
        //if("dur" in urlparams){let v=parseFloat(urlparams.dur); if(!isNaN(v)){if(v<0.0) v=0.0; defDur=v;} console.log("[p.handleUrlParams] dur: "+v);}
        //if("sens" in urlparams){let v=parseFloat(urlparams.sens); if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; defSensitivity=v;} console.log("[p.handleUrlParams] sens: "+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; defVol=v;} console.log("[p.handleUrlParams] vol: "+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("prst" in urlparams){let v=parseInt(urlparams.prst); if(!isNaN(v)){theme.preset=v; console.log("[p.handleUrlParams] preset= "+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.);
								

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

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