Magnesy

wzajemne relacje wizualnej i dźwiękowej kompozycji złożonej z kilku prostych elementów
Podgląd: Domyślna kamera Podgląd: Tylna kamera
Parametry
pointer		chowa / pokazuje kursor myszy
mirror		lustrzane odbicie obrazu z kamery
pinch		wyłącza/włącza detekcję dłoni i gestów
synth		wyłącza/włącza wewnętrzny generator dźwięku
Opis
Z prostych kształtów powstają tu wizualno-dźwiękowe układy reagujące na dotyk lub gest. ”Magnesy” przywołują tradycję dawnych układanek geometrycznych – od tangramu po stomachion Archimedesa – łącząc ją z intuicyjną zabawą i cyfrową precyzją.
Czytaj więcej
„Magnesy” to jedna z prostszych Miniatur eksplorująca wzajemne relacje wizualnej i dźwiękowej kompozycji złożonej z kilku prostych elementów. Poza sterowaniem za pomocą ekranu dotykowego lub myszy/touchpada pozwala na wykorzystanie kontroli gesturalnej i gestu „szczypnięcia”/uchwycenia elementu za pomocą palca wskazującego i kciuka. Ten ostatni mechanizm jest zbudowany w oparciu o kombinację postrzegania obrazu przez AI (detekcja dłoni) i tradycyjnie algorytmicznego systemu interpetującego układ i ruch dłoni jako „chwyt”, „puszczenie” lub przeniesienie. „Magnesy” to jedna z Miniatur-klasyków, towarzysząca programowi rodzinnemu w Centrum Sztuki WRO od czasu kuratorowanej przez Małgorzatę Gawlik wystawy „Ślady” (2020)
Poza oczywistą analogią do magnesów używanych do przyczepiania zdjęć, notatek, itp. do drzwi domowych lodówek Miniatura czerpie luźną inspirację ze starogreckiego stomachionu (tzw. pudełko Archimedesa) i z pochodzącej z Chin łamigłówki/układanki znanej jako tangram (ta nazwa pochodzi z najprawdopodobniej z języka angielskiego) lub 七巧板 (termin chiński). Tangram to zestaw siedmiu elementów o geometrycznym charakterze (trójkąty, kwadraty, równoległobok) powstałych z rozcięcia kwadratu. Istnieje wiele sposobów używania zestawu, m.in. gra z odtwarzanie zaprojektowanego przez kogoś innego wzoru na podstawie zewnętrznych konturów. Proto-tangramy konstruowali m.in. słynny geniusz-erudyta z okresu dynastii Song Huang Bosi (黄伯思) i wybitny matematyk Liu Hui (劉徽) żyjący w okresie Trzech Królestw. Istnieje teoria, że tangram był wizualnym narzędziem obliczeniowym wspomagającym badania w geometrii. Ponadto warto odnotować, że alternatywną, całkowicie fałszywą (a zarazem legendarną dzięki bezczelnej bezpodstawności) historię tangramu kolportował w swojej książce „The Eighth Book Of Tan” z 1908 roku pochodzący z USA szachista i matematyk-amator Samuel Loyd.
Dokumentacja techniczna
Parametry przekazywane przez adres URL

