Catergraphers

a trace always remains
Parameters
pointer		hide / show the mouse pointer
synth		wyłącza/włącza wewnętrzny generator dźwięku
Description
Sit comfortably in front of the screen, draw any shape on it, observe the image taking shape, and listen to the sounds that emerge. The application draws on the work and concepts of contemporary Hong Kong calligrapher Hung Kueng. He posits that calligraphy allows for the presentation of processes for which humans are a good, but not the best, medium. Therefore, he explores methods of creating calligraphy by using robots, software, or magnetic fields to guide brush movements.
Another source of inspiration for the work is the interesting coincidence between the behavior of analog and digital media: ink on paper and the “cairo” graphic library (and similar mechanisms), widely used in two-dimensional computer graphics (including the “canvas” object in web browsers) and allowing for the drawing of an image using simple graphic instructions (referring, incidentally, to the methods of using manual drawing and painting tools). Not only ink, but any other wet, even colorless, trace leaves a difficult-to-remove smudge on paper — the Japanese artist Nagasawa Rosetsu (長沢芦雪; 1754–1799), who lived during the Edo period, even exploited this observation to create the painting “Snail,” depicting both a snail and its trace. However, in the case of digital graphics (especially those based on procedures similar to the aforementioned “Cairo” library), repeatedly filling a surface with a highly transparent color won’t make the original image disappear — the mathematics governing image operations, rounding, and the effects of limited tonal resolution will cause it to persist as remnants that can, however, be detected by the eye. Of course, this behavior can be counteracted or avoided — just as one might try to dry paper after a snail has crawled past.
Technical documentation
pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
synth 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny generator dźwięku
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
catergraphers item raportuje parametry gąsienicy: indeks, unikalny identyfikator, znormalizowane położenie w poziomie, znormalizowane położenie w pionie
catergraphers items raportuje ilość gąsienic
catergraphers touch raportuje parametry kursora: indeks, znormalizowane położenie w poziomie, znormalizowane położenie w pionie, unikalny identyfikator, status (1 – nowy kursor, 2 – przemieszczenie kursora, 3 – zwolnienie kursora)
catergraphers touches raportuje ilość kursorów
MIDI

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
nie dotyczy
Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
catergraphers item raportuje parametry gąsienicy: indeks, unikalny identyfikator, znormalizowane położenie w poziomie, znormalizowane położenie w pionie
catergraphers items raportuje ilość gąsienic
catergraphers touch raportuje parametry kursora: indeks, znormalizowane położenie w poziomie, znormalizowane położenie w pionie, unikalny identyfikator, status (1 – nowy kursor, 2 – przemieszczenie kursora, 3 – zwolnienie kursora)
catergraphers touches raportuje ilość kursorów
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="Gąsienice-kaligrafice (Catergraphers)">
  <meta name="keywords" content="AI, computer vision, music, audio, sound, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <style>body {padding:0;margin:0;}</style>
  <title>"Gąsienice-kaligrafice (Catergraphers)", Pawel Janicki, 2020-26, https://paweljanicki.jp</title>
  <script src="https://unpkg.com/tone"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js" crossorigin="anonymous" type="module"></script>
  <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
  <script src="roi.js"></script>
  <script src="midi.js"></script>
  <script src="ws.js"></script>
  <script src="synth.js"></script>
  <script src="gestures.js"></script>
  <script src="catergraphers.js"></script>
  <script src="gui.js"></script>
  <script src="sketch.js" type="module"></script>

</head>

<body>
</body>

