Empator

czy jesteś człowiekiem?
Podgląd: domyślna kamera Podgląd: tylna kamera
Parametry
cnf		"poczucie pewności" modelu wykrywającego ekspresję emocjonalną
gui		chowa / pokazuje panel z interfejsem graficznym
inv		przełączanie pomiędzy poszukiwaniem analogicznych lub przeciwstawnych ekspresji emocjonalnych obu analizowanych twarzy
lang		ustawia język interfejsu
mirror		lustrzane odbicie obrazu z kamery
pointer		chowa / pokazuje kursor myszy
sel		selektywość modelu wykrywającego ekspresję emocjonalną
synth		wyłącza/włącza wewnętrzny generator dźwięku
vol		ustala inicjalny poziom głośności instrumentu (globalny suwak "vol")
Opis
„Empator” to bazujący na prostej AI detektor ekspresji emocjonalnej malującej się na twarzach osób wykrytych w monitorowanym przez kamerę polu. „Empator” wyłuskuje z obrazu dwie twarze (i zasadniczo wymaga obecności przynajmniej dwóch osób w polu widzenia kamery, z której korzysta) i analizuje mimikę pod kątem obecności kombinacji 7 stanów emocjonalnych: spokoju (stan „neutralny”), radości, strachu, zdziwienia, wstrętu, gniewu, smutku; potrafi też wydobyć z danych przekazanych przez AI i wzmocnić informację o składnikach emocjonalnych innych niż dominujące.
Miniatura analizuje zgodność stanów emocjonalnych twarzy obu osób wytwarzając tkankę dźwiękową na bazie zbieżnych stanów emocjonalnych (można też „Empator” przełączyć w tryb, który amplifikuje różnice pomiędzy poszczególnymi składnikami emocjonalnymi) oraz wizuje „nimb”, czy też „aurę” obu twarzy (podobne stany emocjonalne to podobne „niby”). Praca radzi sobie równie dobrze z twarzami żywych osób, jak i umieszczonymi przed kamerą zdjęciami, można więc porównać własną ekspresję emocjonalną z ekspresją innej osoby (pozostającej obok nas przed kamerą lub z czyimś wizerunkiem), można więc wykorzystać tę Miniaturę na różne sposoby.
Jedną z istotnych inspiracji do stworzenia pracy (tak „Empator”, jak i „MianX”) było wymyślone na potrzeby fabuły książki „Do Androids Dream of Electric Sheep?” (Philip K. Dick, 1968) i kręconego na jej podstawie filmu „Blade Runner” (Ridley Scott, 1982) urządzenie przeprowadzające na niektórych książkowych i filmowych pro- i antagonistach tzw. „test Voita-Kampfa” — hipotetyczną procedurę badającą zdolność do empatii, która pozwala odróżnić ludzi od androidów.
Dokumentacja techniczna
Parametry przekazywane przez adres URL

cnf 0.0 … 1.0; „poczucie pewności” modelu wykrywającego ekspresję emocjonalną
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)
gui 0 lub 1; domyślnie 1; chowa/pokazuje panel z interfejsem graficznym
h pionowa rozdzielczość kamery
inv 0 lub 1 (domyślnie 0); przełączanie pomiędzy poszukiwaniem analogicznych lub przeciwstawnych ekspresji emocjonalnych obu analizowanych twarzy
lang en lub pl; domyślnie en; ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
mirror 0 lub 1; domyślnie 1; wyłącza/włącza lustrzane odbicie obrazu z urządzenia przechwytującego (zwykle kamery)
pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
sel 0.0 … 1.0; selektywość modelu wykrywającego ekspresję emocjonalną
synth 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny generator dźwięku
tuning sekwencja 14 oddzielonnych przecinkami liczb z zakresu 0 … 127 reprezentujących nuty MIDI przyporządkowane składnikom emocjonalnym obu porównywanych twarzy, pierwsze 7 liczb określa wartości dla pierwszej twarzy, kolejne 7 dla drugiej, kolejność emocji to: „spokój”,”szczęście”,”gniew”,”smutek”,”wstręt”,”zaskoczenie”,”strach”
vol 0.0 … 1.0; ustala inicjalny poziom głośności instrumentu (globalny suwak „vol”)
w pozioma rozdzielczość kamery
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
empator data „spokój” pierwszej twarzy (znormalizowana wartość), „szczęście” pierwszej twarzy (znormalizowana wartość), „gniew” pierwszej twarzy (znormalizowana wartość), „smutek” pierwszej twarzy (znormalizowana wartość), „wstręt” pierwszej twarzy (znormalizowana wartość), „zaskoczenie” pierwszej twarzy (znormalizowana wartość), „strach” pierwszej twarzy (znormalizowana wartość) „spokój” drugiej twarzy (znormalizowana wartość), „szczęście” drugiej twarzy (znormalizowana wartość), „gniew” drugiej twarzy (znormalizowana wartość), „smutek” drugiej twarzy (znormalizowana wartość), „wstręt” drugiej twarzy (znormalizowana wartość), „zaskoczenie” drugiej twarzy (znormalizowana wartość), „strach” drugiej twarzy (znormalizowana wartość) „spokój” (znormalizowana różnica lub zgodność pomiędzy analizowanymi twarzami), „szczęście” (znormalizowana różnica lub zgodność pomiędzy analizowanymi twarzami), „gniew” (znormalizowana różnica lub zgodność pomiędzy analizowanymi twarzami), „smutek” (znormalizowana różnica lub zgodność pomiędzy analizowanymi twarzami), „wstręt” (znormalizowana różnica lub zgodność pomiędzy analizowanymi twarzami), „zaskoczenie” (znormalizowana różnica lub zgodność pomiędzy analizowanymi twarzami), „strach” (znormalizowana różnica lub zgodność pomiędzy analizowanymi twarzami)
empator face parametry twarzy: index, znormalizowane położenie w poziomie, znormalizowane położenie w pionie, znormalizowana szerokość, znormalizowana wysokość, „spokój” (znormalizowana wartość), „szczęście” (znormalizowana wartość), „gniew” (znormalizowana wartość), „smutek” (znormalizowana wartość), „wstręt” (znormalizowana wartość), „zaskoczenie” (znormalizowana wartość), „strach” (znormalizowana wartość)
empator faces raportuje ilość rozpoznanych twarzy
MIDI

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

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
nie dotyczy
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="Empator">
  <meta name="keywords" content="computer vision, music, audio, sound, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <style>body {padding:0;margin:0;}</style>
  <title>Empator, Pawel Janicki, 2026, https://paweljanicki.jp</title>
  <script src="https://unpkg.com/tone"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
  <script src="synth.js"></script>
  <script src="midi.js"></script>
  <script src="gui.js"></script>
  <script src="ws.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js"></script>
  <script src="sketch.js"></script>