famo user | environment (lub env); domyślnie user; [facingMode] pozwala wymusić użycie przedniej (user) lub tylnej (environment) kamery na urządzeniach, które są wyposażone w podwójne kamery/aparaty (większość współczesnych urządzeń mobilnych)
h pionowa rozdzielczość kamery
mirror 0 lub 1; domyślnie 1; wyłącza/włącza lustrzane odbicie obrazu z urządzenia przechwytującego (zwykle kamery)
pinch 0 lub 1; domyślnie 0; wyłącza/włącza detekcję dłoni i gestów
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
w pozioma rozdzielczość kamery
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
mag magnet indeks (indeks „magnesu”) x (znormalizowana pozycja pozioma) y (znormalizowana pozycja pionowa) rot (rotacja wyrażona w radianach) touchId (unikalny identyfikator „kursora” skojarzonego z „magnesem”, -1 jeśli żaden „kursor” nie jest skojarzony z „magnesem”); parametry pojedynczego „magnesu”
mag touch indeks (indeks „kursora”) x (znormalizowana pozycja pozioma) y (znormalizowana pozycja pionowa) id (unikalny identyfikator) status (jedna z trzech wartości: „started”, „moved”, „finished”); parametry pojedynczego „kursora” (kursora myszy, palca na ekranie dotykowym, lub gestu dłoni w przypadku użycia systemu detekcji ruchu)
Kod źródłowy
									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta charset="utf-8">
  <meta name="description" content="Magnesy (Magnets)">
  <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>"Magnesy (Magnets)", Pawel Janicki, 2020-25, 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="pinch.js"></script>
  <script src="gamepad.js"></script>
  <script src="magnets.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 gamepadInterface={
    isActive:false, isEnabled:false,
    processor:(new Gamepad()),cursors:[]
  };
  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,pinches:null,drawingMode:MediaPipeHand.DRAWINGMODE_HANDV2,
      runningMode:"IMAGE",maxNumOfHands:2,mode:0 // 0 - hand landmarks only, 1 - landmarks and gestures
    }
  };
  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 magnets = new Magnets(
    p,
    {items:[
      {fileName:"1.png",normscale:0.7,img:null,magnet:null},
      {fileName:"2.png",normscale:0.3,img:null,magnet:null},
      {fileName:"3.png",normscale:0.7,img:null,magnet:null},
      {fileName:"4.png",normscale:0.6,img:null,magnet:null},
      {fileName:"5.png",normscale:0.7,img:null,magnet:null},
      {fileName:"6.png",normscale:0.3,img:null,magnet:null}
    ]}
  );
  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,magnets))
  };
  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(){magnets.preload();theme.speakerIcon=p.loadImage("speaker-svgrepo-com.svg");};
  p.setup=function(){
    p.handleUrlParams();
    gesturalInterface.mediaPipeHand.pinches = new Pinches(p);
    if(gesturalInterface.isActive){
      p.initCaptureDevice(gesturalInterface.capture.w,gesturalInterface.capture.h);
      gesturalInterface.roi.processor.calcRoi(gesturalInterface.capture,p,gesturalInterface.roi);
      gesturalInterface.mediaPipeHand.pinches.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';}
    magnets.init();
    p.initTuning();
    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(60);}
  };
  p.handleWorker=function(){p.redraw();}
  p.draw=function(){
    if((p.width!=innerWidth)||p.height!=innerHeight) p.handleResize();
    p.setBackground(p,theme.bgColor.r,theme.bgColor.g,theme.bgColor.b,true);
    storedInteractions.splice(0,storedInteractions.length);
    if(gesturalInterface.isActive){
      gesturalInterface.roi.processor.calcRoi(p,gesturalInterface.capture.processor,gesturalInterface.roi);
      gesturalInterface.mediaPipeHand.pinches.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.updatePinches(); p.handlePinchMessages();
      if(gesturalInterface.mediaPipeHand.processor.getNumberOfHands()) magnets.tint=255; else magnets.tint=180;
    }
    magnets.update(); magnets.draw();
    if(synth.isActive) synth.processor.update();
    if(gamepadInterface.isActive){gamepadInterface.processor.update();p.handleGamepadInterface();}
    if(gesturalInterface.isActive){
      gesturalInterface.mediaPipeHand.processor.draw(p,gesturalInterface.capture.processor,gesturalInterface.roi,Roi.MIRROR_NONE,gesturalInterface.mediaPipeHand.drawingMode);
      p.drawPinchMessagesWithRoi(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();
    if(synth.isActive) synth.processor.markAllSonificationItemsAsHandled();
    guiContainer.gui.draw();
    if(synth.isActive&&(!synth.processor.audioEnabled)) p.drawMutedIcon();
  };
  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); 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);
    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.noStroke(); p.fill(128,128); p.rect(0,0,p.width,p.height);
    //let size=p.width; if(p.width>p.height) size=p.height; size*=0.2;
    //p.textAlign(p.CENTER,p.CENTER);
    //p.fill(255,128); p.textSize(size*0.5); p.text("tap",p.width*0.5,p.height*0.5-size);
    //p.fill(0,255); p.textSize(size); p.text("🔇",p.width*0.5,p.height*0.5);
  };
  p.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);
    magnets.reinit();
  };
  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){
    guiContainer.gui.dragPointer(_pixx,_pixy);
    magnets.touchMoved(_pixx,_pixy,_eventid);
    storedInteractions[storedInteractions.length]={normx:(_pixx/p.width),normy:(_pixy/p.height),id:_eventid,status:"moved"};
  };
  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){
    if((!gamepadInterface.isEnabled)&&gamepadInterface.isActive){gamepadInterface.processor.init();gamepadInterface.isEnabled=true;}
    guiContainer.lock=guiContainer.gui.lockPointer(_pixx,_pixy);
    magnets.touchStarted(_pixx,_pixy,_eventid);
    storedInteractions[storedInteractions.length]={normx:(_pixx/p.width),normy:(_pixy/p.height),id:_eventid,status:"started"};
  };
  p.unifiedTactileEventReleased=function(_pixx,_pixy,_eventid){
    p.initSynth();
    guiContainer.gui.unlockPointer(_pixx,_pixy);
    magnets.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.initTuning=function(){};
  p.sendDataToMax=function(){};
  p.sendDataViaWebSocket=function(){
    for(let i=0;i<storedInteractions.length;i++){
      webSocket.processor.safeSend([
        "mag","touch",i,storedInteractions[i].normx,storedInteractions[i].normy,
        storedInteractions[i].id,storedInteractions[i].status
      ]);
    }
    for(let i=0;i<magnets.items.length;i++){
      webSocket.processor.safeSend([
        "mag","magnet",i,
        magnets.items[i].magnet.normPosX,
        magnets.items[i].magnet.normPosY,
        magnets.items[i].magnet.rotationFactor,
        magnets.items[i].magnet.getAttachedTouchId()
      ]);
    }
  };
  p.sendDataViaMidi=function(){};
  p.setCcMapping=function(_code, _val){};
  p.handleGamepadInterface=function(){
    if(gamepadInterface.cursors.length!==gamepadInterface.processor.items.length){
      // to do: finish "touches"
      gamepadInterface.cursors.splice(0,gamepadInterface.cursors.length);
      for(let i=0;i<gamepadInterface.processor.items.length;i++){
        gamepadInterface.cursors[i]={x:-1,y:-1,isButtonPressed:false,isMoved:false,isButtonPressChanged:false};
        gamepadInterface.cursors[i].x=p.width/gamepadInterface.processor.items.length*i+p.width/2;
        gamepadInterface.cursors[i].y=p.height/2;
      }
    }
    for(let i=0;i<gamepadInterface.processor.items.length;i++){

    }
    p.noStroke(); p.fill(255,128,0,170);
    for(let i=0;i<gamepadInterface.cursors.length;i++){
      p.circle(gamepadInterface.cursors[i].x,gamepadInterface.cursors[i].y,40);
    }
  }
  p.normPinchCoordsToSketchPixWithRoi=function(_pinch,_pinchesRoi){
    let result={
      x:Math.abs((_pinch.normx-_pinchesRoi.normx)/_pinchesRoi.normw*p.width),
      y:Math.abs((_pinch.normy-_pinchesRoi.normy)/_pinchesRoi.normh*p.height)
    };
    return result;
  };
  p.handlePinchMessages=function(){
    for(let i=0;i<gesturalInterface.mediaPipeHand.pinches.messages.length;i++){
      let sketchPixCoords=p.normPinchCoordsToSketchPixWithRoi(gesturalInterface.mediaPipeHand.pinches.messages[i],gesturalInterface.mediaPipeHand.pinches.roi);
      if(gesturalInterface.mediaPipeHand.pinches.messages[i].status===Pinch.STATUS_NEW){
        //magnets.touchStarted(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.pinches.messages[i].id);
        p.unifiedTactileEventPressed(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.pinches.messages[i].uniqueid);
      }else{
        if(gesturalInterface.mediaPipeHand.pinches.messages[i].status===Pinch.STATUS_CONTINUED){
          //magnets.touchMoved(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.pinches.messages[i].id);
          p.unifiedTactileEventDragged(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.pinches.messages[i].uniqueid);
        }else{ // Pinch.STATUS_FINISHED
          //magnets.touchReleased(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.pinches.messages[i].id);
          p.unifiedTactileEventReleased(sketchPixCoords.x,sketchPixCoords.y,gesturalInterface.mediaPipeHand.pinches.messages[i].uniqueid);
        }
      }
    }
  };
  p.updatePinches=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.pinches.processHandsData(landmarks,handednesses);
  };
  p.drawPinchMessagesWithRoi=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.pinches.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("[drawPinchMessagesWithRoi] unhandled _mirror: "+_mirror);
    }
  }
  p.b2int=function(_v){if(_v) return 1; return 0;};
  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("pinch" in urlparams){let v=parseInt(urlparams.pinch); if(!isNaN(v)){gesturalInterface.isActive=(v>0); console.log("[p.handleUrlParams] pinch: "+(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);}}
      }
    }catch(_e){console.log("[setup] _e: "+_e);}
  }
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

									gamepad.js
									//https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