</html>
								

									sketch.js
									import {MediaPipeHand} from "./mediapipehand.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:false,
    capture:{processor:null,w:640,h:480,cameraFacingMode:"default",flip:true},
    roi:{processor:(new Roi()),x:0,y:0,w:320,h:240},
    mediaPipeHand:{
      processor:null,gestures:null,drawingMode:MediaPipeHand.DRAWINGMODE_HANDV3,
      runningMode:"IMAGE",maxNumOfHands:2,mode:0 // 0 - hand landmarks only, 1 - landmarks and gestures
    },
    maxNumOfTouches:10,
    tint:{planting:200,idle:220}
  };
  let webSocket={
    isActive:false,monitorInput:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let midi={isActive:false,processor:(new Midi()),outputPortIndex:-1,inputPortIndex:-1};
  let storedInteractions=[];
  let catergraphers = new Catergraphers(p);
  let theme={
    speakerIcon:null,
    bgColor:{r:127,g:127,b:127}
  };
  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 synth={isActive:true,processor:(new Synth(p,catergraphers))};
  const maxIsDetected=detectMax();
  p.setBackground=function(_gfx,_r,_g,_b,_setDocumentBodyStyleBackground){_r=Math.floor(_r);_g=Math.floor(_g);_b=Math.floor(_b);_gfx.background(_r,_g,_b);if(_setDocumentBodyStyleBackground) document.body.style.background = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';};
  p.preload=function(){theme.speakerIcon=p.loadImage("speaker-svgrepo-com.svg");};
  p.setup=function(){
    p.handleUrlParams();
    gesturalInterface.mediaPipeHand.gestures = new Gestures(p);
    if(gesturalInterface.isActive){
      p.initCaptureDevice(gesturalInterface.capture.w,gesturalInterface.capture.h);
      gesturalInterface.roi.processor.calcRoi(gesturalInterface.capture,p,gesturalInterface.roi);
      gesturalInterface.mediaPipeHand.gestures.setRoiWithNormCoords(gesturalInterface.roi.x/gesturalInterface.capture.processor.width,gesturalInterface.roi.y/gesturalInterface.capture.processor.height,gesturalInterface.roi.w/gesturalInterface.capture.processor.width,gesturalInterface.roi.w/gesturalInterface.capture.processor.height);
      gesturalInterface.mediaPipeHand.processor = new MediaPipeHand(p,gesturalInterface.capture.processor,gesturalInterface.mediaPipeHand.mode,gesturalInterface.mediaPipeHand.maxNumOfHands,gesturalInterface.mediaPipeHand.runningMode);
    }
    p.initMidi(); p.initWebSocket();
    p.createCanvas(10,10);
    if(maxIsDetected){document.getElementsByTagName('body')[0].style.overflow = 'hidden';}
    catergraphers.init(innerWidth,innerHeight);
    guiContainer.gui = new GUI(p,false);
    if(window.DeviceOrientationEvent){window.addEventListener("deviceorientation",p.onOrientationChange);}
    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(30);}
  };
  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);
    storedInteractions.splice(0,storedInteractions.length);
    if(gesturalInterface.isActive){
      gesturalInterface.roi.processor.calcRoi(p,gesturalInterface.capture.processor,gesturalInterface.roi);
      gesturalInterface.mediaPipeHand.gestures.setRoiWithNormCoords(gesturalInterface.roi.x/gesturalInterface.capture.processor.width,gesturalInterface.roi.y/gesturalInterface.capture.processor.height,gesturalInterface.roi.w/gesturalInterface.capture.processor.width,gesturalInterface.roi.h/gesturalInterface.capture.processor.height);
      gesturalInterface.roi.processor.imageWithRoi(p,gesturalInterface.capture.processor,gesturalInterface.roi,Roi.MIRROR_NONE); //p.image(gesturalInterface.capture, 0, 0);
      gesturalInterface.mediaPipeHand.processor.update(); p.updateGestures(); p.handleGestureMessages();
      //if(gesturalInterface.mediaPipeHand.processor.getNumberOfHands()) magnets.tint=255; else magnets.tint=180;
    }
    if(gesturalInterface.isActive){
      if(catergraphers.messages.length>0) p.tint(255,gesturalInterface.tint.planting); else p.tint(255,gesturalInterface.tint.idle);
    }
    catergraphers.render();catergraphers.draw();
    p.noTint();
    if(gesturalInterface.isActive){
      gesturalInterface.mediaPipeHand.processor.draw(p,gesturalInterface.capture.processor,gesturalInterface.roi,Roi.MIRROR_NONE,gesturalInterface.mediaPipeHand.drawingMode);
      p.drawGestureMessagesWithRoi(p,gesturalInterface.capture.processor,gesturalInterface.roi,Roi.MIRROR_NONE);
    }
    if(maxIsDetected) p.sendDataToMax();
    if(webSocket.isActive) p.sendDataViaWebSocket();
    if(midi.isActive&&midi.processor.isEnabled&&midi.processor.outputPort) p.sendDataViaMidi();
    guiContainer.gui.draw();
    if(synth.isActive&&(!synth.processor.audioEnabled)) p.drawMutedIcon();
    if(synth.isActive&&synth.processor.audioEnabled) synth.processor.update();
    catergraphers.clearMessages();
    //p.stroke(255); p.noFill(); for(let i=0;i<ct.length;i++) p.circle(ct[i].x,ct[i].y,Math.sin(p.millis()*0.003)*50);    
  };
  p.doubleClicked=function(){return false;};
  p.mouseClicked=function(){p.unifiedTactileEventClick(); return false;};
  p.mouseWheel=function(){return false;};
  p.mouseMoved=function(){if(guiContainer.gui) guiContainer.gui.moveIdlePointer(p.mouseX,p.mouseY); return false;};
  p.mouseDragged=function(){p.unifiedTactileEventDragged(p.mouseX,p.mouseY,0,null); return false;};
  p.mousePressed=function(){p.unifiedTactileEventPressed(p.mouseX,p.mouseY,0); return false;};
  p.mouseReleased=function(){p.unifiedTactileEventReleased(p.mouseX,p.mouseY,0); p.unifiedTactileEventClick(); return false;};
  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,null);
    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);
    p.unifiedTactileEventClick();
    return false;
  };
  p.onOrientationChange=function(){p.fullscreen(true);};
  p.drawMutedIcon=function(){
    let tf1=1.0+Math.sin(p.millis()*0.01)*0.2;
    let tf2=1.0+Math.sin(p.millis()*0.017)*0.1;
    let tf3=p.millis()*0.0001;
    let sz=p.width; if(p.width>p.height) sz=p.height;
    let scl=sz/theme.speakerIcon.width*0.4;
    p.noStroke(); p.fill(128,128); p.rect(0,0,p.width,p.height);
    p.fill(30,70,255,128);p.circle(p.width*0.5,p.height*0.5,theme.speakerIcon.width*scl*1.1*tf2);
    p.image(theme.speakerIcon,p.width*0.5-theme.speakerIcon.width*scl*0.5*tf2,p.height*0.5-theme.speakerIcon.height*scl*0.5*tf2,theme.speakerIcon.width*scl*tf2,theme.speakerIcon.height*scl*tf2);
    p.noFill();p.stroke(255,0,0,128);p.strokeWeight(10);
    p.push();
      p.translate(p.width*0.5,p.height*0.5);
      p.rotate(tf3);
      p.line(-theme.speakerIcon.width*scl*0.6*tf1,-theme.speakerIcon.width*scl*0.6*tf1,theme.speakerIcon.width*scl*0.6*tf1,theme.speakerIcon.width*scl*0.6*tf1);
    p.pop();
  };
  p.unifiedTactileEventClick=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);
      }
    }
  };
  p.handleResize=function(){
    p.resizeCanvas(innerWidth,innerHeight);
    //if(gesturalInterface.isActive) gesturalInterface.roi.processor.calcRoi(gesturalInterface.capture,p,gesturalInterface.roi);
    catergraphers.resize(innerWidth,innerHeight);
  };
  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};}
    //console.log(p.millis());
    return result;
  };
  p.unifiedTactileEventDragged=function(_pixx,_pixy,_eventid,_params){
    guiContainer.gui.dragPointer(_pixx,_pixy);
    catergraphers.continueGesture(_pixx/p.width,_pixy/p.height,_eventid);//wilderness.touchMoved(_pixx,_pixy,_eventid,_params);
    if((_params===null)||(_params===undefined)){
      storedInteractions[storedInteractions.length]={
        normx:(_pixx/p.width),normy:(_pixy/p.height),id:_eventid,status:"moved",
        normw:-1.0,normh:-1.0,startnormw:-1.0,startnormh:-1.0
      };
    }else{
      storedInteractions[storedInteractions.length]={
        normx:(_pixx/p.width),normy:(_pixy/p.height),id:_eventid,status:"moved",
        normw:_params.normw,normh:_params.normh,startnormw:_params.startnormw,startnormh:_params.startnormh
      };
    }
  };
  p.initSynth=function(){
    if(synth.isActive&&(!synth.processor.audioEnabled)){synth.processor.init();guiContainer.gui.forceBroadcast();return true;}
    return false;
  };
  p.isMobile=function(){
    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4)))
  };
  p.initCaptureDevice=function(_w,_h){
    let b=p._initCaptureDevice(_w,_h);
    if((!b)&&(gesturalInterface.capture.cameraFacingMode!=="default")){
      console.log("[p.initCaptureDevice] can't access capture device against current facing mode ("+gesturalInterface.capture.cameraFacingMode+"), trying to access default mode instead...");
      gesturalInterface.capture.cameraFacingMode="default"; p._initCaptureDevice(_w,_h);
    };
  }
  p._initCaptureDevice=function(_w,_h){
    let result=false;
    switch(gesturalInterface.capture.cameraFacingMode){
      case "default":
        try{
          gesturalInterface.capture.processor=p.createCapture(p.VIDEO,{flipped:gesturalInterface.capture.flip});
          gesturalInterface.capture.processor.size(_w,_h);
          gesturalInterface.capture.processor.elt.setAttribute('playsinline', '');
          gesturalInterface.capture.processor.hide();
          console.log('[_initCaptureDevice] capture ready: '+gesturalInterface.capture.processor.width+' '+gesturalInterface.capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "user":
        try{
          gesturalInterface.capture.processor=p.createCapture(p.VIDEO,{video:{facingMode:{exact:"user"}},flipped:gesturalInterface.capture.flip});
          //gesturalInterface.capture.processor=p.createCapture({audio:false,video:{flipped:gesturalInterface.capture.flip,facingMode:{exact:"user"}}});
          gesturalInterface.capture.processor.size(_w,_h);
          gesturalInterface.capture.processor.elt.setAttribute('playsinline', '');
          gesturalInterface.capture.processor.hide();
          console.log('[_initCaptureDevice] capture ready: '+gesturalInterface.capture.processor.width+' '+gesturalInterface.capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "environment":
        try{
          gesturalInterface.capture.processor=p.createCapture(p.VIDEO,{video:{facingMode:{exact:"environment"}},flipped:gesturalInterface.capture.flip});
          //gesturalInterface.capture.processor=p.createCapture({audio:false,video:{flipped:gesturalInterface.capture.flip,facingMode:{exact:"environment"}}});
          gesturalInterface.capture.processor.size(_w,_h);
          gesturalInterface.capture.processor.elt.setAttribute('playsinline', '');
          gesturalInterface.capture.processor.hide();
          console.log('[initCaptureDevice] capture ready: '+gesturalInterface.capture.processor.width+' '+gesturalInterface.capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      default: console.log("[_initCaptureDevice] unhandled cameraFacingMode: "+gesturalInterface.capture.cameraFacingMode);
    }
    return result;
  };
  p.unifiedTactileEventPressed=function(_pixx,_pixy,_eventid,_params){
    guiContainer.lock=guiContainer.gui.lockPointer(_pixx,_pixy);
    catergraphers.beginGesture(_pixx/p.width,_pixy/p.height,_eventid); //wilderness.touchStarted(_pixx,_pixy,_eventid,_params);
    if((_params===null)||(_params===undefined)){
      storedInteractions[storedInteractions.length]={
        normx:(_pixx/p.width),normy:(_pixy/p.height),id:_eventid,status:"started",
        normw:-1.0,normh:-1.0,startnormw:-1.0,startnormh:-1.0
      };
    }else{
      storedInteractions[storedInteractions.length]={
        normx:(_pixx/p.width),normy:(_pixy/p.height),id:_eventid,status:"started",
        normw:_params.normw,normh:_params.normh,startnormw:_params.startnormw,startnormh:_params.startnormh
      };
    }
  };
  p.unifiedTactileEventReleased=function(_pixx,_pixy,_eventid){
    p.initSynth();
    guiContainer.gui.unlockPointer(_pixx,_pixy);
    catergraphers.finishGesture(_pixx/p.width,_pixy/p.height,_eventid); //wilderness.touchReleased(_pixx,_pixy,_eventid);
    storedInteractions[storedInteractions.length]={normx:(_pixx/p.width),normy:(_pixy/p.height),id:_eventid,status:"finished"};
  };
  p.initMidi=function(){ // midi is not implemented in magnets!
    //if(midi.isActive) midi.processor.init();
  };
  p.initWebSocket=function(){
    if(!webSocket.isActive) return;
    webSocket.processor.init(webSocket.address,function(_msg){;});
  };
  p.sendDataToMax=function(){
    for(let i=0;i<storedInteractions.length;i++){
      window.max.outlet(
        "catergraphers","touch",i,storedInteractions[i].normx,storedInteractions[i].normy,
        storedInteractions[i].id,storedInteractions[i].status
      );
    }
    window.max.outlet("catergraphers","items",catergraphers.items.length);
    for(let i=0;i<catergraphers.items.length;i++){
      let p=catergraphers.getItemNormPosByIndex(i);
      window.max.outlet("catergraphers","item",i,catergraphers.items[i].id,p.x,p.y);
    }
  };
  p.sendDataViaWebSocket=function(){
    for(let i=0;i<storedInteractions.length;i++){
      webSocket.processor.safeSend([
        "catergraphers","touch",i,storedInteractions[i].normx,storedInteractions[i].normy,
        storedInteractions[i].id,storedInteractions[i].status
      ]);
    }
    webSocket.processor.safeSend(["catergraphers","items",catergraphers.items.length]);
    for(let i=0;i<catergraphers.items.length;i++){
      let p=catergraphers.getItemNormPosByIndex(i);
      webSocket.processor.safeSend(["catergraphers","item",i,catergraphers.items[i].id,p.x,p.y]);
    }
  };
  p.sendDataViaMidi=function(){};
  p.setCcMapping=function(_code, _val){};
  p.normGestureCoordsToSketchPixWithRoi=function(_gesture,_gesturesRoi){
    let result={
      x:Math.abs((_gesture.normx-_gesturesRoi.normx)/_gesturesRoi.normw*p.width),
      y:Math.abs((_gesture.normy-_gesturesRoi.normy)/_gesturesRoi.normh*p.height)
    };
    return result;
  };
  p.handleGestureMessages=function(){
    for(let i=0;i<gesturalInterface.mediaPipeHand.gestures.messages.length;i++){
      let sketchPixCoords=p.normGestureCoordsToSketchPixWithRoi(gesturalInterface.mediaPipeHand.gestures.messages[i],gesturalInterface.mediaPipeHand.gestures.roi);
      if(gesturalInterface.mediaPipeHand.gestures.messages[i].status===Gesture.STATUS_NEW){
        p.unifiedTactileEventPressed(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.gestures.messages[i].uniqueid);
      }else{
        if(gesturalInterface.mediaPipeHand.gestures.messages[i].status===Gesture.STATUS_CONTINUED){
          p.unifiedTactileEventDragged(
            sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.gestures.messages[i].uniqueid,
            {
              startnormw:gesturalInterface.mediaPipeHand.gestures.messages[i].startnormw,
              startnormh:gesturalInterface.mediaPipeHand.gestures.messages[i].startnormh,
              normw:gesturalInterface.mediaPipeHand.gestures.messages[i].normw,
              normh:gesturalInterface.mediaPipeHand.gestures.messages[i].normh
            }
          );
        }else{
          p.unifiedTactileEventReleased(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.gestures.messages[i].uniqueid);
        }
      }
    }
  };
  p.updateGestures=function(){ // using 21-landmarks per hand mediapipe format
    let landmarks=null; let handednesses=null;
    if(gesturalInterface.mediaPipeHand.mode===0){
      if(gesturalInterface.mediaPipeHand.processor.hands){
        landmarks=gesturalInterface.mediaPipeHand.processor.hands.landmarks;
        handednesses=gesturalInterface.mediaPipeHand.processor.hands.handednesses;
      }
    }else{
      if(gesturalInterface.mediaPipeHand.mode===1){
        if(gesturalInterface.mediaPipeHand.processor.gestureRecognitionResult){
          landmarks=gesturalInterface.mediaPipeHand.processor.gestureRecognitionResult.landmarks;
          handednesses=gesturalInterface.mediaPipeHand.processor.gestureRecognitionResult.handednesses;
        }
      }
    }
    gesturalInterface.mediaPipeHand.gestures.processHandsData(landmarks,handednesses);
  };
  p.drawGestureMessagesWithRoi=function(_ctx,_gfx,_roi,_mirror){
    let fx=_ctx.width/_roi.w; let fy=_ctx.height/_roi.h;
    switch(_mirror){
      case Roi.MIRROR_NONE:
        //gesturalInterface.mediaPipeHand.gestures.drawMessages(_ctx,-fx*_roi.x,-fy*_roi.y,fx*_gfx.width,fy*_gfx.height);
      break;
      /*
      case MIRROR_HORIZONTAL:
        _ctx.push();
          _ctx.scale(-1,1); _ctx.translate(-fx*capture.width,0);
          _ctx.image(_gfx,fx*_roi.x,-fy*_roi.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      case MIRROR_VERTICAL:
        _ctx.push();
          _ctx.scale(1,-1); _ctx.translate(0,-fy*_gfx.height);
          _ctx.image(_gfx,-fx*_roi.x,fy*_roi.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      case MIRROR_BOTH:
        _ctx.push();
          _ctx.scale(-1,-1); _ctx.translate(-fx*_gfx.width,-fy*_gfx.height);
          _ctx.image(_gfx,fx*_roi.x,fy*_roi.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      */
      default: console.log("[drawGestureMessagesWithRoi] unhandled _mirror: "+_mirror);
    }
  }
  p.b2int=function(_v){if(_v) return 1; return 0;};
  p.huskColorComponentsARGB=function(_argb){
    return{
      a:( (_argb >> 24) & 0xFF),
      r:( (_argb >> 16) & 0xFF),
      g:( (_argb >> 8) & 0xFF),
      b:( _argb & 0xFF)
    };
  };
  p.huskColorComponentsRGB=function(_rgb){
    return{
      r:( (_rgb >> 16) & 0xFF),
      g:( (_rgb >> 8) & 0xFF),
      b:( _rgb & 0xFF)
    };
  };
  p.handleUrlParams=function(){
    try{
      let urlparams = p.getURLParams();
      if(urlparams){
        if("famo" in urlparams){
          gesturalInterface.capture.cameraFacingMode=decodeURIComponent(urlparams.famo);
          gesturalInterface.capture.cameraFacingMode=gesturalInterface.capture.cameraFacingMode.toLowerCase();
          if(gesturalInterface.capture.cameraFacingMode==="env") gesturalInterface.capture.cameraFacingMode="environment";
          console.log("[p.handleUrlParams] camera facing mode: "+gesturalInterface.capture.cameraFacingMode);
        }
        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("cv" in urlparams){let v=parseInt(urlparams.cv); if(!isNaN(v)){gesturalInterface.isActive=(v>0); console.log("[p.handleUrlParams] cv: "+(v>0));}}
        if("synth" in urlparams){let v=parseInt(urlparams.synth); if(!isNaN(v)){synth.isActive=(v>0); console.log("[p.handleUrlParams] synth: "+synth.isActive);}}
        if("pointer" in urlparams){let v=parseInt(urlparams.pointer); if(!isNaN(v)) guiContainer.isPointerVisibleAndInteractive=(v>0);console.log("[p.handleUrlParams] pointer: "+(v>0)); if(!(v>0)) p.noCursor();}
        if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0); console.log("[p.handleUrlParams] worker: "+useWorker);}}
        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("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("bg" in urlparams){
          let v=parseInt(urlparams.bg);
          if(!isNaN(v)){
            let col=p.huskColorComponentsARGB(v);
            wilderness.bgColor.a=col.a;wilderness.bgColor.r=col.r;wilderness.bgColor.g=col.g;wilderness.bgColor.b=col.b;
            theme.bgColor.r=col.r;theme.bgColor.g=col.g;theme.bgColor.b=col.b;
          }
          console.log("[p.handleUrlParams] background color: "+col.a+" "+col.r+" "+col.g+" "+col.b);
        }
        if("col" in urlparams){
          let v=parseInt(urlparams.col);
          if(!isNaN(v)){
            let col=p.huskColorComponentsARGB(v);
            wilderness.baseColor.a=col.a;wilderness.baseColor.r=col.r;wilderness.baseColor.g=col.g;wilderness.baseColor.b=col.b;
          }
          console.log("[p.handleUrlParams] base color: "+col.a+" "+col.r+" "+col.g+" "+col.b);
        }
        if("tintplanting" in urlparams){let v=parseInt(urlparams.tintplanting); if(!isNaN(v)){if(v<0) v=0; if(v>255) v=255; gesturalInterface.tint.planting=v; console.log("[p.handleUrlParams] tint if planting: "+v);}}
        if("tintidle" in urlparams){let v=parseInt(urlparams.tintidle); if(!isNaN(v)){if(v<0) v=0; if(v>255) v=255; gesturalInterface.tint.idle=v; console.log("[p.handleUrlParams] tint in idle mode: "+v);}}
        if("branchweight" in urlparams){let v=parseFloat(urlparams.branchweight); if(!isNaN(v)){if(v<0.1) v=0.1; wilderness.branchStrokeWeightFactor=v; console.log("[p.handleUrlParams] branch weight: "+v);}}
      }
    }catch(_e){console.log("[setup] _e: "+_e);}
  }
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

									gestures.js
									class Gesture{
  static get STATUS_NEW(){return 1;}
  static get STATUS_CONTINUED(){return 2;}
  static get STATUS_FINISHED(){return 3;}
  constructor(_p,_uniqueid,_startnormx,_startnormy,_startnormz,_startnormw,_startnormh,_startnormd,_leftrightindex){
    this.p=_p;this.uniqueid=_uniqueid;
    this.normx=_startnormx;this.startnormx=_startnormx;
    this.normy=_startnormy;this.startnormy=_startnormy;
    this.normz=_startnormz;this.startnormz=_startnormz;
    this.normw=_startnormw;this.startnormw=_startnormw;
    this.normh=_startnormh;this.startnormh=_startnormh;
    this.normd=_startnormd;this.startnormd=_startnormd;
    this.leftrightindex=_leftrightindex; // 0 left 1 right
    this.creationTimetag=this.p.millis(); this.status=Gesture.STATUS_NEW;
  }
  setSize(_normw,_normh,_normd){this.normw=_normw;this.normh=_normh;this.normd=_normd;}
  getSize(){return {w:this.normw,h:this.normh,d:this.normd};}
  getStatusAsString(){
    let result="";
    switch(this.status){
      case Gesture.STATUS_NEW: result="new"; break;
      case Gesture.STATUS_CONTINUED: result="continued"; break;
      case Gesture.STATUS_FINISHED: result="finished"; break;
      default: console.log("[Gesture, getStatusAsString] uhandled this.status: "+this.status);
    }
    return result;
  }
}
class Gestures{
  //https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker
  static get MEDIAPIPE_HANDMODEL_LANDMARK_WRIST(){return 0;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_THUMB_CMC(){return 1;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_THUMB_MCP(){return 2;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_THUMB_IP(){return 3;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_THUMB_TIP(){return 4;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_FINGER_MCP(){return 5;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_FINGER_PIP(){return 6;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_FINGER_DIP(){return 7;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_FINGER_TIP(){return 8;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_MIDDLE_FINGER_MCP(){return 9;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_MIDDLE_FINGER_PIP(){return 10;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_MIDDLE_FINGER_DIP(){return 11;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_MIDDLE_FINGER_TIP(){return 12;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_RING_FINGER_MCP(){return 13;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_RING_FINGER_PIP(){return 14;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_RING_FINGER_DIP(){return 15;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_RING_FINGER_TIP(){return 16;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_PINKY_FINGER_MCP(){return 17;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_PINKY_FINGER_PIP(){return 18;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_PINKY_FINGER_DIP(){return 19;}
  static get MEDIAPIPE_HANDMODEL_LANDMARK_PINKY_FINGER_TIP(){return 20;}
  constructor(_p){
    this.p=_p; this.items=[]; this.messages=[]; this.uniqueGestureId=-1;
    this.roi={normx:0.0,normy:0.0,normw:1.0,normh:1.0};
    this.positioningWithWirst=false;
    this.gestureStructure={
      //relationToHandSize:0.4,
      //handSizeCalc:[
        //Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_FINGER_MCP,
        //Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_PINKY_FINGER_MCP
      //],
      gestureCalcTips:[
        Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_THUMB_TIP,
        Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_FINGER_TIP,
        Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_MIDDLE_FINGER_TIP,
        Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_RING_FINGER_TIP,
        Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_PINKY_FINGER_TIP
      ],
    };
  }
  processHandsData(_hands,_handednesses){
    this.messages.splice(0,this.messages.length);
    if(!_hands){this.flush();return;}
    if(!_hands.length===0){this.flush();return;}
    let newGestures=this.findGestures(_hands,_handednesses,false);
    for(let i=newGestures.length-1;i>=0;i--){
      if(
        (newGestures[i].normx<this.roi.normx)||
        (newGestures[i].normy<this.roi.normy)||
        (newGestures[i].normx>(this.roi.normx+this.roi.normw))||
        (newGestures[i].normy>(this.roi.normy+this.roi.normh))
      ) newGestures.splice(i,1);
    }
    if(newGestures.length===0){this.flush();return;}
    if(this.items.length===0){
      for(let i=0;i<newGestures.length;i++){this.items[this.items.length]=newGestures[i];this.messages[this.messages.length]=newGestures[i];}
      return;
    }
    for(let i=0;i<newGestures.length;i++){
      let idx=this.findItemClosestToGesture(newGestures[i],true,[],0.2);
      if(idx>-1){
        newGestures[i].uniqueid=this.items[idx].uniqueid;
        newGestures[i].startnormw=this.items[idx].normw;
        newGestures[i].startnormh=this.items[idx].normh;
      }
    }
    this.removeMultipliedReferencesToItemsFromGestures(newGestures);
    for(let i=this.items.length-1;i>=0;i--){
      let gestureIdx=this.findGestureIndexByUniqueId(newGestures,this.items[i].uniqueid);
      if(gestureIdx>-1){
        this.items[i].normx=newGestures[gestureIdx].normx;this.items[i].normy=newGestures[gestureIdx].normy;this.items[i].normz=newGestures[gestureIdx].normz;
        this.items[i].status=Gesture.STATUS_CONTINUED;
        this.messages[this.messages.length]=this.items[i];
        newGestures.splice(gestureIdx,1);
      }else{
        this.items[i].status=Gesture.STATUS_FINISHED;
        this.messages[this.messages.length]=this.items[i];
        this.items.splice(i,1);
      }
    }
    for(let i=0;i<newGestures.length;i++){this.items[this.items.length]=newGestures[i];this.messages[this.messages.length]=newGestures[i];}
  }
  setRoiWithNormCoords(_normx,_normy,_normw,_normh){this.roi.normx=_normx;this.roi.normy=_normy;this.roi.normw=_normw;this.roi.normh=_normh;}
  findGestureIndexByUniqueId(_gesturesArray,_uniqueId){for(let i=0;i<_gesturesArray.length;i++) if(_uniqueId===_gesturesArray[i].uniqueid) return i; return -1;}
  _removeMultipliedReferencesToItemsFromGestures(_gestureArray){
    for(let i=0;i<_gestureArray.length;i++){
      for(let j=0;j<_gestureArray.length;j++){
        if(i===j) continue;
        if(_gestureArray[i].uniqueid===_gestureArray[j].uniqueid){
          let itemIndex=this.findGestureIndexByUniqueId(this.items,_gestureArray[i].uniqueid);
          let di=this.p.dist(_gestureArray[i].normx,_gestureArray[i].normy,_gestureArray[i].normz,this.items[itemIndex].normx,this.items[itemIndex].normy,this.items[itemIndex].normz);
          let dj=this.p.dist(_gestureArray[j].normx,_gestureArray[j].normy,_gestureArray[j].normz,this.items[itemIndex].normx,this.items[itemIndex].normy,this.items[itemIndex].normz);
          if(di<dj) _gestureArray[j].uniqueid=this.getUniqueGestureId(); else _gestureArray[i].uniqueid=this.getUniqueGestureId();
          return true;  
        }
      }
    }
    return false;
  }
  removeMultipliedReferencesToItemsFromGestures(_gestureArray){let b=true; while(b){b=this._removeMultipliedReferencesToItemsFromGestures(_gestureArray);}}
  findItemClosestToGesture(_gestureObject,_checkLeftRightIndex,_excludedItemIndicesArray,_maxDist){
    let resultIndexOfItem=-1; let normdist=100000.0;
    for(let i=0;i<this.items.length;i++){
      if(_checkLeftRightIndex&&(_gestureObject.leftrightindex!==this.items[i].leftrightindex)) continue;
      let b=false; if(_excludedItemIndicesArray){for(let j=0;j<_excludedItemIndicesArray;j++) if(_excludedItemIndicesArray[j]===i){b=true;break;}} if(b) continue;
      let d=this.p.dist(_gestureObject.normx,_gestureObject.normy,_gestureObject.normz,this.items[i].normx,this.items[i].normy,this.items[i].normz);
      if(d>_maxDist) continue;
      if(d<normdist){resultIndexOfItem=i;normdist=d;}
    }
    return resultIndexOfItem;
  }
  findGestureClosestToItem(_gestureArray,_itemIndex,_checkLeftRightIndex,_excludedNewGesturesIndicesArray,_maxDist){
    let resultIndexOfGesture=-1; let normdist=100000.0;
    for(let i=0;i<_gestureArray.length;i++){
      if(_checkLeftRightIndex&&(this.items[_itemIndex].leftrightindex!==_gestureArray[i].leftrightindex)) continue;
      let b=false; if(_excludedNewGesturesIndicesArray){for(let j=0;j<_excludedNewGesturesIndicesArray;j++) if(_excludedNewGesturesIndicesArray[j]===i){b=true;break;}} if(b) continue;
      let d=this.p.dist(_gestureArray[i].normx,_gestureArray[i].normy,_gestureArray[i].normz,this.items[_itemIndex].normx,this.items[_itemIndex].normy,this.items[_itemIndex].normz);
      if(d>_maxDist) continue;
      if(d<normdist){resultIndexOfGesture=i;normdist=d;}
    }
    return resultIndexOfGesture;
  }
  calcNormDistBetweenLandmarks(_hand,_l1,_l2,_3d){
    let result=0.0;
    if(_3d)
        result=Math.sqrt(Math.pow(_hand[_l1].x-_hand[_l2].x,2)+Math.pow(_hand[_l1].y-_hand[_l2].y,2)+Math.pow(_hand[_l1].z-_hand[_l2].z,2));
    else
        result=Math.sqrt(Math.pow(_hand[_l1].x-_hand[_l2].x,2)+Math.pow(_hand[_l1].y-_hand[_l2].y,2));
    return result;
  }
  calcGestureParams(_hand,_landmarks,_3d){
    let result = this.calcGestureParamsClassic(_hand,_landmarks,_3d);
    if(this.positioningWithWirst){
      result.x=_hand[Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_WRIST].x;
      result.y=_hand[Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_WRIST].y;
      if(_3d) result.z=_hand[Gestures.MEDIAPIPE_HANDMODEL_LANDMARK_WRIST].z;
    }
    return result;
  }
  calcGestureParamsClassic(_hand,_landmarks,_3d){ // the routine operates on norm values!
    let result={x:0.0,y:0.0,z:0.0,minx:1.0,miny:1.0,minz:1.0,maxx:0.0,maxy:0.0,maxz:0.0,w:0.0,h:0.0,d:0.0};
    if(_3d){
      for(let i=0;i<_landmarks.length;i++){
        result.x+=_hand[_landmarks[i]].x;result.y+=_hand[_landmarks[i]].y;result.z+=_hand[_landmarks[i]].z;
        if(_hand[_landmarks[i]].x>result.maxx) result.maxx=_hand[_landmarks[i]].x;
        if(_hand[_landmarks[i]].x<result.minx) result.minx=_hand[_landmarks[i]].x;
        if(_hand[_landmarks[i]].y>result.maxy) result.maxy=_hand[_landmarks[i]].y;
        if(_hand[_landmarks[i]].y<result.miny) result.miny=_hand[_landmarks[i]].y;
        if(_hand[_landmarks[i]].z>result.maxz) result.maxz=_hand[_landmarks[i]].z;
        if(_hand[_landmarks[i]].z<result.minz) result.minz=_hand[_landmarks[i]].z;
      }
      result.x/=_landmarks.length;result.y/=_landmarks.length;result.z/=_landmarks.length;
      result.w=result.maxx-result.minx;result.h=result.maxy-result.miny;result.d=result.maxz-result.minz;
    }else{
      for(let i=0;i<_landmarks.length;i++){
        result.x+=_hand[_landmarks[i]].x;result.y+=_hand[_landmarks[i]].y;
        if(_hand[_landmarks[i]].x>result.maxx) result.maxx=_hand[_landmarks[i]].x;
        if(_hand[_landmarks[i]].x<result.minx) result.minx=_hand[_landmarks[i]].x;
        if(_hand[_landmarks[i]].y>result.maxy) result.maxy=_hand[_landmarks[i]].y;
        if(_hand[_landmarks[i]].y<result.miny) result.miny=_hand[_landmarks[i]].y;
        if(_hand[_landmarks[i]].z>result.maxz) result.maxz=_hand[_landmarks[i]].z;
        if(_hand[_landmarks[i]].z<result.minz) result.minz=_hand[_landmarks[i]].z;
      }
      result.x/=_landmarks.length;result.y/=_landmarks.length;
      result.w=result.maxx-result.minx;result.h=result.maxy-result.miny;
      result.z=0.0;result.d=0.0;
    }
    return result;
  }
  findGestures(_hands,_handednesses,_3d){
    let result=[];
    for(let i=0;i<_hands.length;i++){
      if(_hands[i].length!==21) continue; // it should be 21-landmark-based mediapipe format
      let gestureParams=this.calcGestureParams(_hands[i],this.gestureStructure.gestureCalcTips,_3d);
      result[result.length] = new Gesture( // _p,_uniqueid,_startnormx,_startnormy,_startnormz,_startnormw,_startnormh,_startnormd,_leftrightindex
        this.p, this.getUniqueGestureId(),
        gestureParams.x,gestureParams.y,gestureParams.z,
        gestureParams.w,gestureParams.h,gestureParams.d,
        this.huskHandednessIndex(_handednesses[i])
      );
    }
    return result;
  }
  huskHandednessIndex(_handedness){
    let result=-1;
    for(let i=0;i<_handedness.length;i++){if(_handedness[i]) result= _handedness[i].index; break;}
    if(result<0) console.log("[Gestures, huskHandednessIndex] problematic input data: "+_handedness);
    return result;
  }
  getUniqueGestureId(){this.uniqueGestureId+=1; return this.uniqueGestureId;};
  flush(){
    for(let i=0;i<this.items.length;i++){
      this.items[i].status=Gesture.STATUS_FINISHED;
      this.messages[this.messages.length]=this.items[i];
    }
    this.items.splice(0,this.items.length);
  }
  drawMessages(_g,_x,_y,_w,_h){
    _g.noStroke(); _g.fill(255);
    //_g.text("this.messages.length: "+this.messages.length,20,20);
    let pixx1=0; let pixy1=0; let pixx2=0; let pixy2=0;
    for(let i=0;i<this.messages.length;i++){
      pixx1=_x+this.messages[i].startnormx*_w;
      pixy1=_y+this.messages[i].startnormy*_h;
      pixx2=_x+this.messages[i].normx*_w;
      pixy2=_y+this.messages[i].normy*_h;
      _g.strokeWeight(1); _g.stroke(255);
      _g.line(pixx1,pixy1,pixx2,pixy2);
      _g.noStroke();
      switch(this.messages[i].status){
        case Gesture.STATUS_NEW: _g.fill(255,0,0); break;
        case Gesture.STATUS_CONTINUED: _g.fill(0,255,0); break;
        case Gesture.STATUS_FINISHED: _g.fill(0,0,255); break;
        default: console.log("[Gestures, drawMessages] unhandled this.messages[i].status: "+this.messages[i].status);
      }
      _g.circle(pixx1,pixy1,10);
      _g.circle(pixx2,pixy2,10);
      _g.text(
        "id: "+this.messages[i].uniqueid+
        "\nstatus: "+this.messages[i].status+
        "\nlr: "+this.messages[i].leftrightindex,
        pixx2+20,pixy2+20
      );
    }
  }
}
								

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

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

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

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

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

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

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

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

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

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

									roi.js
									class Roi{
  static get MIRROR_NONE(){return 0;}
  static get MIRROR_HORIZONTAL(){return 1;}
  static get MIRROR_VERTICAL(){return 2;}
  static get MIRROR_BOTH(){return 3;}
  constructor(){}
  imageWithRoi=function(_ctx,_gfx,_roiRect,_mirror){
    let fx=_ctx.width/_roiRect.w; let fy=_ctx.height/_roiRect.h;
    switch(_mirror){
      case Roi.MIRROR_NONE: _ctx.image(_gfx,-fx*_roiRect.x,-fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height); break;
      case  Roi.MIRROR_HORIZONTAL:
        _ctx.push();
          _ctx.scale(-1,1); _ctx.translate(-fx*capture.width,0);
          _ctx.image(_gfx,fx*_roiRect.x,-fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      case  Roi.MIRROR_VERTICAL:
        _ctx.push();
          _ctx.scale(1,-1); _ctx.translate(0,-fy*_gfx.height);
          _ctx.image(_gfx,-fx*_roiRect.x,fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      case  Roi.MIRROR_BOTH:
        _ctx.push();
          _ctx.scale(-1,-1); _ctx.translate(-fx*_gfx.width,-fy*_gfx.height);
          _ctx.image(_gfx,fx*_roiRect.x,fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      default: console.log("[Roi, imageWithRoi] unhandled _mirror: "+_mirror);
    }
  };
  calcRoi=function(_ctx,_gfx,_roiRect){
    if(_gfx        === null)      return false;
    if(_gfx        === undefined) return false;
    if(_gfx.width  === null)      return false;
    if(_gfx.width  === undefined) return false;
    if(_gfx.height === null)      return false;
    if(_gfx.height === undefined) return false;
    let ratio_a=_ctx.width/_ctx.height; let ratio_b=_gfx.width/_gfx.height;
    if(ratio_a>ratio_b){
      _roiRect.w=_gfx.width; _roiRect.h=Math.floor(_roiRect.w*_ctx.height/_ctx.width);
    }else{
      _roiRect.h=_gfx.height; _roiRect.w=Math.floor(_roiRect.h*(_ctx.width/_ctx.height));
    }
    _roiRect.x=Math.floor((_gfx.width-_roiRect.w)/2);
    _roiRect.y=Math.floor((_gfx.height-_roiRect.h)/2);
    return true;
  };
}
								

									synth.js
									class Synth{
  constructor(_p,_catergraphers){
    this.p=_p; this.audioEnabled=false; this.catergraphers=_catergraphers; this.voice=null; this.mainNormVolume=7.0;
  }
  init(){
    if(!this.audioEnabled){this.setupVoice(); Tone.start(); this.audioEnabled=true; console.log("[Synth, init] audio enabled: "+Tone);}
  }
  setupVoice(){
    this.voice={
      id:-1,startnormx:0.0,startnormy:0.0,normx:0.0,normy:0.0,
      noise:(new Tone.Noise("white")), // white|pink|brown
      filter:(new Tone.Filter(1500, "bandpass")),
      tremolo:(new Tone.Tremolo(9, 0.75).toDestination()) // depth, frequency
    };
    this.voice.noise.connect(this.voice.filter);
    this.voice.filter.connect(this.voice.tremolo);
    this.voice.noise.volume.rampTo(-Infinity,0.0);
    this.voice.tremolo.start();
    this.voice.noise.start();
  }
  setVoiceVol(_normVol){this.voice.noise.volume.rampTo(this.mag2db(_normVol),0.4);}
  setVoiceFilterQ(_normQ){this.voice.filter.Q.rampTo((1.0-_normQ)*5.0,0.2);}
  setVoiceFilterFreq(_normFreq){this.voice.filter.frequency.rampTo(2000+Math.pow(_normFreq,2)*2000,0.2);}
  setVoiceTremoloFreq(_normFreq){this.voice.tremolo.frequency.rampTo(15+Math.pow(_normFreq,2)*10,0.2);}
  setVoiceTremoloDepth(_normDepth){this.voice.tremolo.depth.rampTo(0.5+Math.pow(_normDepth,2)*0.5,0.2);}
  update(){
    if(!this.audioEnabled) return;
    let f=this.catergraphers.items.length/this.catergraphers.maxNumOfGestures;
    this.setVoiceVol(Math.pow(f,0.5));
    this.setVoiceFilterQ((Math.sin(f*5.0)+1.0)*0.5);
    this.setVoiceFilterFreq((Math.sin(f*4.1+0.7)+1.0)*0.5);
    this.setVoiceTremoloFreq((Math.sin(f*3.0+0.5)+1.0)*0.5);
    this.setVoiceTremoloDepth((Math.sin(f*5.0+0.5)+1.0)*0.5);
  }
  mag2db(_mag){return (20*Math.log10(_mag));}
  mtof(_m){return (440.0*Math.pow(2.0,(_m-69.0)/12.0));}
}
								

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/30.);
								

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

									mediapipehand.js
									//https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker

import {HandLandmarker, GestureRecognizer, FilesetResolver,} from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0";

export { MediaPipeHand as MediaPipeHand };

class MediaPipeHand{
    static get DRAWINGMODE_SIMPLETECHNICAL(){return 1;}
    static get DRAWINGMODE_HANDV1(){return 2;}
    static get DRAWINGMODE_HANDV2(){return 3;}
    static get DRAWINGMODE_HANDV2(){return 4;}
    static get MIRROR_NONE(){return 0;}
    static get MIRROR_HORIZONTAL(){return 1;}
    static get MIRROR_VERTICAL(){return 2;}
    static get MIRROR_BOTH(){return 3;}
    constructor(_p,_capture,_mode,_numHands,_runningMode){
        this.p=_p;this.capture=_capture;this.mode=_mode;this.numHands=_numHands;this.runningMode=_runningMode;
        this.handLandmarker=null;this.gestureRecognizer=null;this.hands=null;this.gestureRecognitionResult=null;
            const createHandLandmarker = async () => {
            if(this.mode===0){ //hand landmarks only
                const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm");
                this.handLandmarker = await HandLandmarker.createFromOptions(vision, {
                    baseOptions: {
                        modelAssetPath:"https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task",
                        delegate: "GPU",
                    },
                    runningMode: this.runningMode,
                    numHands: this.numHands
                });
                return;
            }
            if(this.mode===1){ //landmarks and gestures
                const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm");
                this.gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
                    baseOptions: {
                        modelAssetPath:"https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task",
                        delegate: "GPU",
                    },
                    runningMode: this.runningMode,
                    numHands: this.numHands
                });
                return;
            }
        };
        createHandLandmarker();
    }
    getNumberOfHands(){ // im not sure about this procedure, especially mode 1
        if(this.mode===0){ //hand landmarks only
            if(!this.handLandmarker) return 0; if(!this.hands) return 0; if(!this.hands.landmarks) return 0; if(!this.hands.landmarks.length) return 0;
            return this.hands.landmarks.length;
        }
        if(this.mode===1){ //landmarks and gestures
            if(!this.gesturalInterface.gestureRecognizer) return 0; if(!this.gestureRecognitionResult) return 0; if(!this.gestureRecognitionResult.landmarks) return 0; if(!this.gestureRecognitionResult.landmarks.length) return 0;
            return this.gestureRecognitionResult.landmarks.length;
        }
        return 0;
    }
    update(){
        if(this.mode===0){ //hand landmarks only
            if(this.handLandmarker) this.hands=this.handLandmarker.detect(this.capture.canvas);
            return;
        }
        if(this.mode===1){ //landmarks and gestures
            if(this.gestureRecognizer) this.gestureRecognitionResult=this.gestureRecognizer.recognize(this.capture.canvas);
            return;
        }
    }
    draw(_ctx,_captureGfx,_roi,_mirror,_drawingMode){
        if(this.mode===0){ //hand landmarks only
            if(this.handLandmarker&&this.hands) this._drawImageRecognitionResultsWithRoi(_ctx,_captureGfx,_roi,_mirror,_drawingMode);
            return;
        }
        if(this.mode===1){ //landmarks and gestures
            if(gesturalInterface.gestureRecognizer&&gesturalInterface.gestureRecognitionResult) this._drawImageRecognitionResultsWithRoi(_ctx,_captureGfx,_roi,_mirror,_drawingMode);
            return;
        }
    }
    _drawImageRecognitionResultsWithRoi=function(_ctx,_captureGfx,_roi,_mirror,_drawingMode){
        let fx=_ctx.width/_roi.w; let fy=_ctx.height/_roi.h;
        switch(_mirror){
            case MediaPipeHand.MIRROR_NONE:
                switch(_drawingMode){
                    case MediaPipeHand.DRAWINGMODE_SIMPLETECHNICAL: this.drawLandmarksInSimpleTechnicalMode(_ctx,-fx*_roi.x,-fy*_roi.y,fx*_captureGfx.width,fy*_captureGfx.height); break;
                    case MediaPipeHand.DRAWINGMODE_HANDV1: this.drawLandmarksInHandV1Mode(_ctx,-fx*_roi.x,-fy*_roi.y,fx*_captureGfx.width,fy*_captureGfx.height); break;
                    case MediaPipeHand.DRAWINGMODE_HANDV2: this.drawLandmarksInHandV2Mode(_ctx,-fx*_roi.x,-fy*_roi.y,fx*_captureGfx.width,fy*_captureGfx.height); break;
                    case MediaPipeHand.DRAWINGMODE_HANDV3: this.drawLandmarksInHandV3Mode(_ctx,-fx*_roi.x,-fy*_roi.y,fx*_captureGfx.width,fy*_captureGfx.height); break;
                    default: console.log("[MediaPipeHand, _drawImageRecognitionResultsWithRoi] unhandled _drawingMode: "+_drawingMode);
                }
            break;
            /*
            case MediaPipeHand.MIRROR_HORIZONTAL:
                _ctx.push();
                _ctx.scale(-1,1); _ctx.translate(-fx*capture.width,0);
                _ctx.image(_gfx,fx*_roi.x,-fy*_roi.y,fx*_gfx.width,fy*_gfx.height);
                _ctx.pop();
            break;
            case MediaPipeHand.MIRROR_VERTICAL:
                _ctx.push();
                _ctx.scale(1,-1); _ctx.translate(0,-fy*_gfx.height);
                _ctx.image(_gfx,-fx*_roi.x,fy*_roi.y,fx*_gfx.width,fy*_gfx.height);
                _ctx.pop();
            break;
            case MediaPipeHand.MIRROR_BOTH:
                _ctx.push();
                _ctx.scale(-1,-1); _ctx.translate(-fx*_gfx.width,-fy*_gfx.height);
                _ctx.image(_gfx,fx*_roi.x,fy*_roi.y,fx*_gfx.width,fy*_gfx.height);
                _ctx.pop();
            break;
            */
            default: console.log("[MediaPipeHand, _drawImageRecognitionResultsWithRoi] unhandled _mirror: "+_mirror);
        }
    }
    drawLandmarksInHandV1Mode(_ctx,_x,_y,_w,_h){
        if(this.mode===0){ //hand landmarks only
            _ctx.noFill(); _ctx.stroke(255); _ctx.strokeWeight(10);
            for(let i=0;i<this.hands.landmarks.length;i++){
                let landmarks = this.hands.landmarks[i];
                _ctx.line(_x+landmarks[4].x*_w,_y+landmarks[4].y*_h,_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                _ctx.line(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h,_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                _ctx.line(_x+landmarks[8].x*_w,_y+landmarks[8].y*_h,_x+landmarks[7].x*_w,_y+landmarks[7].y*_h);
                _ctx.line(_x+landmarks[7].x*_w,_y+landmarks[7].y*_h,_x+landmarks[6].x*_w,_y+landmarks[6].y*_h);
                _ctx.line(_x+landmarks[6].x*_w,_y+landmarks[6].y*_h,_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                _ctx.line(_x+landmarks[12].x*_w,_y+landmarks[12].y*_h,_x+landmarks[11].x*_w,_y+landmarks[11].y*_h);
                _ctx.line(_x+landmarks[11].x*_w,_y+landmarks[11].y*_h,_x+landmarks[10].x*_w,_y+landmarks[10].y*_h);
                _ctx.line(_x+landmarks[10].x*_w,_y+landmarks[10].y*_h,_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                _ctx.line(_x+landmarks[16].x*_w,_y+landmarks[16].y*_h,_x+landmarks[15].x*_w,_y+landmarks[15].y*_h);
                _ctx.line(_x+landmarks[15].x*_w,_y+landmarks[15].y*_h,_x+landmarks[14].x*_w,_y+landmarks[14].y*_h);
                _ctx.line(_x+landmarks[14].x*_w,_y+landmarks[14].y*_h,_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                _ctx.line(_x+landmarks[20].x*_w,_y+landmarks[20].y*_h,_x+landmarks[19].x*_w,_y+landmarks[19].y*_h);
                _ctx.line(_x+landmarks[19].x*_w,_y+landmarks[19].y*_h,_x+landmarks[18].x*_w,_y+landmarks[18].y*_h);
                _ctx.line(_x+landmarks[18].x*_w,_y+landmarks[18].y*_h,_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                _ctx.noStroke(); _ctx.fill(255);
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h);
                    _ctx.vertex(_x+landmarks[1].x*_w,_y+landmarks[1].y*_h);
                    _ctx.vertex(_x+landmarks[0].x*_w,_y+landmarks[0].y*_h);
                    _ctx.vertex(_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                    _ctx.vertex(_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                    _ctx.vertex(_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                    _ctx.vertex(_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                _ctx.endShape(this.p.CLOSE);
                //let handednesses = gesturalInterface.hands.handednesses[i];
                //console.log(handednesses[0].index); // 0 left 1 right
                //for(let j=0;j<landmarks.length;j++){
                    //let landmark = landmarks[j];
                    //_ctx.circle(_x+landmark.x*_w,_y+landmark.y*_h,10);
                //}
            }
            return;
        }
        if(this.mode===1){ //landmarks and gestures
            _ctx.noFill(); _ctx.stroke(255); _ctx.strokeWeight(10);
            for(let i=0;i<this.gestureRecognitionResult.landmarks.length;i++){
                let landmarks = this.gestureRecognitionResult.landmarks[i];
                for(let j=0;j<landmarks.length;j++){
                    _ctx.line(_x+landmarks[4].x*_w,_y+landmarks[4].y*_h,_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                    _ctx.line(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h,_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                    _ctx.line(_x+landmarks[8].x*_w,_y+landmarks[8].y*_h,_x+landmarks[7].x*_w,_y+landmarks[7].y*_h);
                    _ctx.line(_x+landmarks[7].x*_w,_y+landmarks[7].y*_h,_x+landmarks[6].x*_w,_y+landmarks[6].y*_h);
                    _ctx.line(_x+landmarks[6].x*_w,_y+landmarks[6].y*_h,_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                    _ctx.line(_x+landmarks[12].x*_w,_y+landmarks[12].y*_h,_x+landmarks[11].x*_w,_y+landmarks[11].y*_h);
                    _ctx.line(_x+landmarks[11].x*_w,_y+landmarks[11].y*_h,_x+landmarks[10].x*_w,_y+landmarks[10].y*_h);
                    _ctx.line(_x+landmarks[10].x*_w,_y+landmarks[10].y*_h,_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                    _ctx.line(_x+landmarks[16].x*_w,_y+landmarks[16].y*_h,_x+landmarks[15].x*_w,_y+landmarks[15].y*_h);
                    _ctx.line(_x+landmarks[15].x*_w,_y+landmarks[15].y*_h,_x+landmarks[14].x*_w,_y+landmarks[14].y*_h);
                    _ctx.line(_x+landmarks[14].x*_w,_y+landmarks[14].y*_h,_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                    _ctx.line(_x+landmarks[20].x*_w,_y+landmarks[20].y*_h,_x+landmarks[19].x*_w,_y+landmarks[19].y*_h);
                    _ctx.line(_x+landmarks[19].x*_w,_y+landmarks[19].y*_h,_x+landmarks[18].x*_w,_y+landmarks[18].y*_h);
                    _ctx.line(_x+landmarks[18].x*_w,_y+landmarks[18].y*_h,_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                    _ctx.noStroke(); _ctx.fill(255);
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h);
                        _ctx.vertex(_x+landmarks[1].x*_w,_y+landmarks[1].y*_h);
                        _ctx.vertex(_x+landmarks[0].x*_w,_y+landmarks[0].y*_h);
                        _ctx.vertex(_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                        _ctx.vertex(_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                        _ctx.vertex(_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                        _ctx.vertex(_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                    _ctx.endShape(this.p.CLOSE);
                }
                let gestures = this.gestureRecognitionResult.gestures[i];
                for(let j=0;j<gestures.length;j++){
                    let gesture = gestures[j];
                    if(gesture.categoryName!=="None") console.log(gesture);
                    //p.ellipse(landmark.x*gesturalInterface.capture.width,landmark.y*gesturalInterface.capture.height,10);
                }
            }
            return;
        }
    }
    drawLandmarksInHandV2Mode(_ctx,_x,_y,_w,_h){
        if(this.mode===0){ //hand landmarks only
            _ctx.noFill(); _ctx.stroke(255); _ctx.strokeWeight(10);
            for(let i=0;i<this.hands.landmarks.length;i++){
                let landmarks = this.hands.landmarks[i];
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[4].x*_w,_y+landmarks[4].y*_h);
                    _ctx.vertex(_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                    _ctx.vertex(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h);
                    _ctx.vertex(_x+landmarks[1].x*_w,_y+landmarks[1].y*_h);
                    //_ctx.vertex(_x+landmarks[0].x*_w,_y+landmarks[0].y*_h);
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[8].x*_w,_y+landmarks[8].y*_h);
                    _ctx.vertex(_x+landmarks[7].x*_w,_y+landmarks[7].y*_h);
                    _ctx.vertex(_x+landmarks[6].x*_w,_y+landmarks[6].y*_h);
                    _ctx.vertex(_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[5].x,landmarks[0].x,0.5)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[12].x*_w,_y+landmarks[12].y*_h);
                    _ctx.vertex(_x+landmarks[11].x*_w,_y+landmarks[11].y*_h);
                    _ctx.vertex(_x+landmarks[10].x*_w,_y+landmarks[10].y*_h);
                    _ctx.vertex(_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[9].x,landmarks[0].x,0.5)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[16].x*_w,_y+landmarks[16].y*_h);
                    _ctx.vertex(_x+landmarks[15].x*_w,_y+landmarks[15].y*_h);
                    _ctx.vertex(_x+landmarks[14].x*_w,_y+landmarks[14].y*_h);
                    _ctx.vertex(_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[13].x,landmarks[0].x,0.5)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[20].x*_w,_y+landmarks[20].y*_h);
                    _ctx.vertex(_x+landmarks[19].x*_w,_y+landmarks[19].y*_h);
                    _ctx.vertex(_x+landmarks[18].x*_w,_y+landmarks[18].y*_h);
                    _ctx.vertex(_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[0].x,landmarks[17].x,0.9)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
            }
            return;
        }
        if(this.mode===1){ //landmarks and gestures
            _ctx.noFill(); _ctx.stroke(255); _ctx.strokeWeight(10);
            for(let i=0;i<this.gestureRecognitionResult.landmarks.length;i++){
                let landmarks = this.gestureRecognitionResult.landmarks[i];
                for(let j=0;j<landmarks.length;j++){
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[4].x*_w,_y+landmarks[4].y*_h);
                        _ctx.vertex(_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                        _ctx.vertex(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h);
                        _ctx.vertex(_x+landmarks[1].x*_w,_y+landmarks[1].y*_h);
                        //_ctx.vertex(_x+landmarks[0].x*_w,_y+landmarks[0].y*_h);
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[8].x*_w,_y+landmarks[8].y*_h);
                        _ctx.vertex(_x+landmarks[7].x*_w,_y+landmarks[7].y*_h);
                        _ctx.vertex(_x+landmarks[6].x*_w,_y+landmarks[6].y*_h);
                        _ctx.vertex(_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[5].x,landmarks[0].x,0.5)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[12].x*_w,_y+landmarks[12].y*_h);
                        _ctx.vertex(_x+landmarks[11].x*_w,_y+landmarks[11].y*_h);
                        _ctx.vertex(_x+landmarks[10].x*_w,_y+landmarks[10].y*_h);
                        _ctx.vertex(_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[9].x,landmarks[0].x,0.5)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[16].x*_w,_y+landmarks[16].y*_h);
                        _ctx.vertex(_x+landmarks[15].x*_w,_y+landmarks[15].y*_h);
                        _ctx.vertex(_x+landmarks[14].x*_w,_y+landmarks[14].y*_h);
                        _ctx.vertex(_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[13].x,landmarks[0].x,0.5)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[20].x*_w,_y+landmarks[20].y*_h);
                        _ctx.vertex(_x+landmarks[19].x*_w,_y+landmarks[19].y*_h);
                        _ctx.vertex(_x+landmarks[18].x*_w,_y+landmarks[18].y*_h);
                        _ctx.vertex(_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[0].x,landmarks[17].x,0.9)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                }
                let gestures = this.gestureRecognitionResult.gestures[i];
                for(let j=0;j<gestures.length;j++){
                    let gesture = gestures[j];
                    if(gesture.categoryName!=="None") console.log(gesture);
                    //p.ellipse(landmark.x*gesturalInterface.capture.width,landmark.y*gesturalInterface.capture.height,10);
                }
            }
            return;
        }
    }
    drawLandmarksInHandV3Mode(_ctx,_x,_y,_w,_h){
        if(this.mode===0){ //hand landmarks only
            _ctx.noFill(); _ctx.stroke(255,70); _ctx.strokeWeight(6);
            for(let i=0;i<this.hands.landmarks.length;i++){
                let landmarks = this.hands.landmarks[i];
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[4].x*_w,_y+landmarks[4].y*_h);
                    _ctx.vertex(_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                    _ctx.vertex(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h);
                    _ctx.vertex(_x+landmarks[1].x*_w,_y+landmarks[1].y*_h);
                    //_ctx.vertex(_x+landmarks[0].x*_w,_y+landmarks[0].y*_h);
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[8].x*_w,_y+landmarks[8].y*_h);
                    _ctx.vertex(_x+landmarks[7].x*_w,_y+landmarks[7].y*_h);
                    _ctx.vertex(_x+landmarks[6].x*_w,_y+landmarks[6].y*_h);
                    _ctx.vertex(_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[5].x,landmarks[0].x,0.5)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[12].x*_w,_y+landmarks[12].y*_h);
                    _ctx.vertex(_x+landmarks[11].x*_w,_y+landmarks[11].y*_h);
                    _ctx.vertex(_x+landmarks[10].x*_w,_y+landmarks[10].y*_h);
                    _ctx.vertex(_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[9].x,landmarks[0].x,0.5)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[16].x*_w,_y+landmarks[16].y*_h);
                    _ctx.vertex(_x+landmarks[15].x*_w,_y+landmarks[15].y*_h);
                    _ctx.vertex(_x+landmarks[14].x*_w,_y+landmarks[14].y*_h);
                    _ctx.vertex(_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[13].x,landmarks[0].x,0.5)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
                _ctx.beginShape();
                    _ctx.vertex(_x+landmarks[20].x*_w,_y+landmarks[20].y*_h);
                    _ctx.vertex(_x+landmarks[19].x*_w,_y+landmarks[19].y*_h);
                    _ctx.vertex(_x+landmarks[18].x*_w,_y+landmarks[18].y*_h);
                    _ctx.vertex(_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                    _ctx.vertex(
                        _x+this.p.lerp(landmarks[0].x,landmarks[17].x,0.9)*_w,
                        _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                    );
                _ctx.endShape();
            }
            return;
        }
        if(this.mode===1){ //landmarks and gestures
            _ctx.noFill(); _ctx.stroke(255,128); _ctx.strokeWeight(6);
            for(let i=0;i<this.gestureRecognitionResult.landmarks.length;i++){
                let landmarks = this.gestureRecognitionResult.landmarks[i];
                for(let j=0;j<landmarks.length;j++){
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[4].x*_w,_y+landmarks[4].y*_h);
                        _ctx.vertex(_x+landmarks[3].x*_w,_y+landmarks[3].y*_h);
                        _ctx.vertex(_x+landmarks[2].x*_w,_y+landmarks[2].y*_h);
                        _ctx.vertex(_x+landmarks[1].x*_w,_y+landmarks[1].y*_h);
                        //_ctx.vertex(_x+landmarks[0].x*_w,_y+landmarks[0].y*_h);
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[8].x*_w,_y+landmarks[8].y*_h);
                        _ctx.vertex(_x+landmarks[7].x*_w,_y+landmarks[7].y*_h);
                        _ctx.vertex(_x+landmarks[6].x*_w,_y+landmarks[6].y*_h);
                        _ctx.vertex(_x+landmarks[5].x*_w,_y+landmarks[5].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[5].x,landmarks[0].x,0.5)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[12].x*_w,_y+landmarks[12].y*_h);
                        _ctx.vertex(_x+landmarks[11].x*_w,_y+landmarks[11].y*_h);
                        _ctx.vertex(_x+landmarks[10].x*_w,_y+landmarks[10].y*_h);
                        _ctx.vertex(_x+landmarks[9].x*_w,_y+landmarks[9].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[9].x,landmarks[0].x,0.5)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[16].x*_w,_y+landmarks[16].y*_h);
                        _ctx.vertex(_x+landmarks[15].x*_w,_y+landmarks[15].y*_h);
                        _ctx.vertex(_x+landmarks[14].x*_w,_y+landmarks[14].y*_h);
                        _ctx.vertex(_x+landmarks[13].x*_w,_y+landmarks[13].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[13].x,landmarks[0].x,0.5)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                    _ctx.beginShape();
                        _ctx.vertex(_x+landmarks[20].x*_w,_y+landmarks[20].y*_h);
                        _ctx.vertex(_x+landmarks[19].x*_w,_y+landmarks[19].y*_h);
                        _ctx.vertex(_x+landmarks[18].x*_w,_y+landmarks[18].y*_h);
                        _ctx.vertex(_x+landmarks[17].x*_w,_y+landmarks[17].y*_h);
                        _ctx.vertex(
                            _x+this.p.lerp(landmarks[0].x,landmarks[17].x,0.9)*_w,
                            _y+this.p.lerp(landmarks[2].y,landmarks[1].y,0.5)*_h
                        );
                    _ctx.endShape();
                }
                let gestures = this.gestureRecognitionResult.gestures[i];
                for(let j=0;j<gestures.length;j++){
                    let gesture = gestures[j];
                    if(gesture.categoryName!=="None") console.log(gesture);
                    //p.ellipse(landmark.x*gesturalInterface.capture.width,landmark.y*gesturalInterface.capture.height,10);
                }
            }
            return;
        }
    }
    drawLandmarksInSimpleTechnicalMode(_ctx,_x,_y,_w,_h){
        if(this.mode===0){ //hand landmarks only
            _ctx.noStroke(); _ctx.fill(255);
            for(let i=0;i<this.hands.landmarks.length;i++){
                let landmarks = this.hands.landmarks[i];
                //let handednesses = gesturalInterface.hands.handednesses[i];
                //console.log(handednesses[0].index); // 0 left 1 right
                for(let j=0;j<landmarks.length;j++){
                    let landmark = landmarks[j];
                    _ctx.circle(_x+landmark.x*_w,_y+landmark.y*_h,10);
                }
            }
            return;
        }
        if(this.mode===1){ //landmarks and gestures
            _ctx.noStroke(); _ctx.fill(255);
            for(let i=0;i<this.gestureRecognitionResult.landmarks.length;i++){
                let landmarks = this.gestureRecognitionResult.landmarks[i];
                for(let j=0;j<landmarks.length;j++){
                    let landmark = landmarks[j];
                    _ctx.circle(_x+landmark.x*_w,_y+landmark.y*_h,10);
                }
                let gestures = this.gestureRecognitionResult.gestures[i];
                for(let j=0;j<gestures.length;j++){
                    let gesture = gestures[j];
                    if(gesture.categoryName!=="None") console.log(gesture);
                    //p.ellipse(landmark.x*gesturalInterface.capture.width,landmark.y*gesturalInterface.capture.height,10);
                }
            }
            return;
        }
    }
}
								

									catergraphers.js
									class CatergrapherVec3f{
  constructor(_x,_y,_pressure){this.x=_x,this.y=_y;this.pressure=_pressure;}
}
class CatergrapherPolygon{
  constructor(_numOfPoints){
    this.points=[]; for(let i=0;i<_numOfPoints;i++) this.points[i] = new CatergrapherVec3f(-1.0,-1.0,-1.0);
  }
}
class CatergrapherGesture{
  constructor(_p,_w,_h){
    this.p=_p;this.canvasSize={w:_w,h:_h};
    this.damp=5.0;this.dampInv=1.0/this.damp;this.damp1=this.damp-1;
    this.pressureFromVelocityParams={scale:18.0,minP:0.02};
    this.smoothingParams={weight:18.0};
    this.capacity=600; this.minMove=3;
    this.path=[]; // Vec3f[]
    this.crosses=[]; // int[]
    this.polygons=[]; // Polygon[]
    this.nPoints=0; this.nPolys=0;
    this.jump={dx:0.0,dy:0.0};
    this.exists=false;
    this.thickness=14;
    this.friction={
      r:(Math.random()*30-15),
      g:(Math.random()*30-15),
      b:(Math.random()*30-15),
      a:(Math.random()*30-15)
    };
    this.color={
      r:(20+this.friction.r),
      g:(20+this.friction.g),
      b:(20+this.friction.b),
      a:(100+this.friction.a)
    };
    for(let i=0;i<this.capacity;i++){this.path[i] = new CatergrapherVec3f(0.0,0.0,0.0); this.polygons[i] = new CatergrapherPolygon(4); this.crosses[i]=0;}
  }
  getPos(){let result={x:-1.0,y:-1.0}; if(this.nPoints>0){result.x=this.path[0].x;result.y=this.path[0].y;} return result;}
  clear(){this.nPoints=0;this.exists=false;} // thickness??
  clearPolys(){this.nPolys=0;}
  addPoint(_pixx,_pixy){
    if(this.nPoints>=this.capacity) return false;
    let temp_float_v=this.distToLast(_pixx,_pixy);
    if((this.nPoints>0)&&(temp_float_v<this.minMove)) return false;
    let temp_float_p =this.getPressureFromVelocity(temp_float_v);
    this.path[this.nPoints].x=_pixx;this.path[this.nPoints].y=_pixy;
    this.path[this.nPoints].pressure=temp_float_p;
    this.nPoints++;
    if(this.nPoints>1){
      this.exists=true;
      this.jump.dx=this.path[this.nPoints-1].x-this.path[0].x;
      this.jump.dy=this.path[this.nPoints-1].y-this.path[0].y;
    }
    return true;
  }
  getPressureFromVelocity(_float_v){
    let temp_final_float_oldP = (this.nPoints>0) ? this.path[this.nPoints-1].pressure:0.0;
    return(
      (
        (
          this.pressureFromVelocityParams.minP + 
          this.p.max(0, 1.0 - _float_v / this.pressureFromVelocityParams.scale)
        ) + (this.damp1 * temp_final_float_oldP)
      ) * this.dampInv
    ); // returned val should be a float
  }
  distToLast(_float_ix,_float_iy){
    if(this.nPoints<1) return 30.0;
    let temp_vec3f=this.path[this.nPoints-1]; // Vec3f v = path[nPoints-1];
    let float_dx=temp_vec3f.x-_float_ix; let float_dy=temp_vec3f.y-_float_iy;
    return this.p.mag(float_dx,float_dy);
  }
  compile(){ // compute the polygons from the path of Vec3f's
    if(!this.exists) return; this.clearPolys();
    let temp_vec3f_p0; let temp_vec3f_p1; let temp_vec3f_p2; // Vec3f p0, p1, p2;
    let temp_float_radius0; let temp_float_radius1; // float radius0, radius1;
    let temp_float_ax; let temp_float_bx; let temp_float_cx; let temp_float_dx; // float ax, bx, cx, dx;
    let temp_float_ay; let temp_float_by; let temp_float_cy; let temp_float_dy; // float ay, by, cy, dy;
    let temp_int_axi; let temp_int_bxi; let temp_int_cxi; let temp_int_dxi; let temp_int_axip; let temp_int_axid; // int   axi, bxi, cxi, dxi, axip, axid;
    let temp_int_ayi; let temp_int_byi; let temp_int_cyi; let temp_int_dyi; let temp_int_ayip; let temp_int_ayid; // int   ayi, byi, cyi, dyi, ayip, ayid;
    let temp_float_p1x; let temp_float_p1y;
    let temp_float_dx01; let temp_float_dy01; let temp_float_hp01; let temp_float_si01; let temp_float_co01;
    let temp_float_dx02; let temp_float_dy02; let temp_float_hp02; let temp_float_si02; let temp_float_co02;
    //let temp_float_dx13; let temp_float_dy13; let temp_float_hp13; let temp_float_si13; let temp_float_co13; // not used
    let temp_float_taper = 1.0;
    let temp_int_nPathPoints = this.nPoints - 1;
    let temp_int_lastPolyIndex = temp_int_nPathPoints - 1;
    let temp_float_npm1finv =  1.0 / this.p.max(1, temp_int_nPathPoints - 1);
    // handle the first point
    temp_vec3f_p0 = this.path[0]; temp_vec3f_p1 = this.path[1];
    temp_float_radius0 = temp_vec3f_p0.pressure * this.thickness;
    temp_float_dx01 = temp_vec3f_p1.x - temp_vec3f_p0.x;
    temp_float_dy01 = temp_vec3f_p1.y - temp_vec3f_p0.y;
    temp_float_hp01 = Math.sqrt(temp_float_dx01 * temp_float_dx01 + temp_float_dy01 * temp_float_dy01);
    if(temp_float_hp01 === 0) temp_float_hp02 = 0.0001;
    temp_float_co01 = temp_float_radius0 * temp_float_dx01 / temp_float_hp01;
    temp_float_si01 = temp_float_radius0 * temp_float_dy01 / temp_float_hp01;
    temp_float_ax = temp_vec3f_p0.x - temp_float_si01; 
    temp_float_ay = temp_vec3f_p0.y + temp_float_co01;
    temp_float_bx = temp_vec3f_p0.x + temp_float_si01; 
    temp_float_by = temp_vec3f_p0.y - temp_float_co01;
    //let temp_int_xpts; let temp_int_ypts; // = [];
    let temp_int_LC = 20;
    let temp_int_RC = this.canvasSize.w - temp_int_LC;
    let temp_int_TC = 20;
    let temp_int_BC = this.canvasSize.h - temp_int_TC;
    let temp_float_mint = 0.618; let temp_float_tapow = 0.4;
    // handle the middle points
    let temp_int_i = 1; let temp_apoly; // = new Polygon();
    for(temp_int_i = 1; temp_int_i < temp_int_nPathPoints; temp_int_i++) {
      temp_float_taper = Math.pow((temp_int_lastPolyIndex - temp_int_i) * temp_float_npm1finv, temp_float_tapow);
      temp_vec3f_p0 = this.path[temp_int_i - 1];
      temp_vec3f_p1 = this.path[temp_int_i    ];
      temp_vec3f_p2 = this.path[temp_int_i + 1];
      temp_float_p1x = temp_vec3f_p1.x;
      temp_float_p1y = temp_vec3f_p1.y;
      temp_float_radius1 = Math.max(temp_float_mint, temp_float_taper * temp_vec3f_p1.pressure * this.thickness);
      // assumes all segments are roughly the same length...
      temp_float_dx02 = temp_vec3f_p2.x - temp_vec3f_p0.x;
      temp_float_dy02 = temp_vec3f_p2.y - temp_vec3f_p0.y;
      temp_float_hp02 = Math.sqrt(temp_float_dx02 * temp_float_dx02 + temp_float_dy02 * temp_float_dy02); // hp02 = (float) Math.sqrt(dx02*dx02 + dy02*dy02);
      if(Math.floor(temp_float_hp02) != 0) temp_float_hp02 = temp_float_radius1 / temp_float_hp02; // if(temp_float_hp02 != 0) temp_float_hp02 = temp_float_radius1 / temp_float_hp02;
      temp_float_co02 = temp_float_dx02 * temp_float_hp02;
      temp_float_si02 = temp_float_dy02 * temp_float_hp02;
      // translate the integer coordinates to the viewing rectangle
      temp_int_axi = temp_int_axip = Math.floor(temp_float_ax);
      temp_int_ayi = temp_int_ayip = Math.floor(temp_float_ay);
      temp_int_axi = (temp_int_axi<0)?(this.canvasSize.w-((-temp_int_axi)%this.canvasSize.w)):temp_int_axi%this.canvasSize.w;
      temp_int_axid = temp_int_axi - temp_int_axip;
      temp_int_ayi = (temp_int_ayi<0)?(this.canvasSize.h-((-temp_int_ayi)%this.canvasSize.h)):temp_int_ayi%this.canvasSize.h;
      temp_int_ayid = temp_int_ayi - temp_int_ayip;
      // set the vertices of the polygon
      temp_apoly = this.polygons[this.nPolys++];
      //temp_int_xpts = temp_apoly.xpoints; temp_int_ypts = temp_apoly.ypoints;
      temp_apoly.points[0].x = temp_int_axi = temp_int_axid + temp_int_axip;
      temp_apoly.points[1].x = temp_int_bxi = temp_int_axid + Math.floor(temp_float_bx);
      temp_apoly.points[2].x = temp_int_cxi = temp_int_axid + Math.floor(temp_float_cx = temp_float_p1x + temp_float_si02);
      temp_apoly.points[3].x = temp_int_dxi = temp_int_axid + Math.floor(temp_float_dx = temp_float_p1x - temp_float_si02);
      temp_apoly.points[0].y = temp_int_ayi = temp_int_ayid + temp_int_ayip;
      temp_apoly.points[1].y = temp_int_byi = temp_int_ayid + Math.floor(temp_float_by);
      temp_apoly.points[2].y = temp_int_cyi = temp_int_ayid + Math.floor(temp_float_cy = temp_float_p1y - temp_float_co02);
      temp_apoly.points[3].y = temp_int_dyi = temp_int_ayid + Math.floor(temp_float_dy = temp_float_p1y + temp_float_co02);
      // keep a record of where we cross the edge of the screen
      this.crosses[temp_int_i] = 0;
      if((temp_int_axi<=temp_int_LC)||(temp_int_bxi<=temp_int_LC)||(temp_int_cxi<=temp_int_LC)||(temp_int_dxi<=temp_int_LC)) { 
        this.crosses[temp_int_i] |= 1; 
      }
      if((temp_int_axi>=temp_int_RC)||(temp_int_bxi>=temp_int_RC)||(temp_int_cxi>=temp_int_RC)||(temp_int_dxi>=temp_int_RC)) { 
        this.crosses[temp_int_i] |= 2; 
      }
      if((temp_int_ayi<=temp_int_TC)||(temp_int_byi<=temp_int_TC)||(temp_int_cyi<=temp_int_TC)||(temp_int_dyi<=temp_int_TC)) { 
        this.crosses[temp_int_i] |= 4; 
      }
      if((temp_int_ayi>=temp_int_BC)||(temp_int_byi>=temp_int_BC)||(temp_int_cyi>=temp_int_BC)||(temp_int_dyi>=temp_int_BC)) { 
        this.crosses[temp_int_i] |= 8; 
      }
      //swap data for next time
      temp_float_ax = temp_float_dx; 
      temp_float_ay = temp_float_dy;
      temp_float_bx = temp_float_cx; 
      temp_float_by = temp_float_cy;
    }
    // handle the last point
    temp_vec3f_p2 = this.path[temp_int_nPathPoints];
    temp_apoly = this.polygons[this.nPolys++];
    //temp_int_xpts = temp_apoly.xpoints;temp_int_ypts = temp_apoly.ypoints;
    temp_apoly.points[0].x = Math.floor(temp_float_ax);
    temp_apoly.points[1].x = Math.floor(temp_float_bx);
    temp_apoly.points[2].x = Math.floor(temp_vec3f_p2.x);
    temp_apoly.points[3].x = Math.floor(temp_vec3f_p2.x);
    temp_apoly.points[0].y = Math.floor(temp_float_ay);
    temp_apoly.points[1].y = Math.floor(temp_float_by);
    temp_apoly.points[2].y = Math.floor(temp_vec3f_p2.y);
    temp_apoly.points[3].y = Math.floor(temp_vec3f_p2.y);
  }
  smooth(){ // average neighboring points
    let temp_final_float_scale= 1.0/(this.smoothingParams.weight+2.0);
    let temp_final_int_nPointsMinusTwo=this.nPoints-2;
    let temp_vec3f_lower; let temp_vec3f_upper; let temp_vec3f_center;
    for(let i=1;i<temp_final_int_nPointsMinusTwo;i++){
      temp_vec3f_lower=this.path[i-1];temp_vec3f_center=this.path[i];temp_vec3f_upper=this.path[i+1];
      temp_vec3f_center.x=(temp_vec3f_lower.x+this.smoothingParams.weight*temp_vec3f_center.x+temp_vec3f_upper.x)*temp_final_float_scale;
      temp_vec3f_center.y=(temp_vec3f_lower.y+this.smoothingParams.weight*temp_vec3f_center.y+temp_vec3f_upper.y)*temp_final_float_scale;
    }
  }
}
class Catergrapher{
  constructor(_p,_w,_h,_id){
    this.id=_id;this.isFinished=false;this.finishTimetag=-1;this.TTL=10000;
    this.gesture = new CatergrapherGesture(_p,_w,_h);
  }
  getPos(){return this.gesture.getPos();}
}
class Catergraphers{
  constructor(_p){
    this.p=_p;this.maxNumOfGestures=36;this.items=[];this.mainGfx=null;this.messages=[];
    this.bgColor={r:255,g:255,b:255,a:4};
    this.itemTTL={min:4000,max:35000};
  }
  getItemNormPosByIndex(_idx){
    let result=this.items[_idx].getPos();
    result.x=result.x%this.mainGfx.width;result.y=result.y%this.mainGfx.height;
    while(result.x<0) result.x+=this.mainGfx.width; while(result.y<0) result.y+=this.mainGfx.height;
    result.x/=this.mainGfx.width;result.y/=this.mainGfx.height;
    return result;
  }
  clearMessages(){this.messages.splice(0,this.messages.length);}
  resize(_w,_h){this.init(_w,_h);}
  init(_w,_h){
    this.items.splice(0,this.items.length);
    if(this.mainGfx!==null) this.mainGfx.remove();
    this.mainGfx=this.p.createGraphics(_w,_h);
    this.mainGfx.background(this.bgColor.r,this.bgColor.g,this.bgColor.b);
  }
  beginGesture(_normx,_normy,_id){
    while(this.items.length>=this.maxNumOfGestures) this.items.splice(0,1);
    this.items[this.items.length] = new Catergrapher(this.p,this.mainGfx.width,this.mainGfx.height,_id);
    this.items[this.items.length-1].gesture.thickness=this.calcGestureWeight();
    this.items[this.items.length-1].gesture.addPoint(this.mainGfx.width*_normx,this.mainGfx.height*_normy);
    this.items[this.items.length-1].TTL=this.itemTTL.min+(1.0-(this.items.length/this.maxNumOfGestures))*(this.itemTTL.max-this.itemTTL.min);
  }
  continueGesture(_normx,_normy,_id){
    let idx=this.findItemIndexById(_id); if(idx<0) return;
    if(this.items[idx].gesture.addPoint(this.mainGfx.width*_normx,this.mainGfx.height*_normy)){
      this.items[idx].gesture.smooth();this.items[idx].gesture.compile();
    }
  }
  finishGesture(_normx,_normy,_id){
    let idx=this.findItemIndexById(_id); if(idx<0) return;
    this.items[idx].isFinished=true;this.items[idx].finishTimetag=this.p.millis();
  }
  findItemIndexById(_id){
    for(let i=0;i<this.items.length;i++){if(this.items[i].isFinished) continue; if(this.items[i].id===_id) return i;}
    return -1;
  }
  handleTiming(){
    for(let i=this.items.length-1;i>=0;i--){
      if(!this.items[i].isFinished) continue;
      if((this.p.millis()-this.items[i].finishTimetag)<this.items[i].TTL) continue;
      this.items.splice(i,1);
    }
  }
  renderGesture(_itemIndex){
    let cg=this.items[_itemIndex].gesture;
    if(!cg.exists) return; if(cg.nPolys<1) return;
    this.mainGfx.noStroke();
    this.mainGfx.beginShape(this.p.QUADS);
      for(let i=0;i<cg.nPolys;i++){
        this.mainGfx.fill(cg.color.r,cg.color.g,cg.color.b,cg.color.a);
        this.mainGfx.vertex(cg.polygons[i].points[0].x,cg.polygons[i].points[0].y);
        this.mainGfx.vertex(cg.polygons[i].points[1].x,cg.polygons[i].points[1].y);
        this.mainGfx.vertex(cg.polygons[i].points[2].x,cg.polygons[i].points[2].y);
        this.mainGfx.vertex(cg.polygons[i].points[3].x,cg.polygons[i].points[3].y);
      }
    this.mainGfx.endShape();
  }
  render(){
    this.handleTiming();
    this.updateGeometry();
    if(this.p.frameCount%2===0)this.mainGfx.filter(this.p.BLUR,2);
    this.mainGfx.noStroke();this.mainGfx.fill(this.bgColor.r,this.bgColor.g,this.bgColor.b,this.bgColor.a);
    this.mainGfx.rect(0,0,this.mainGfx.width,this.mainGfx.height);
    for(let i=0;i<this.items.length;i++) this.renderGesture(i);
  }
  draw(){this.p.image(this.mainGfx,0,0)}
  updateGeometry(){
    for(let g=0;g<this.items.length;g++){
      if(this.items[g].gesture.exists){
        if(this.items[g].isFinished) this.advanceGesture(g);
      }
    }
  }
  advanceGesture(_itemIndex){ // move a gesture one step
    let cg=this.items[_itemIndex].gesture;
    if(cg.exists){ // check
      let temp_int_nPts1=cg.nPoints-1;
      if(cg.nPoints>0){
        for(let i=temp_int_nPts1;i>0;i--){cg.path[i].x=cg.path[i-1].x;cg.path[i].y=cg.path[i-1].y;}
        cg.path[0].x=cg.path[temp_int_nPts1].x-cg.jump.dx;cg.path[0].y=cg.path[temp_int_nPts1].y-cg.jump.dy;
        cg.compile();
      }
    }
  }
  calcGestureWeight(){
    let temp_weight=this.mainGfx.width;
    if(this.mainGfx.height<temp_weight) temp_weight=this.mainGfx.height;
    temp_weight = Math.floor(temp_weight/20.0);
    if(temp_weight<3.0) temp_weight=3.0;
    return temp_weight;
  }
}
								