</head>

<body>
</body>

</html>
								

									sketch.js
									/*
https://editor.p5js.org/racheljquach/sketches/R4R4oDoNt
https://editor.p5js.org/mjsharif/sketches/p9GMLnA38
*/

const FACEAPI_STATUS_ALLOCATED = 1; const FACEAPI_STATUS_IDLE = 2; const FACEAPI_STATUS_BUSY = 3;
let cv={
    isActive:true,
    handleToCanvas:null,
    capture:{processor:null, w:640, h:480, flip:true},
    coords:{x:-1,y:-1,w:-1,h:-1},
    faceApiOptions:{withLandmarks:true,withExpressions:true,withDescriptors:true,minConfidence:0.5},
    faceApi:null,faceApiDetections:[],
    faceApiStatus:FACEAPI_STATUS_ALLOCATED,faceApiDetectionTimetag:0,
    expressions:{
      en:["neutral","happy","angry","sad","disgusted","surprised","fearful"],
      pl:["spokój","szczęście","gniew","smutek","wstręt","zaskoczenie","strach"]
    },
    normEmoSelectiveness:0.2,
    txtGfx:null
};
let theme={bgColor:{r:0,g:0,b:0},pointer:true,speakerIcon:null};
let midi={
  isActive:false,
  processor:(new Midi()),outputPortIndex:-1,inputPortIndex:-1,
  channels:{in:-1,out:2},clock:{},ccmap:{in:{},out:{}}
  //memory:[],
  //min:36,max:72
};
let synth = new Synth(this);
let useWorker=false;
let guiContainer={
  urlParamsProxy:{
    vol:0.63, //alpha:255,
    sliders:[50,52,55,57,59,62,64,62,64,67,69,71,74,76],
    selectiveness:0.5
  },
  isGuiAlwaysOff:false,
  gui:null, isActive:true, lock:-1, lang:'en',
  handlers:{
    toSelectivenessSlider:{id:-1,label:{en:'selectiveness',pl:'selektywność'}},
    toVolSlider:{id:-1,label:{en:'vol',pl:'głośność'}},
    toInvertCorrToggle:{id:-1,label:{en:'invert emotional relation',pl:'odwróć relację emocjonalną'}}
  },
  getLabelByLang(_handler){
    let result='unhandled';
    switch(this.lang){
      case 'en': result=_handler.label.en; break;
      case 'pl': result=_handler.label.pl; break;
      default: console.log('[guiContainer, getLabelByLang] unhandled this.lang: '+this.lang);
    }
    return result;
  }
};
let webSocket={
  isActive:false,monitorInput:false,processor:(new WS()),address:"ws://localhost:9001/",receivedMessages:[],
};
function setBackground(_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 + ')';};
function preload(){theme.speakerIcon=loadImage("speaker-svgrepo-com.svg");};
function setup(){
  handleUrlParams();
  cv.handleToCanvas=createCanvas(10,10,WEBGL);cv.handleToCanvas.id("canvas");
  cv.txtGfx=createGraphics(10,10,P2D);setTxtGfxFont();
  //for(let i=0;i<128;i++){midi.memory[i]=-1;midi.memory[i]=-1;}
  try{this._renderer.GL.disable(this._renderer.GL.DEPTH_TEST);console.log("[setup] depth test disabled");}catch(_err){console.log("[setup] disabling depth test error: "+_err);}
  initCV();initGui();initWebSocket();initMidi();
  transferUrlParamsProxyStorageToGui();
  guiContainer.gui.forceBroadcast(); if((!theme.pointer)&&(!guiContainer.isActive)) noCursor();
  if(guiContainer.isActive) guiContainer.gui.setBackgroundPanelVisibility(true);
  if(window.DeviceOrientationEvent){window.addEventListener("deviceorientation",onOrientationChange);}
  if(useWorker){
    noLoop();
    let intervalWorker = new Worker('worker.js');
    intervalWorker.onmessage = function(_e){handleWorker();}
    console.log("[setup] Worker set as clock source.");
  }else{frameRate(30);}
}
function handleWorker(){redraw();}
function draw(){
  if((width!=innerWidth)||height!=innerHeight){handleResize();}
  setBackground(this,theme.bgColor.r,theme.bgColor.g,theme.bgColor.b,true);
  drawCV();
  guiContainer.gui.draw();
  messaging(cv.faceApiDetections);
  updateCV();
  if(synth.isActive&&(!synth.audioEnabled))drawMutedIcon();
}
function faceReady(){
  cv.faceApiStatus=FACEAPI_STATUS_IDLE;
  console.log("[faceReady] face API status: "+cv.faceApiStatus);
}
function gotFaces(_error,_result){
  if(_error){console.log("[gotFaces] error: "+_error);return;}
  cv.faceApiDetections=_result;//cv.faceApi.detect(gotFaces);
  cv.faceApiDetectionTimetag=millis();cv.faceApiStatus=FACEAPI_STATUS_IDLE;
}
function captureSeemsToBeOk(){
  if(!cv.capture.processor){console.log("[captureSeemsToBeOk()] !cv.capture.processor"); return false};
  if(cv.capture.processor===null){console.log("[captureSeemsToBeOk()] cv.capture.processor===null"); return false};
  if(cv.capture.processor===undefined){console.log("[captureSeemsToBeOk()] cv.capture.processor===undefined"); return false};
  if(!cv.capture.processor.width){console.log("[captureSeemsToBeOk()] !cv.capture.processor.width"); return false};
  if(!cv.capture.processor.height){console.log("[captureSeemsToBeOk()] !cv.capture.processor.height"); return false};
  return true;
}
function drawMutedIcon(){
  let tf1=1.0+Math.sin(millis()*0.01)*0.2;
  let tf2=1.0+Math.sin(millis()*0.017)*0.1;
  let tf3=millis()*0.0001;
  let sz=width; if(width>height) sz=height;
  let scl=sz/theme.speakerIcon.width*0.4;
  push();
    translate(-0.5*width,-0.5*height);
    noStroke(); fill(128,128); rect(0,0,width,height);
    fill(30,70,255,128); circle(width*0.5,height*0.5,theme.speakerIcon.width*scl*1.1*tf2);
    image(
      theme.speakerIcon,
      width*0.5-theme.speakerIcon.width*scl*0.5*tf2,
      height*0.5-theme.speakerIcon.height*scl*0.5*tf2,
      theme.speakerIcon.width*scl*tf2,
      theme.speakerIcon.height*scl*tf2
    );
    noFill();stroke(255,0,0,128);strokeWeight(10);
    push();
      translate(width*0.5,height*0.5);rotate(tf3);
      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);
    pop();
  pop();
}
function touchStarted(_touchEvent){
  let changedTouches=huskChangedTouches(_touchEvent);
  for(let i=0;i<changedTouches.length;i++) unifiedTactileEventPressed(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
  return false;
}
function touchMoved(_touchEvent){
  let changedTouches=huskChangedTouches(_touchEvent);
  for(let i=0;i<changedTouches.length;i++) unifiedTactileEventDragged(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
  return false;
}
function touchEnded(_touchEvent){
  let changedTouches=huskChangedTouches(_touchEvent);
  for(let i=0;i<changedTouches.length;i++) unifiedTactileEventReleased(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
  return false;
}
function doubleClicked(){return false;};
function mouseClicked(){return false;};
function mouseMoved(){if(guiContainer.gui) guiContainer.gui.moveIdlePointer(mouseX,mouseY); return false;};
function mouseDragged(){unifiedTactileEventDragged(mouseX,mouseY,0); return false;};
function mousePressed(){unifiedTactileEventPressed(mouseX,mouseY,0); return false;};
function mouseReleased(){unifiedTactileEventReleased(mouseX,mouseY,0); return false;};
function mouseWheel(){return false;};
function onOrientationChange(){fullscreen(true);};
function handleResize(){
  resizeCanvas(innerWidth,innerHeight);
  resizeGraphicsWorkaround(cv.txtGfx,innerWidth,innerHeight,false);
  setTxtGfxFont();
  if(cv.isActive){
    let f=cv.capture.w/cv.capture.h;
    cv.coords.w=width; cv.coords.h=width/f;
    if(cv.coords.h<height){cv.coords.h=height; cv.coords.w=height*f;}
    cv.coords.x=0.5*(width-cv.coords.w);cv.coords.y=0.5*(height-cv.coords.h);
  }
}
function huskChangedTouches(_touchEvent){
  let result=[]; let ct=_touchEvent.changedTouches; let ctl=_touchEvent.changedTouches.length;
  for(let i=0;i<ctl;i++){let t=ct.item(i);result[result.length]={id:t.identifier,x:t.clientX,y:t.clientY};}
  return result;
}
function unifiedTactileEventDragged(_pixx,_pixy,_eventid){
  guiContainer.gui.dragPointer(_pixx,_pixy);
}
function unifiedTactileEventClicked(){
  if(synth.isActive&&(!synth.audioEnabled)){synth.init(guiContainer.urlParamsProxy.sliders);return;}
  if(!guiContainer.isGuiAlwaysOff){
    if(guiContainer.isActive){
      if(guiContainer.lock<0){
        if(guiContainer.gui.hitTestAllItems(mouseX,mouseY)<0){guiContainer.gui.disableAllItems();guiContainer.gui.setBackgroundPanelVisibility(false);guiContainer.isActive=false;}
      }
    }else{
      guiContainer.gui.enableAllItems(); guiContainer.gui.setBackgroundPanelVisibility(true); guiContainer.isActive=true;
    }
  }
}
function unifiedTactileEventPressed(_pixx,_pixy,_eventid){
  guiContainer.lock=guiContainer.gui.lockPointer(_pixx,_pixy);
}
function unifiedTactileEventReleased(_pixx,_pixy,_eventid){
  unifiedTactileEventClicked();
  guiContainer.gui.unlockPointer(_pixx,_pixy);
}
function initCV(){
  cv.capture.processor=createCapture(VIDEO,{flipped:cv.capture.flip});cv.capture.processor.id('video');
  cv.capture.processor.size(cv.capture.w,cv.capture.h);cv.capture.processor.hide();
  if(cv.isActive&&cv.capture.processor) cv.faceApi=ml5.faceApi(cv.capture.processor,cv.faceApiOptions,faceReady);
}
function transferUrlParamsProxyStorageToGui(){
  guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setValue(guiContainer.urlParamsProxy.vol);
}
function updateCV(){
  if(cv.isActive&&captureSeemsToBeOk()){
    if(cv.faceApiStatus===FACEAPI_STATUS_IDLE){
      cv.faceApiStatus=FACEAPI_STATUS_BUSY;
      cv.faceApi.detect(gotFaces);
    }
  }
}
function drawCV(){
  push();
    translate(-width*0.5,-height*0.5,0);
    image(cv.capture.processor,cv.coords.x,cv.coords.y,cv.coords.w,cv.coords.h);
    //filter(GRAY);
    //testDrawLandmarks(cv.faceApiDetections);
    //testDrawBoxes(cv.faceApiDetections);
    //testDrawExpression(cv.faceApiDetections);image(cv.txtGfx,0,0);
    markLandmarks(cv.faceApiDetections);
    markFaces(cv.faceApiDetections);
    cv.txtGfx.clear();markDetections(cv.faceApiDetections);image(cv.txtGfx,0,0);
  pop();
}
function setTxtGfxFont(){
  cv.txtGfx.pixelDensity(4);
  //cv.txtGfx.scale(1/4);
  cv.txtGfx.textAlign(CENTER,CENTER);
  cv.txtGfx.textFont("Helvetica",10);
  cv.txtGfx.textStyle(NORMAL);
}
function huskFaceNormCoords(_det){
  let{_x,_y,_width,_height}=_det.alignedRect._box;
  let result={
    normx:(_x/cv.capture.processor.width),
    normy:(_y/cv.capture.processor.height),
    normw:(_width/cv.capture.processor.width),
    normh:(_height/cv.capture.processor.height)
  };
  if(cv.capture.flip) result.normx=1.0-(result.normx+result.normw);
  return result;
}
function getExpressionNamesByLang(){
  switch(guiContainer.lang){
    case 'en': return cv.expressions.en;
    case 'pl': return cv.expressions.pl;
    default: console.log("[getExpressionNamesByLang] unhandled lang: "+guiContainer.lang);
  }
  return cv.expressions.en;
}
function huskExpressionsFromObject(_o){
  return [
    Math.pow(_o.neutral,cv.normEmoSelectiveness),
    Math.pow(_o.happy,cv.normEmoSelectiveness),
    Math.pow(_o.angry,cv.normEmoSelectiveness),
    Math.pow(_o.sad,cv.normEmoSelectiveness),
    Math.pow(_o.disgusted,cv.normEmoSelectiveness),
    Math.pow(_o.surprised,cv.normEmoSelectiveness),
    Math.pow(_o.fearful,cv.normEmoSelectiveness)
  ];
}
/*
function calcDetectionBox(_detection){
  let{_x,_y,_width,_height}=_detection.alignedRect._box;
  if(cv.capture.flip) _x=cv.capture.processor.width-(_x+_width);
  _x=cv.coords.x+_x/cv.capture.processor.width*cv.coords.w;
  _y=cv.coords.y+_y/cv.capture.processor.height*cv.coords.h;
  _width=_width/cv.capture.processor.width*cv.coords.w;
  _height=_height/cv.capture.processor.height*cv.coords.h;
  return {x:_x,y:_y,w:_width,h:_height};
}
*/
function calcExpressionsNormCorrelation(_expA,_expB){
  let result=[];
  for(let i=0;i<7;i++) result[i]=1.0-Math.abs(_expA[i]-_expB[i]);
  return result;
}
function getDetRect(_det){
  let{_x,_y,_width,_height}=_det.alignedRect._box;
  return {x:_x,y:_y,w:_width,h:_height};
}
function checkIfFirstFaceIsOnTheLeft(_detA,_detB){
  let ra=getDetRect(_detA); let rb=getDetRect(_detB);
  let result=(ra.x<rb.x); if(cv.capture.flip) result=!result;
  return result;
}
function markDetections(_detections){
  if(_detections.length<2) return;
  let tempExp0, tempExp1;
  if(checkIfFirstFaceIsOnTheLeft(_detections[0],_detections[1])){
    tempExp0=huskExpressionsFromObject(_detections[0].expressions);
    tempExp1=huskExpressionsFromObject(_detections[1].expressions);
  }else{
    tempExp0=huskExpressionsFromObject(_detections[1].expressions);
    tempExp1=huskExpressionsFromObject(_detections[0].expressions);
  }
  let corr=calcExpressionsNormCorrelation(tempExp0,tempExp1); let tempExpNames=getExpressionNamesByLang();
  let rct={x:0,y:0,w:(cv.txtGfx.width*0.5),h:0,segh:20};
  rct.x=(cv.txtGfx.width-rct.w)*0.5;
  rct.h=rct.segh*7;
  rct.y=cv.txtGfx.height-rct.h;
  for(let i=0;i<7;i++){
    cv.txtGfx.noStroke();cv.txtGfx.fill(0,128);
    cv.txtGfx.rect(
      rct.x,
      rct.y+i*rct.segh+1,
      rct.w,
      rct.segh-2,
      4,4,4,4
    );
    cv.txtGfx.noStroke();
    cv.txtGfx.fill(255*(1.0-corr[i]),255*corr[i],255*tempExp0[i],100);
    cv.txtGfx.rect(
      rct.x+rct.w*0.5-tempExp0[i]*rct.w*0.5-1,
      rct.y+i*rct.segh+1,
      tempExp0[i]*rct.w*0.5,
      rct.segh-2,
      6,6,6,6
    );
    cv.txtGfx.fill(255*(1.0-corr[i]),255*corr[i],255*tempExp1[i],100);
    cv.txtGfx.rect(
      rct.x+rct.w*0.5+1,
      rct.y+i*rct.segh+1,
      tempExp1[i]*rct.w*0.5,
      rct.segh-2,
      6,6,6,6
    );
    cv.txtGfx.noStroke();cv.txtGfx.fill(255,180);cv.txtGfx.textAlign(CENTER,CENTER);
    cv.txtGfx.text(tempExpNames[i],rct.x+rct.w*0.5,rct.y+i*rct.segh+0.5*rct.segh);
  }
}
function markLandmarks(_detections){
  stroke(255,128);strokeWeight(1);fill(0,128);
  let w=cv.capture.processor.width; let h=cv.capture.processor.height;
  for(let i=0;i<_detections.length;i++){
    let pos=_detections[i].landmarks.positions;
    if(cv.capture.flip){
      for(let k=0;k<pos.length;k++){
        circle(
          cv.coords.x+(w-pos[k]._x)/w*cv.coords.w,
          cv.coords.y+pos[k]._y/h*cv.coords.h,
          5
        );
      }
    }else{
      for(let k=0;k<pos.length;k++){
        circle(
          cv.coords.x+pos[k]._x/w*cv.coords.w,
          cv.coords.y+pos[k]._y/h*cv.coords.h,
          5
        );
      }
    }
  }
}
function markFaceWithIndex(_detections,_idx){
  let{_x,_y,_width,_height}=_detections[_idx].alignedRect._box;
  let tempExp=huskExpressionsFromObject(_detections[_idx].expressions);
  if(cv.capture.flip) _x=cv.capture.processor.width-(_x+_width);
  _x=cv.coords.x+_x/cv.capture.processor.width*cv.coords.w;
  _y=cv.coords.y+_y/cv.capture.processor.height*cv.coords.h;
  _width=_width/cv.capture.processor.width*cv.coords.w;
  _height=_height/cv.capture.processor.height*cv.coords.h;
  let diameter=Math.sqrt(Math.pow(_width,2)+Math.pow(_height,2));
  let center={x:(_x+0.5*_width),y:(_y+0.5*_height)};
  let d1=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
  let d2=0; let d3=0; let a1=0; let a2=0;
  let spd1=(1.0-tempExp[0])*0.1+0.8;
  strokeCap(SQUARE);
  let strW=d1*0.001;
  for(let j=0;j<20;j++){
    noFill();
    stroke((j%2===0)*255,(1+Math.sin(millis()*0.006+j))*80+20);
    strokeWeight(1+d1*0.01+j*d1*0.002);
    d2=diameter*0.88 + Math.sin(millis()*0.0021+j)*5 + (1.0-tempExp[0]-0.3)*d1*0.1;
    a1=Math.sin(millis()*0.0001*spd1+j)*TWO_PI;
    a2=a1+Math.abs(Math.sin(millis()*0.001+j+Math.sin(TWO_PI*tempExp[j%7]))*0.8);
    arc(center.x,center.y,d2,d2,a1,a2,OPEN);
  }
  for(let j=0;j<7;j++){
    noFill();
    stroke((j%2===1)*255,(1+Math.sin(millis()*0.003+j))*80+20);
    strokeWeight((Math.sin(millis()*0.00032+j)+1)*d1*0.01);
    d2=diameter*0.88 + Math.sin(millis()*0.0011+j)*5 + (1.0-tempExp[0]-0.3)*d1*0.1;
    d3=d2+((tempExp[j]-0.5)*0.1)*strW;
    a1=tempExp[j]*TWO_PI+millis()*0.0011+j;
    a2=a1+tempExp[j]*TWO_PI*0.1+0.03;
    arc(center.x,center.y,d3,d3,a1,a2,OPEN);
  }
}
function markFaceWithRect(_det){
  let{_x,_y,_width,_height}=_det.alignedRect._box;
  if(cv.capture.flip) _x=cv.capture.processor.width-(_x+_width);
  _x=cv.coords.x+_x/cv.capture.processor.width*cv.coords.w;
  _y=cv.coords.y+_y/cv.capture.processor.height*cv.coords.h;
  _width=_width/cv.capture.processor.width*cv.coords.w;
  _height=_height/cv.capture.processor.height*cv.coords.h;
  rect(_x,_y,_width,_height,5,5,5,5);
}
function markFaces(_detections){
  if(_detections.length<1) return;
  fill(255,32); stroke(255,200); strokeWeight(1); strokeCap(ROUND);
  if(_detections.length===1){markFaceWithRect(_detections[0]); return;}
  for(let i=2;i<_detections.length;i++) markFaceWithRect(_detections[i]);
  if(_detections.length<2) return;
  markFaceWithIndex(_detections,0);markFaceWithIndex(_detections,1);
}
function testDrawExpression(_detections){
  let tempExpNames=getExpressionNamesByLang();
  cv.txtGfx.clear();cv.txtGfx.noStroke();cv.txtGfx.fill(255,255,0);cv.txtGfx.textFont("Helvetica",12);
  for(let i=0;i<_detections.length;i++){
    let tempExp=huskExpressionsFromObject(_detections[i].expressions); let str="";
    for(let j=0;j<7;j++) str=str+tempExpNames[j]+": "+nf(tempExp[j]*100.0,2,2)+"%\n";
    let{_x,_y,_width,_height}=_detections[i].alignedRect._box;
    if(cv.capture.flip) _x=cv.capture.processor.width-(_x+_width);
    _x=cv.coords.x+_x/cv.capture.processor.width*cv.coords.w;
    _y=cv.coords.y+_y/cv.capture.processor.height*cv.coords.h;
    cv.txtGfx.push();
      cv.txtGfx.translate(_x,_y);
      cv.txtGfx.text(str,5,15);
    cv.txtGfx.pop();
  }
}
function testDrawBoxes(_detections){
  fill(255,255,0,32);stroke(255,255,0);strokeWeight(1);
  for(let i=0;i<_detections.length;i++){
    let{_x,_y,_width,_height}=_detections[i].alignedRect._box;
    if(cv.capture.flip) _x=cv.capture.processor.width-(_x+_width);
    _x=cv.coords.x+_x/cv.capture.processor.width*cv.coords.w;
    _y=cv.coords.y+_y/cv.capture.processor.height*cv.coords.h;
    _width=_width/cv.capture.processor.width*cv.coords.w;
    _height=_height/cv.capture.processor.height*cv.coords.h;
    rect(_x,_y,_width,_height,5,5,5,5);
  }
}
function testDrawLandmarks(_detections){
  stroke(128,255,128);strokeWeight(3);noFill();
  let w=cv.capture.processor.width; let h=cv.capture.processor.height;
  for(let i=0;i<_detections.length;i++){
    let pos=_detections[i].landmarks.positions;
    if(cv.capture.flip){
      for(let k=0;k<pos.length;k++){
        point(
          cv.coords.x+(w-pos[k]._x)/w*cv.coords.w,
          cv.coords.y+pos[k]._y/h*cv.coords.h
        );
      }
    }else{
      for(let k=0;k<pos.length;k++){
        point(
          cv.coords.x+pos[k]._x/w*cv.coords.w,
          cv.coords.y+pos[k]._y/h*cv.coords.h
        );
      }
    }
  }
}
function messaging(_detections){
  if(_detections===null){console.log("[messaging] _detections===null");}
  if(_detections===undefined){console.log("[messaging] _detections===undefined");}
  if(!_detections){console.log("[messaging] !_detections");}
  //if(!_detections.length){console.log("[messaging] !_detections.length");}
  let tempExp0,tempExp1,corr; let b=(synth.isActive&&synth.audioEnabled);
  if(!b){if(webSocket.isActive&&webSocket.processor); b=webSocket.processor.isEnabled;}
    if(b){
      if(_detections.length>1){
        tempExp0=huskExpressionsFromObject(_detections[0].expressions);
        tempExp1=huskExpressionsFromObject(_detections[1].expressions);
        corr=calcExpressionsNormCorrelation(tempExp0,tempExp1);
        //console.log(corr);
      }
    }
    // built-in synth
    if(synth.isActive&&synth.audioEnabled){
      if(_detections.length>1){
        synth.update(tempExp0,tempExp1,corr);
      }else{
        synth.update([0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0],[0.0,0.0,0.0,0.0,0.0,0.0,0.0]); // 7 x exp0,7 x exp1, 7 x corr
      }
    }
    // web socket
    if(webSocket.isActive&&webSocket.processor){
      if(webSocket.processor.isEnabled){
        if(_detections.length===0){webSocket.processor.safeSend([ "empator","nofaces",]);}
        for(let i=0;i<_detections.length;i++){
          let tempExp=huskExpressionsFromObject(_detections[i].expressions);
          let tempCoords=huskFaceNormCoords(_detections[i]);
          webSocket.processor.safeSend([
            "empator","face",i,
            tempCoords.normx,tempCoords.normy,tempCoords.normw,tempCoords.normh,
            tempExp[0],tempExp[1],tempExp[2],tempExp[3],tempExp[4],tempExp[5],tempExp[6]
          ]);
        }
        if(_detections.length>1){
          webSocket.processor.safeSend([
            "empator","data",
            tempExp0[0],tempExp0[1],tempExp0[2],tempExp0[3],tempExp0[4],tempExp0[5],tempExp0[6],
            tempExp1[0],tempExp1[1],tempExp1[2],tempExp1[3],tempExp1[4],tempExp1[5],tempExp1[6],
            corr[0],corr[1],corr[2],corr[3],corr[4],corr[5],corr[6]
          ]);
        }
      }
    }
    // MIDI
    if(midi.isActive&&midi.processor&&(midi.outputPortIndex>=0)){
      if(midi.processor.isEnabled&&(midi.channels.out>=0)){
        //let t=millis();
        //for(let i=0;i<_vidaZones.length;i++){
          //midi.processor.sendCC(i,Math.floor(planes.planes.items[i].normFill*127.0),midi.channels.out);
        //}
      }
    }
}
function initMidi(){
  if(!midi.isActive) return;
  if(isNaN(midi.inputPortIndex)) midi.inputPortIndex=-1; midi.inputPortIndex=Math.floor(midi.inputPortIndex);
  if(isNaN(midi.outputPortIndex)) midi.outputPortIndex=-1; midi.outputPortIndex=Math.floor(midi.outputPortIndex);
  midi.processor.init(midi.inputPortIndex,midi.outputPortIndex);
  if((midi.inputPortIndex>=0)||(midi.outputPortIndex>=0)) midi.isActive=true; else midi.isActive=false;
  if(midi.inputPortIndex>=0){
    //midi.processor.onCC=function(_midiEvent){handleIncomingMidiCCMessages(_midiEvent);};
    //midi.processor.onNoteOn=function(_midiEvent){handleIncomingMidiNoteOnMessages(_midiEvent);}; // _midiEvent.note.number, _midiEvent.message.channel // _midiEvent.note.attack
    //midi.processor.onNoteOff=function(_midiEvent){handleIncomingMidiNoteOffMessages(_midiEvent);};
    //midi.processor.onClock=function(_midiEvent){if((midi.ticks%midi.ticksperframe)===0) updateCA(); midi.ticks+=1;};
    //midi.processor.onStart=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(true);};
    //midi.processor.onContinue=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(true);};
    //midi.processor.onStop=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(false);};
  }
}
function initGui(){
  guiContainer.gui = new GUI(this,true,400,160,true);guiContainer.gui.setBackgroundPanelRect(20,20,380,130,5);
  guiContainer.gui.backgroundPanel.color.r=127;guiContainer.gui.backgroundPanel.color.g=127;guiContainer.gui.backgroundPanel.color.b=127;guiContainer.gui.backgroundPanel.color.a=127;
  // selectiveness
  let gui_sld_sel = new SimpleSlider(30,30,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,guiContainer.urlParamsProxy.selectiveness,guiContainer.getLabelByLang(guiContainer.handlers.toSelectivenessSlider));
  gui_sld_sel.onChange=function(_id,_v){
    if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['empator','sel',_v]);}
    cv.normEmoSelectiveness=_v*0.4;
  };
  guiContainer.handlers.toSelectivenessSlider.id=guiContainer.gui.addItem(gui_sld_sel);
  // inv
  let gui_tgl_inv = new SimpleToggle(30,70,180,30,GUI.ORIENTATION_HORIZONTAL,synth.invertCorrelation,guiContainer.getLabelByLang(guiContainer.handlers.toInvertCorrToggle));
  gui_tgl_inv.onChange=function(_id,_v){synth.invertCorrelation=(_v>0);};
  guiContainer.handlers.toInvertCorrToggle.id=guiContainer.gui.addItem(gui_tgl_inv);
  // vol
  let gui_sld_vol = new SimpleSlider(30,110,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.75,guiContainer.getLabelByLang(guiContainer.handlers.toVolSlider));
  gui_sld_vol.onChange=function(_id,_v){
    if(webSocket.isActive&&webSocket.processor){if(webSocket.processor.isEnabled) webSocket.processor.safeSend(['empator','vol',_v]);}
    synth.setVol(_v);
  };
  guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
  if(guiContainer.isActive) guiContainer.gui.enableAllItems(); else guiContainer.gui.disableAllItems();
}
function initWebSocket(){
  if(!webSocket.isActive) return;
  webSocket.processor.init(webSocket.address,function(_msg){
    if(_msg===null) return; if(_msg===undefined) return; if(_msg.data===null) return; if(_msg.data===undefined) return;
    if(webSocket.monitorInput) console.log("[initWebSocket/handler] monitor: "+_msg.data);
    let arr=_msg.data.split(" "); if(arr===null) return; if(arr===undefined) return;
    if(arr.length===2){
      switch(arr[0].toLowerCase()){
        case "vol":
          arr[1]=parseFloat(arr[1]); if(isNaN(arr[1])) return; if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
          if(guiContainer.handlers.toVolSlider.id>=0) guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setValue(_v);
        break;
        default: console.log("[initWebSocket/handler] unhandled arr[0]: "+arr[0]);
      }
    }else{
      // ...
    }
  });
}
function handleUrlParams(){
  try{
    let urlparams = getURLParams();
    if(urlparams){
      if("gui" in urlparams){let v=parseInt(urlparams.gui); if(!isNaN(v)){guiContainer.isActive=(v>0);}console.log("[handleUrlParams] gui: "+guiContainer.isActive);}
      if("mirror" in urlparams){let v=parseInt(urlparams.mirror); if(!isNaN(v)){gesturalInterface.capture.flip=(v>0);} console.log("[handleUrlParams] mirror: "+(v>0));}
      if("famo" in urlparams){
        gesturalInterface.capture.facingMode=decodeURIComponent(urlparams.famo);
        gesturalInterface.capture.facingMode=gesturalInterface.capture.facingMode.toLowerCase();
        if(gesturalInterface.capture.facingMode==="env") gesturalInterface.capture.facingMode="environment";
        console.log("[handleUrlParams] camera facing mode: "+gesturalInterface.capture.facingMode);
      }
      if("pointer" in urlparams){
        let v=parseInt(urlparams.pointer); if(!isNaN(v)){if(v>0) cursor(); else noCursor(); theme.pointer=(v>0);}
        console.log("[handleUrlParams] pointer: "+theme.pointer);
      }
      if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0);} console.log("[handleUrlParams] worker: "+useWorker);}
      if("lang" in urlparams){guiContainer.lang=decodeURIComponent(urlparams.lang);console.log("[handleUrlParams] lang: "+guiContainer.lang);}
      if("ws" in urlparams){webSocket.address="ws://"+decodeURIComponent(urlparams.ws)+"/"; webSocket.isActive=true; console.log("[handleUrlParams] (ws) webSocket.address: "+webSocket.address);}
      if("xws" in urlparams){webSocket.address=decodeURIComponent(urlparams.xws); webSocket.isActive=true; console.log("[handleUrlParams] (xws) webSocket.address: "+webSocket.address);}
      if("vol" in urlparams){
          let v=parseFloat(urlparams.vol);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            gesturalInterface.urlParamsProxy.vol=v; console.log("[handleUrlParams] vol: "+v);
          }
      }
      if("synth" in urlparams){
        let v=parseInt(urlparams.synth);
        if(!isNaN(v)){
          v=(v>0);synth.isActive=v; console.log("[handleUrlParams] synth: "+v);
        }
      }
      //if("midiinport" in urlparams){let v=parseInt(urlparams.midiinport); if(!isNaN(v)){midi.inputPortIndex=v; console.log("[handleUrlParams] MIDI input port index: "+v);}}
      //if("midiinchn" in urlparams){if(!isNaN(urlparams.midiinchn)){midi.channels.in=(Math.abs(Math.floor(urlparams.midiinchn))%16); console.log("[handleUrlParams] MIDI input channel index: "+v);}}
      if("midioutport" in urlparams){let v=parseInt(urlparams.midioutport); if(!isNaN(v)){midi.outputPortIndex=v; console.log("[handleUrlParams] MIDI output port index: "+v);}}
      if("midioutchn" in urlparams){if(!isNaN(urlparams.midioutchn)){midi.channels.out=(Math.abs(Math.floor(urlparams.midioutchn))%16); console.log("[handleUrlParams] MIDI output channel index: "+v);}}
      //if("midioutbarschn" in urlparams){if(!isNaN(urlparams.midioutbarschn)){midi.channels.outBars=(Math.abs(Math.floor(urlparams.midioutbarschn))%16); console.log("[handleUrlParams] MIDI output channel index for bars data: "+v);}}
      if("w" in urlparams){let v=parseInt(urlparams.w); if(!isNaN(v)){if(v>0) gesturalInterface.capture.w=v; console.log("[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("[handleUrlParams] gesturalInterface.capture.h: "+v);}}
      if("tuning" in urlparams){
        let v1=urlparams.tuning.split(','); let b=true;
        if(Array.isArray(v1)){
          if(v1.length===14){
            for(let i=0;i<v1.length;i++){
              v1[i]=parseInt(v1[i]);
              if(isNaN(v1[i])){b=false;}else{if(v1[i]<0) v1[i]=0; if(v1[i]>127) v1[i]=127;}
            }
            if(b){
              guiContainer.urlParamsProxy.sliders.splice(0,guiContainer.urlParamsProxy.sliders.length);
              for(let i=0;i<v1.length;i++) guiContainer.urlParamsProxy.sliders[i]=v1[i];
              console.log("[handleUrlParams] tuning: "+v1.toString());
            }else{console.log("[handleUrlParams] tuning: bad format");}
          }else{console.log("[handleUrlParams] tuning: length !== 14");}
        }else{console.log("[handleUrlParams] tuning is not an array");}
      }
      if("cnf" in urlparams){
          let v=parseFloat(urlparams.cnf);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            cv.faceApiOptions.minConfidence=v; console.log("[handleUrlParams] face API min confidence: "+v);
          }
      }
      if("sel" in urlparams){
          let v=parseFloat(urlparams.sel);
          if(!isNaN(v)){
            if(v<0.0) v=0.0; if(v>1.0) v=1.0;
            cv.normEmoSelectiveness=v; console.log("[handleUrlParams] face API selectiveness: "+v);
          }
      }
      if("inv" in urlparams){
          let v=parseInt(urlparams.inv);
          if(!isNaN(v)){
            v=(v>0);
            synth.invertCorrelation=v; console.log("[handleUrlParams] invert emotional relation: "+v);
          }
      }
      //if("voices" in urlparams){let v=parseInt(urlparams.voices); if(!isNaN(v)){v=Math.floor(v); if(v>=1) synth.setPolyphonyBeforeInit(_v);} console.log("[handleUrlParams] voices: "+v);}
    }
  }catch(_e){console.log("[handleUrlParams] _e: "+_e);}
}
function b2int(_v){return b2i(_v);};
function b2i(_v){if(_v) return 1; return 0;};
function resizeGraphicsWorkaround(_g, _w, _h, _webglflag){
  if(_g === null || _g === undefined) {
    if(_webglflag) _g = createGraphics(_w, _h, this.p.WEBGL); else _g = this.p.createGraphics(_w, _h);
    _g.pixelDensity(1);
  }else{
    _g.width = _w; _g.height = _h;
    _g.elt.width = _w; _g.elt.height = _h;
    // * this._pInst._pixelDensity;
    _g.elt.style.width = _w + 'px'; _g.elt.style.height = _h + 'px';
    _g.pixelDensity(1); _g.loadPixels(); // console.log(_g.width);
    //_g.elt.style.width = _w +'px'; _g.elt.style.height = _h + 'px';
    _g.elt.setAttribute('style', 'display: none');
  }
  _g.updatePixels(); _g.background(0); _g.loadPixels();
  if(_w * _h !== _g.pixels.length / 4) {
    console.log(
      '[resizeGraphicsWorkaround] _w * _h !== _g.pixels.length / 4:' +
      '\n_w = ' + _w + ' _h = ' + _h +
      '\n_g.width = ' + _g.width + ' _g.height = ' + _g.height +
      '\n_w * _h = ' + (_w * _h) +
      '\n_g.pixels.length / 4 = ' + (_g.pixels.length / 4)
    );
  }
  _g.clear();
}
								

									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/30.);
								

									synth.js
									class Synth{
  constructor(_p){
    this.toneLatency="playback"; // "interactive", "playback", "balanced", number
    this.p=_p; this.isActive=true; this.audioEnabled=false;
    this.ampFactor=0.75; this.ampMul=0.5;
    this.oscilBank=[]; this.invertCorrelation=false;
  }
  update(_normMagArrA,_normMagArrB,_correlationArr){
    let corr=0.0; let a=0.0; let b=0.0;
    for(let i=0;i<7;i++){
      if(this.invertCorrelation) corr=1.0-_correlationArr[i]; else corr=_correlationArr[i];
      a=_normMagArrA[i];b=_normMagArrB[i];
      corr=Math.pow(corr,3);a=Math.pow(a,2);b=Math.pow(b,2);
      //console.log(corr,Math.pow(corr,4));
      this.setOscilVol(i,corr*a);this.setOscilVol(i+7,corr*b);
    }
  }
  init(_tuningArr){
    if((!this.isActive)||this.audioEnabled) return;
    if(_tuningArr===null){console.log("[Synth, init] _tuningArr===null"); return;}
    if(_tuningArr===undefined){console.log("[Synth, init] _tuningArr===undefined"); return;}
    if(!_tuningArr.length){console.log("[Synth, init] _tuningArr.length: "+_tuningArr.length); return;}
    if(_tuningArr.length!==14){console.log("[Synth, init] _tuningArr.length!==14"); return;}
    const myContext = new AudioContext({latencyHint:this.toneLatency}); Tone.setContext(myContext);
    for(let i=0;i<_tuningArr.length;i++){
      let f=this.mtof(_tuningArr[i]);
      this.oscilBank[i]={vol:0.0, osc:(new Tone.Oscillator(f,"triangle").toMaster().start())}; // -Infinity
      //this.oscilBank[i]={vol:0.0, osc:(new Tone.Oscillator(f,"sawtooth").toDestination())};
      //this.oscils[i] = new Tone.Oscillator(this.mtof(_tuningArr[i]), "sawtooth").toDestination(); //.toMaster().start();
      //this.oscilBank[i].osc.partials = [1, 2, 3];
      this.oscilBank[i].osc.volume.value=this.mag2db(this.oscilBank[i].vol*this.ampFactor);
    }
    //Tone.start();
    this.audioEnabled=true;
    console.log("[Synth, init] internal synth enabled, latency: "+this.toneLatency+", num of oscills: "+this.oscilBank.length);
  }
  setOscilVol(_idx,_mag){
    if(isNaN(_idx)||isNaN(_mag)) return;
    _idx=Math.floor(_idx); if((_idx<0)||(_idx>=this.oscilBank.length)) return;
    //if((_mag<0.0)||(_mag>1.0)) return;
    if(_mag<0.0) _mag=0.0; if(_mag>1.0) _mag=1.0;
    this.oscilBank[_idx].vol=_mag;
    this.oscilBank[_idx].osc.volume.rampTo(this.mag2db(this.oscilBank[_idx].vol*this.ampFactor), 0.1);
    //this.oscilBank[_idx].osc.volume.value=this.mag2db(this.oscilBank[_idx].vol*this.ampFactor);
  }
  setVol(_mag){
    this.ampFactor=_mag*this.ampMul;
    for(let i=0;i<this.oscilBank.length;i++) this.oscilBank[i].osc.volume.value=this.mag2db(this.oscilBank[i].vol*this.ampFactor);
  }
  mag2db(_mag){return (20*Math.log10(_mag));}
  isMidiPitchNormal(_p){_p=_p%12; if((_p===0)||(_p===2)||(_p===4)||(_p===5)||(_p===7)||(_p===9)||(_p===11)) return true; return false;}
  isMidiPitchSharp(_p){_p=_p%12; if((_p===1)||(_p===3)||(_p===6)||(_p===8)||(_p===10)) return true; return false;}
  midiPitchToToneNoteName(_p){
    let result='?';
    switch(_p%12){
      case 0: result='C'; break; case 1: result='C#'; break; case 2: result='D'; break; case 3: result='D#'; break; case 4: result='E'; break; case 5: result='F'; break; case 6: result='F#'; break; case 7: result='G'; break; case 8: result='G#'; break; case 9: result='A'; break; case 10: result='A#'; break; case 11: result='B'; break;
      default: // ???
    }
    result+=Math.floor(_p/12); return result;
  }
  //flush(){if(this.cellSynth.synth) this.cellSynth.synth.releaseAll();}
  //normValToMidiPitch(_v){return Math.floor(_v*48+36);}
  mtof(_m){return (440.0*Math.pow(2.0,(_m-69.0)/12.0));}
  //note(_pitch,_normVel){if(_normVel>0.0) noteOn(_pitch,_normVel); else noteOff(_pitch);}
  //noteOn(_pitch,_normVel){if(!this.audioEnabled||!this.isActive) return; _normVel*=this.ampFactor;this.tonePolySynth.triggerAttack(this.midiPitchToToneNoteName(_pitch),Tone.now(),_normVel);}
  //noteOff(_pitch){if(!this.audioEnabled||!this.isActive) return; this.tonePolySynth.triggerRelease(this.midiPitchToToneNoteName(_pitch),0);} 
}
								

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

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

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