//https://beej.us/blog/data/javascript-gamepad/
class Gamepad{
  static get JOYSTICK_ERROR(){return -1;}
  static get JOYSTICK_UNMAPPED(){return 0;}
  static get JOYSTICK_CENTER(){return 1;}
  static get JOYSTICK_NORTH(){return 2;}
  static get JOYSTICK_SOUTH(){return 3;}
  static get JOYSTICK_EAST(){return 4;}
  static get JOYSTICK_WEST(){return 5;}
  constructor(){
    this.items=[];
  }
  supportsGamepads(){return !!(navigator.getGamepads);}
  releaseAllItems(){for(let idx=0;idx<this.items.length;idx++) this.releaseItem(idx);}
  releaseItem(_idx){ // in most cases if disconnected
    for(let i=0;i<this.items[_idx].axes.nAxes;i++){
      if(this.items[_idx].axes.items[i].status===Gamepad.JOYSTICK_CENTER){
        if(this.items[_idx].axes.items[i].isStatusChanged) this.items[_idx].axes.items[i].isStatusChanged=false;
      }else{
        this.items[_idx].axes.items[i].status=Gamepad.JOYSTICK_CENTER;
        this.items[_idx].axes.items[i].isStatusChanged=true;
      }
    }
    for(let i=0;i<this.items[_idx].buttons.nButtons;i++){
      if(this.items[_idx].buttons.items[i].status){
        this.items[_idx].buttons.items[i].status=false;
        this.items[_idx].buttons.items[i].isStatusChanged=true;
      }else{
        this.items[_idx].buttons.items[i].isStatusChanged=false;
      }
    }
  }
  init(){
    if(this.supportsGamepads()){
      window.addEventListener("gamepadconnected",(_e)=>{this.onConnect(_e)});
      window.addEventListener("gamepaddisconnected",(_e)=>{this.onDisconnect(_e)});
    }else{console.log("[Gamepad, init] This browser probably does not support gamepads.");}
  }
  update(){
    let gps=navigator.getGamepads(); if(!gps) return;
    for(let idx=0;idx<this.items.length;idx++){
      if(this.items[idx].id>=gps.length) return;
      if(!this.items[idx].isConnected) continue;
      let gp=gps[this.items[idx].id];
      let btns=this.items[idx].buttons.items;
      let n1=gp.buttons.length; if(n1>=btns.length) n1=btns.length;
      for(let i=0;i<n1;i++){
        if(gp.buttons[i].pressed===btns.isStatusChanged){
          btns.isStatusChanged=false;
        }else{
          btns[i].status=gp.buttons[i].pressed;
          btns.isStatusChanged=true;
        }
      }
      let axs=this.items[idx].axes.items;
      let n2=gp.axes.length; if(n2>=axs.length) n2=axs.length;
      for(let i=0;i<n2;i++){
        let joystickDirection=this.axeValueToJoystickValue(idx,i,gp.axes[i].pressed);
        if(joystickDirection===axs.status){
          axs.isStatusChanged=false;
        }else{
          axs.status=joystickDirection;
          axs.isStatusChanged=true;
        }
      }
    }
  }
  onConnect(_e){
    console.log(
      "Gamepad connected at index %d: %s, %d buttons, %d axes.",
      _e.gamepad.index,_e.gamepad.id,_e.gamepad.buttons.length,_e.gamepad.axes.length
    );
    console.log("mapping: "+navigator.getGamepads()[_e.gamepad.index].mapping);
    let item={
      isConnected:true,
      id:_e.gamepad.index,
      axes:{
        nAxes:_e.gamepad.axes.length,
        items:[],
        mapping:[
          [
            {direction:Gamepad.JOYSTICK_CENTER,value:0},
            {direction:Gamepad.JOYSTICK_EAST,value:1},
            {direction:Gamepad.JOYSTICK_WEST,value:-1}
          ],
          [
            {direction:Gamepad.JOYSTICK_CENTER,value:0},
            {direction:Gamepad.JOYSTICK_NORTH,value:1},
            {direction:Gamepad.JOYSTICK_SOUTH,value:-1}
          ]
        ]
      },
      buttons:{
        nButtons:_e.gamepad.buttons.length,
        items:[]
      }
    };
    for(let i=0;i<item.buttons.nButtons;i++) item.buttons.items[i]={status:false,isStatusChanged:false};
    for(let i=0;i<item.axes.nAxes;i++) item.axes.items[i]={status:Gamepad.JOYSTICK_CENTER,isStatusChanged:false};
    this.items[this.items.length]=item;
  }
  onDisconnect(_e){
    console.log(
      "Gamepad disconnected from index %d: %s",
      _e.gamepad.index,_e.gamepad.id,
    );
    let idx=this.findGamepadItemIndexById(_id);
    if(idx>-1){this.items[idx].isConnected=false;this.releaseItem(idx);}
  }
  axeValueToJoystickValue(_itemIndex, _axis, _value){
    if(_itemIndex<0||_itemIndex>=this.items.length) return Gamepad.JOYSTICK_ERROR;
    if(!this.items[_itemIndex].isConnected||_axis<0||_axis>=this.items[_itemIndex].axes.length) return Gamepad.JOYSTICK_ERROR;
    if(_axis<0) return Gamepad.JOYSTICK_ERROR;
    if(_axis>=this.items[_itemIndex].axes.mapping.length) return Gamepad.JOYSTICK_UNMAPPED;
    if(_value>0.5){_value=1;}else{if(_value<-0.5){_value=-1;}else{_value=0;}}
    let m=this.items[_itemIndex].axes.mapping[_axis];
    for(let i=0;i<m.length;i++) if(_value===m[i].value) return m[i].direction;
    return Gamepad.JOYSTICK_UNMAPPED;
  }
  findGamepadItemIndexById(_id){
    for(let i=0;i<this.items.length;i++) if(this.items[i].id===_id) return i;
    return -1;
  }
}
								

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

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

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

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

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

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

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

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

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

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/60.);
								

									magnets.js
									class Magnet{
  constructor(_p,_image,_layer,_normScaleFactor){
    this.p=_p; this.image=_image;
    this.selectionData={
      touchId:-1,
      isSelected:false,isPressed:false,isDragged:false,
      isRotating:false,isPulsing:false,
      baseNormPosX:-1.0,baseNormPosY:-1.0,
      normDragOffsetX:0.0,normDragOffsetY:0.0,
      minPixDistToStartDrag:6
    };
    this.shapeChanged    = true;
    this.layer           = _layer;
    this.normPosX = 0.5; this.normPosY = 0.5;
    this.normScaleFactor = _normScaleFactor;
    this.rotationFactor  = Math.random()*3.14;
    this.rotationDir     = 0;
    this.pRotationDir    = (Math.random()>0.5)*2-1;
    this.pulseFactorX    = 0.0;
    this.pulseFactorY    = 0.0;
    this.canvas=this.p.createGraphics(this.p.width,this.p.height);
    this.canvas.imageMode(this.p.CENTER);
    //this.canvas.pixelDensity(displayDensity());
  }
  getAttachedTouchId(){
    if(this.isPressed) return this.selectionData.touchId; return -1;
  }
  calcPanPos(){
    let tempNormW = this.getSmallerDimention() * this.normScaleFactor;
    let tempNormH = this.getSmallerDimention() * this.normScaleFactor * (this.image.height / this.image.width);
    tempNormW/=this.p.width;tempNormH/=this.p.height;
    let panx=this.rescale(this.normPosX,tempNormW/2,1.0-tempNormW/2,-1.0,1.0);
    let pany=this.rescale(this.normPosY,tempNormH/2,1.0-tempNormH/2,-1.0,1.0);
    if(panx<-1.0) panx=-1.0; else if(panx>1.0) panx=1.0;
    if(pany<-1.0) pany=-1.0; else if(pany>1.0) pany=1.0;
    return {x:panx,y:pany};
  }
  setNormPos(_normPosX,_normPosY){
    if(_normPosX<0.0) _normPosX=0.0; if(_normPosY<0.0) _normPosY=0.0;
    if(_normPosX>1.0) _normPosX=1.0; if(_normPosY>1.0) _normPosY=1.0;
    this.normPosX=_normPosX;this.normPosY=_normPosY;this.shapeChanged=true;
  }
  press(_x,_y,_touchId){
    if(this.selectionData.isPressed) return;
    if(this.selectionData.isSelected){
      if(this.rotationDir===0){
        if(this.pRotationDir===1) this.rotationDir=-1; else this.rotationDir=1;
        this.pRotationDir=0;
      }else{
        this.pRotationDir=this.rotationDir; this.rotationDir=0; 
      }
    }
    this.selectionData.isPressed=true; this.selectionData.touchId=_touchId;
    this.selectionData.isSelected=true; this.selectionData.isPulsing=true; this.selectionData.isRotating=true;
    this.selectionData.baseNormPosX=_x/this.p.width;
    this.selectionData.baseNormPosY=_y/this.p.height;
    this.selectionData.normDragOffsetX=-(this.selectionData.baseNormPosX-this.normPosX);
    this.selectionData.normDragOffsetY=-(this.selectionData.baseNormPosY-this.normPosY);
  }
  release(_x,_y,_touchId){
    this.selectionData.isDragged=false; this.selectionData.isPressed=false;this.selectionData.touchId=-1;//this.selectionData.isPulsing=false;
  }
  drag(_x,_y,_touchId){
    let newNormPosX=_x/this.p.width+this.selectionData.normDragOffsetX;
    let newNormPosY=_y/this.p.height+this.selectionData.normDragOffsetY;
    let dx=Math.abs(newNormPosX-this.normPosX)*this.p.width;
    let dy=Math.abs(newNormPosY-this.normPosY)*this.p.height;
    if((dx<this.selectionData.minPixDistToStartDrag)&&(dy<this.selectionData.minPixDistToStartDrag)&&(!this.selectionData.isDragged)) return;
    if(_touchId!==this.selectionData.touchId) return; // maybe to much of safety
    if(!this.selectionData.isDragged){
      this.selectionData.isRotating=false;
      this.selectionData.isDragged=true;
    }
    this.setNormPos(
      this.normPosX=_x/this.p.width+this.selectionData.normDragOffsetX,
      this.normPosY=_y/this.p.height+this.selectionData.normDragOffsetY
    );
  }
  reinit(){this.deselect();this.resizeCanvas(this.p.width,this.p.height);}
  deselect(){
    this.selectionData.isDragged=false;
    this.selectionData.touchId=-1;
    this.selectionData.isRotating=false;
    this.selectionData.isPulsing=false;
    this.selectionData.isPressed=false;
    this.selectionData.isSelected=false;
    this.shapeChanged=true;
  }
  resizeCanvas(_w,_h){
    this.resizeGraphicsWorkaround(this.canvas,_w,_h);
    this.shapeChanged=true; this.canvas.imageMode(this.p.CENTER);
    //this.canvas.pixelDensity(displayDensity());
    //this.draw();
  }
  draw(_tint){
    if(_tint<255) this.p.tint(255,_tint);
    this.p.image(this.canvas,0,0);
    this.p.noTint();
  }
  redrawCanvas(){this._redrawCanvas();this.selectionData.lastRedrawTimetag=this.p.millis();}
  _redrawCanvas(){
    if(this.selectionData.isPulsing||this.selectionData.isRotating) this.shapeChanged=true;
    if(!this.shapeChanged) return;
    if(this.selectionData.isRotating){
      this.rotationFactor=this.rotationFactor+this.rotationDir*0.001*(this.p.millis()-this.selectionData.lastRedrawTimetag);
    }
    this.canvas.clear();
    let temp_x = this.normPosX * this.canvas.width; let temp_y = this.normPosY * this.canvas.height;
    let temp_w = this.getSmallerDimention() * this.normScaleFactor;
    let temp_h = this.getSmallerDimention() * this.normScaleFactor * (this.image.height / this.image.width);
    if(this.selectionData.isPulsing){
      this.pulseFactorX = Math.sin(this.p.millis() * 0.016) * this.getSmallerDimention() * 0.01 * this.p.displayDensity();
      this.pulseFactorY = this.pulseFactorX * (this.image.height / this.image.width);
    }
    temp_w += this.pulseFactorX; temp_h += this.pulseFactorY;
    this.canvas.push();
      this.canvas.translate(temp_x, temp_y);
      this.canvas.rotate(this.rotationFactor);
      this.canvas.image(this.image, 0,0,temp_w,temp_h);
    this.canvas.pop();
    this.shapeChanged=false;
  }
  getSmallerDimention(){
    if(this.canvas.width < this.canvas.height) return this.canvas.width;
    return this.canvas.height;
  }
  getBiggerDimention(){
    if(this.canvas.width > this.canvas.height) return this.canvas.width;
    return this.canvas.height;
  }
  hitTestCanvas(_x,_y){
    if(!this.canvas) return false; if(!this.canvas.pixels) return false; if(this.canvas.pixels.length<1) return false;
    if((_x<0)||(_y<0)||(_x>=this.canvas.width)||(_y>=this.canvas.height)) false;
    return (this.p.brightness(this.canvas.get(_x,_y))>0);
  }
  rescale(_v,_vmin,_vmax,_scaledmin,_scaledmax){
    let n=(_v-_vmin)/(_vmax-_vmin);
    return (_scaledmin+(_scaledmax-_scaledmin)*n);
  }
  resizeGraphicsWorkaround(_g,_w,_h){
    if(_w<1||_h<1) console.log("[Magnet, resizeGraphicsWorkaround] bad dimention (w, h): "+_w+" "+_h);
    if(_g===null||_g===undefined){
      _g = this.p.createGraphics(_w, _h); // _g = this.__sketch.createGraphics(_w, _h);
      //_g.pixelDensity(1);
    }else{
      _g.width = _w;
      _g.height = _h;
      _g.elt.width = _w;// * this._pInst._pixelDensity;
      _g.elt.height = _h;// * this._pInst._pixelDensity;
      _g.elt.style.width = _w + 'px';
      _g.elt.style.height = _h + 'px';
      _g.pixelDensity(1);
      _g.loadPixels(); // console.log(_g.width);
      _g.elt.setAttribute('style', 'display: none');
    }
    _g.updatePixels();
    _g.background(0);
    _g.loadPixels();
    if(_w * _h !== _g.pixels.length / 4) {
      console.log(
        '[Magnet, resizeGraphicsWorkaround] _w * _h !== _g.pixels.length / 4:' +
        '\n_w = ' + _w + ' _h = ' + _h +
        '\n_g.width = ' + _g.width + ' _g.height = ' + _g.height +
        '\n_w * _h = ' + (_w * _h) +
        '\n_g.pixels.length / 4 = ' + (_g.pixels.length / 4)
      );
    }
  }
}

class Magnets{
  constructor(_p, _data){this.p=_p; this.items=_data.items;this.tint=255;}
  preload(){for(let i=0;i<this.items.length;i++) this.items[i].img=this.p.loadImage(this.items[i].fileName);}
  init(){for(let i=0;i<this.items.length;i++) this.items[i].magnet = new Magnet(this.p,this.items[i].img,i,this.items[i].normscale);}
  reinit(){for(let i=0;i<this.items.length;i++) this.items[i].magnet.reinit();}
  touchStarted(_x,_y,_touchId){
    //let mIdx = this.getMagnetIndexByTouchId(_touchId);
    let ht = this.hitTest(_x,_y);
    if(ht>-1){
      this.items[ht].magnet.press(_x,_y,_touchId);
      let order=this.getMagnetIndicesOrderedByLayer();
      this.items[ht].magnet.layer=this.items[order[order.length-1]].magnet.layer+1;
    }else{
      for(let i=0;i<this.items.length;i++) this.items[i].magnet.deselect();
    }
  }
  touchMoved(_x,_y,_touchId){
    let idx = this.getMagnetIndexByTouchId(_touchId);
    if(idx>=0){this.items[idx].magnet.drag(_x,_y,_touchId);return;}
  }
  touchReleased(_x,_y,_touchId){
    let idx=this.getMagnetIndexByTouchId(_touchId);
    if(idx>=0) this.items[idx].magnet.release(_x,_y,_touchId);
  }
  update(){}
  draw(){this.drawLayeredMagnets();}
  getMagnetIndexByTouchId(_touchId){
    for(let i=0;i<this.items.length;i++) if(this.items[i].magnet.selectionData.touchId===_touchId) return i;
    return -1;
  }
  getMagnetIndicesOrderedByLayer(){
    let result=[]; for(let i=0;i<this.items.length;i++) result[i]=i;
    let b=true; let swap=0;
    while(b){
      b=false;
      for(let i=1;i<this.items.length;i++){
        if(this.items[result[i-1]].magnet.layer>this.items[result[i]].magnet.layer){
          swap=result[i-1]; result[i-1]=result[i]; result[i]=swap;
          b=true; break;
        }
      }
    }
    return result;
  }
  drawLayeredMagnets(){
    let order=this.getMagnetIndicesOrderedByLayer();
    for(let i=0;i<order.length;i++){
      this.items[order[i]].magnet.redrawCanvas();
      this.items[order[i]].magnet.draw(this.tint);
    }
  }
  hitTest(_x,_y){
    let order=this.getMagnetIndicesOrderedByLayer();
    for(let i=order.length-1;i>=0;i--){
      this.items[order[i]].magnet.canvas.loadPixels();
      if(this.items[order[i]].magnet.hitTestCanvas(_x,_y)) return order[i];
    }
    return -1;
  }
}
								

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

									pinch.js
									class Pinch{
  static get STATUS_NEW(){return 1;}
  static get STATUS_CONTINUED(){return 2;}
  static get STATUS_FINISHED(){return 3;}
  constructor(_p,_uniqueid,_startnormx,_startnormy,_startnormz,_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.leftrightindex=_leftrightindex; // 0 left 1 right
    this.creationTimetag=this.p.millis(); this.status=Pinch.STATUS_NEW;
  }
  getStatusAsString(){
    let result="";
    switch(this.status){
      case Pinch.STATUS_NEW: result="new"; break;
      case Pinch.STATUS_CONTINUED: result="continued"; break;
      case Pinch.STATUS_FINISHED: result="finished"; break;
      default: console.log("[Pinch, getStatusAsString] uhandled this.status: "+this.status);
    }
    return result;
  }
}
class Pinches{
  //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.uniquePinchId=-1;
    this.roi={normx:0.0,normy:0.0,normw:1.0,normh:1.0};
    this.gestureStructure={
      relationToHandSize:0.4,
      handSizeCalc:[
        Pinches.MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_FINGER_MCP,
        Pinches.MEDIAPIPE_HANDMODEL_LANDMARK_PINKY_FINGER_MCP
      ],
      gestureCalc:[
        Pinches.MEDIAPIPE_HANDMODEL_LANDMARK_THUMB_TIP,
        Pinches.MEDIAPIPE_HANDMODEL_LANDMARK_INDEX_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 newPinches=this.findPinches(_hands,_handednesses,false);
    for(let i=newPinches.length-1;i>=0;i--){
      if(
        (newPinches[i].normx<this.roi.normx)||
        (newPinches[i].normy<this.roi.normy)||
        (newPinches[i].normx>(this.roi.normx+this.roi.normw))||
        (newPinches[i].normy>(this.roi.normy+this.roi.normh))
      ) newPinches.splice(i,1);
    }
    if(newPinches.length===0){this.flush();return;}
    if(this.items.length===0){
      for(let i=0;i<newPinches.length;i++){this.items[this.items.length]=newPinches[i];this.messages[this.messages.length]=newPinches[i];}
      return;
    }
    for(let i=0;i<newPinches.length;i++){
      let idx=this.findItemClosestToPinch(newPinches[i],true,[],0.2);
      if(idx>-1) newPinches[i].uniqueid=this.items[idx].uniqueid;
    }
    this.removeMultipliedReferencesToItemsFromPinches(newPinches);
    for(let i=this.items.length-1;i>=0;i--){
      let pinchIdx=this.findPinchIndexByUniqueId(newPinches,this.items[i].uniqueid);
      if(pinchIdx>-1){
        this.items[i].normx=newPinches[pinchIdx].normx;this.items[i].normy=newPinches[pinchIdx].normy;this.items[i].normz=newPinches[pinchIdx].normz;
        this.items[i].status=Pinch.STATUS_CONTINUED;
        this.messages[this.messages.length]=this.items[i];
        newPinches.splice(pinchIdx,1);
      }else{
        this.items[i].status=Pinch.STATUS_FINISHED;
        this.messages[this.messages.length]=this.items[i];
        this.items.splice(i,1);
      }
    }
    for(let i=0;i<newPinches.length;i++){
      this.items[this.items.length]=newPinches[i];this.messages[this.messages.length]=newPinches[i];
    }
  }
  setRoiWithNormCoords(_normx,_normy,_normw,_normh){this.roi.normx=_normx;this.roi.normy=_normy;this.roi.normw=_normw;this.roi.normh=_normh;}
  findPinchIndexByUniqueId(_pinchesArray,_uniqueId){for(let i=0;i<_pinchesArray.length;i++) if(_uniqueId===_pinchesArray[i].uniqueid) return i; return -1;}
  _removeMultipliedReferencesToItemsFromPinches(_pinchArray){
    for(let i=0;i<_pinchArray.length;i++){
      for(let j=0;j<_pinchArray.length;j++){
        if(i===j) continue;
        if(_pinchArray[i].uniqueid===_pinchArray[j].uniqueid){
          let itemIndex=this.findPinchIndexByUniqueId(this.items,_pinchArray[i].uniqueid);
          let di=this.p.dist(_pinchArray[i].normx,_pinchArray[i].normy,_pinchArray[i].normz,this.items[itemIndex].normx,this.items[itemIndex].normy,this.items[itemIndex].normz);
          let dj=this.p.dist(_pinchArray[j].normx,_pinchArray[j].normy,_pinchArray[j].normz,this.items[itemIndex].normx,this.items[itemIndex].normy,this.items[itemIndex].normz);
          if(di<dj) _pinchArray[j].uniqueid=this.getUniquePinchId(); else _pinchArray[i].uniqueid=this.getUniquePinchId();
          return true;  
        }
      }
    }
    return false;
  }
  removeMultipliedReferencesToItemsFromPinches(_pinchArray){let b=true; while(b){b=this._removeMultipliedReferencesToItemsFromPinches(_pinchArray);}}
  findItemClosestToPinch(_pinchObject,_checkLeftRightIndex,_excludedItemIndicesArray,_maxDist){
    let resultIndexOfItem=-1; let normdist=100000.0;
    for(let i=0;i<this.items.length;i++){
      if(_checkLeftRightIndex&&(_pinchObject.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(_pinchObject.normx,_pinchObject.normy,_pinchObject.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;
  }
  findPinchClosestToItem(_pinchArray,_itemIndex,_checkLeftRightIndex,_excludedNewPinchesIndicesArray,_maxDist){
    let resultIndexOfPinch=-1; let normdist=100000.0;
    for(let i=0;i<_pinchArray.length;i++){
      if(_checkLeftRightIndex&&(this.items[_itemIndex].leftrightindex!==_pinchArray[i].leftrightindex)) continue;
      let b=false; if(_excludedNewPinchesIndicesArray){for(let j=0;j<_excludedNewPinchesIndicesArray;j++) if(_excludedNewPinchesIndicesArray[j]===i){b=true;break;}} if(b) continue;
      let d=this.p.dist(_pinchArray[i].normx,_pinchArray[i].normy,_pinchArray[i].normz,this.items[_itemIndex].normx,this.items[_itemIndex].normy,this.items[_itemIndex].normz);
      if(d>_maxDist) continue;
      if(d<normdist){resultIndexOfPinch=i;normdist=d;}
    }
    return resultIndexOfPinch;
  }
  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;
  }
  findPinches(_hands,_handednesses,_3d){
    let result=[]; let handSize=0.0; let fingersDist=0.0;
    for(let i=0;i<_hands.length;i++){
      if(_hands[i].length!==21) continue; // it should be 21-landmark-based mediapipe format
      handSize=this.calcNormDistBetweenLandmarks(_hands[i],this.gestureStructure.handSizeCalc[0],this.gestureStructure.handSizeCalc[1],_3d);
      fingersDist=this.calcNormDistBetweenLandmarks(_hands[i],this.gestureStructure.gestureCalc[0],this.gestureStructure.gestureCalc[1],_3d);
      if(fingersDist<this.gestureStructure.relationToHandSize*handSize){
        result[result.length] = new Pinch(
          this.p,
          this.getUniquePinchId(),
          this.p.lerp(_hands[i][4].x,_hands[i][8].x,0.5),
          this.p.lerp(_hands[i][4].y,_hands[i][8].y,0.5),
          this.p.lerp(_hands[i][4].z,_hands[i][8].z,0.5),
          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("[Pinches, huskHandednessIndex] problematic input data: "+_handedness);
    return result;
  }
  getUniquePinchId(){this.uniquePinchId+=1; return this.uniquePinchId;};
  flush(){
    for(let i=0;i<this.items.length;i++){
      this.items[i].status=Pinch.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 Pinch.STATUS_NEW: _g.fill(255,0,0); break;
        case Pinch.STATUS_CONTINUED: _g.fill(0,255,0); break;
        case Pinch.STATUS_FINISHED: _g.fill(0,0,255); break;
        default: console.log("[Pinches, 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
      );
    }
  }
}
								

									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,_magnets){
    this.p=_p; this.magnets=_magnets; this.mainVolOffset=-5;
    this.audioEnabled=false; this.voices=[]; this.sonification=[];
  }
  init(){
    if(!this.audioEnabled){this.initSonification(); this.initVoices(); Tone.start(); this.audioEnabled=true; console.log("[Synth, init] audio enabled: "+Tone);}
  }
  initSonification(){
    for(let i=0;i<this.magnets.items.length;i++){
      this.sonification[i]={
        isSelected:false, isSelectedChanged:false, isSelectedHandled:true, isSelectedChangedTimetag:0, isSelectedChangedFrameCount:0, isSelectedHadledTimetag:0, isSelectedHandledFrameCount:0,
        isRotating:false, isRotatingChanged:false, isRotatingHandled:true, isRotatingChangedTimetag:0, isRotatingChangedFrameCount:0, isRotatingHadledTimetag:0, isRotatingHadledFrameCount:0,
        pos:{x:this.magnets.items[i].magnet.normPosX,y:this.magnets.items[i].magnet.normPosY}, posChanged:false, posHandled:true, posChangedTimetag:0, posChangedFrameCount:0, posHandledTimetag:0, posHandledFrameCount:0
      };
    }//console.log("[Synth, initSonification] num of voices: "+this.magnets.items.length);
  }
  initVoices=function(){
    for(let i=0;i<this.magnets.items.length;i++){
      this.voices[i]={
        vibrato:(new Tone.Vibrato(5, 0.07)),
        panner:(new Tone.Panner(1).toDestination()),
        osc:(new Tone.Oscillator(this.mtof(48+4*i), "triangle"))
      };
      this.voices[i].osc.connect(this.voices[i].vibrato);
      this.voices[i].vibrato.connect(this.voices[i].panner);
      this.voices[i].panner.pan.rampTo(this.magnets.items[i].magnet.calcPanPos().x, 0.01);
      this.voices[i].osc.volume.rampTo(-Infinity,0.0);
      this.voices[i].osc.start();
    }//console.log("[Synth, initVoices] num of voices: "+this.magnets.items.length);
  }
  update=function(){
    this.updateSonification();
    if(!this.audioEnabled) return;
    for(let i=0;i<this.sonification.length;i++){
      let pp=this.magnets.items[i].magnet.calcPanPos();
      if(!this.sonification[i].isSelectedHandled||!this.sonification[i].isRotatingHandled){
        if(this.sonification[i].isSelected){
          if(this.sonification[i].isRotating){
            this.voices[i].osc.volume.rampTo(-3+this.mainVolOffset,0.3);
            this.voices[i].vibrato.depth.rampTo(0.3,0.5);
            this.voices[i].vibrato.frequency.rampTo(3+11*(1.0-pp.y),0.5);
          }else{
            this.voices[i].osc.volume.rampTo(-6+this.mainVolOffset,0.3);
            this.voices[i].vibrato.depth.rampTo(0.1,0.5);
            this.voices[i].vibrato.frequency.rampTo(3+8*(1.0-pp.y),0.5);
          }
        }else{
          this.voices[i].osc.volume.rampTo(-Infinity,4.0);
          this.voices[i].vibrato.depth.rampTo(0.07,0.5);
          this.voices[i].vibrato.frequency.rampTo(5+11*(1.0-pp.y),0.5);
        }
      }
      //if(!this.sonification[i].isSelectedHandled){}
      //if(!this.sonification[i].isRotatingHandled){}
      if(!this.sonification[i].posHandled){
        this.voices[i].panner.pan.rampTo(pp.x, 0.04);
      }
    }
  }
  markAllSonificationItemsAsHandled=function(){
    for(let i=0;i<this.sonification.length;i++){
      if(!this.sonification[i].isSelectedHandled){
        this.sonification[i].isSelectedHandled=true;
        this.sonification[i].isSelectedHadledTimetag=this.p.millis();
        this.sonification[i].isSelectedHandledFrameCount=this.p.frameCount;
      }
      if(!this.sonification[i].isRotatingHandled){
        this.sonification[i].isRotatingHandled=true;
        this.sonification[i].isRotatingHadledTimetag=this.p.millis();
        this.sonification[i].isRotatingHandledFrameCount=this.p.frameCount;
      }
      if(!this.sonification[i].posHandled){
        this.sonification[i].posHandled=true;
        this.sonification[i].posHadledTimetag=this.p.millis();
        this.sonification[i].posHandledFrameCount=this.p.frameCount;
      }
    }
  }
  updateSonification=function(){
    for(let i=0;i<this.sonification.length;i++){
      let s=this.sonification[i]; let m=this.magnets.items[i].magnet; let sd=m.selectionData;
      if((sd.isRotating&&(m.rotationDir!==0))!==s.isRotating){
        s.isRotating=(sd.isRotating&&(m.rotationDir!==0));s.isRotatingChanged=true;
        s.isRotatingChangedTimetag=this.p.millis();s.isRotatingChangedFrameCount=this.p.frameCount;
        s.isRotatingHandled=false;
      }
      if(sd.isSelected!==s.isSelected){
        s.isSelected=sd.isSelected;s.isSelectedChanged=true;
        s.isSelectedChangedTimetag=this.p.millis();s.isSelectedChangedFrameCount=this.p.frameCount;
        s.isSelectedHandled=false;
      }
      if((m.normPosX!==s.x)||(m.normPosY!==s.y)){
        s.x=m.normPosX;s.y=m.normPosY;s.posChanged=true;
        s.posChangedTimetag=this.p.millis();s.posChangedFrameCount=this.p.frameCount;
        s.posHandled=false;
      }
    }
  }
  mtof(_m){return (440.0*Math.pow(2.0,(_m-69.0)/12.0));};
}
								

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

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

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