MianX

emocje i grymasy
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
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
„MianX” to bazujący na prostej AI detektor ekspresji emocjonalnej malującej się na twarzach osób wykrytych w monitorowanym przez kamerę polu. „MianX”, w przeciwieństwie do „NVED” skupia się na jednej twarzy (jakkolwiek zaznacza też na obrazie wszystkie twarze wychwycone przez system). Miniatura wykrywa kombinację 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 wizualizuje i sonifikuje wydobyte informacje. Wizualizacja, jakkolwiek jest proceduralnym i literalnym efektem konwersji danych o emocjach na postać graficzną w oczywisty sposób nawiązuje do „nimbu” lub „aury”. Sonifikacja (w wersji wbudowanej w pracę, choć dzięki możliwości komunikacji Miniatury ze światem zewnętrznym można pokusić się o stworzenie własnej ścieżki dźwiękowej) bazuje na prostej idei przyporządkowania każdej z emocji osobnego tonu.
Tytuł Miniatury „MianX” pochodzi od nazwy antycznej chińskiej sztuki czytania z twarzy Mian Xiang (面相) — osoby biegłe w Mian Xiang potrafiły diagnozować choroby, określać cechy charakteru, a nawet przewidywać przyszłe losy przyglądając się twarzom „badanych” osób.
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
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 7 odzielonych przecinkami liczb z zakresu 0 … 127 reprezentujących nuty MIDI przyporządkowane składnikom emocjonalnym badanej twarzy, 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ę
mianx 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ść)
mianx 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="MianX">
  <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>MianX, Pawel Janicki, 2025, 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],
    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ść'}}
  },
  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();
  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 markDetections(_detections){
  if(_detections.length<1) return;
  let tempExp=huskExpressionsFromObject(_detections[0].expressions);
  let tempExpNames=getExpressionNamesByLang();
  let{_x,_y,_width,_height}=_detections[0].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;
  let rct={x:-1,y:-1,w:-1,h:-1,seg:20,blk:-1,pddng:10,vo:-1};
  if(_x>(cv.txtGfx.width-(_x+_width))){
    rct.x=0;rct.y=0;rct.w=_x;rct.h=cv.txtGfx.height;
  }else{
    rct.x=_x+_width;rct.y=0;rct.w=cv.txtGfx.width-rct.x;rct.h=cv.txtGfx.height;
  }
  rct.blk=rct.seg*7+rct.pddng*6;rct.vo=(cv.txtGfx.height-rct.blk)*0.5;
  let buf=rct.w*0.1; rct.x+=buf; rct.w-=(2*buf);
  for(let i=0;i<7;i++){
    cv.txtGfx.fill(0,128);cv.txtGfx.noStroke();
    cv.txtGfx.rect(rct.x,rct.vo+i*(rct.seg+rct.pddng),rct.w,rct.seg,8,8,8,8);
    cv.txtGfx.fill(255,128);cv.txtGfx.noStroke();
    cv.txtGfx.rect(rct.x,rct.vo+i*(rct.seg+rct.pddng),rct.w*tempExp[i],rct.seg,8,8,8,8);
    cv.txtGfx.fill(255);cv.txtGfx.noStroke();
    cv.txtGfx.text(tempExpNames[i],rct.x+rct.w*0.5,rct.vo+i*(rct.seg+rct.pddng)+rct.seg*0.5);
    cv.txtGfx.noFill();cv.txtGfx.stroke(255);cv.txtGfx.strokeWeight(1);
    cv.txtGfx.rect(rct.x,rct.vo+i*(rct.seg+rct.pddng),rct.w,rct.seg,8,8,8,8);
  }
}
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 markFaces(_detections){
  if(_detections.length<1) return;
  fill(255,32); stroke(255,200); strokeWeight(1); strokeCap(ROUND);
  for(let i=1;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);
  }
  let{_x,_y,_width,_height}=_detections[0].alignedRect._box;
  let tempExp=huskExpressionsFromObject(_detections[0].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 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(){
    // built-in synth
    if(synth.isActive&&synth.audioEnabled){
      if(cv.faceApiDetections.length>0){
        synth.update(huskExpressionsFromObject(cv.faceApiDetections[0].expressions));
      }else{
        synth.update([0.0,0.0,0.0,0.0,0.0,0.0,0.0]);
      }
    }
    // web socket
    if(webSocket.isActive&&webSocket.processor){
      if(webSocket.processor.isEnabled){
        if(cv.faceApiDetections.length===0){webSocket.processor.safeSend([ "mianx","nofaces",]);}
        for(let i=0;i<cv.faceApiDetections.length;i++){
          let tempExp=huskExpressionsFromObject(cv.faceApiDetections[i].expressions);
          let tempCoords=huskFaceNormCoords(cv.faceApiDetections[i]);
          webSocket.processor.safeSend([
            "mianx","face",i,
            tempCoords.normx,tempCoords.normy,tempCoords.normw,tempCoords.normh,
            tempExp[0],tempExp[1],tempExp[2],tempExp[3],tempExp[4],tempExp[5],tempExp[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,120,true);guiContainer.gui.setBackgroundPanelRect(20,20,380,90,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(['mianx','sel',_v]);}
    cv.normEmoSelectiveness=_v*0.4;
  };
  guiContainer.handlers.toSelectivenessSlider.id=guiContainer.gui.addItem(gui_sld_sel);
  // vol
  let gui_sld_vol = new SimpleSlider(30,70,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(['mianx','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===7){
            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 !== 7");}
        }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("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);
  }
}
								

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

									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=[];
  }
  update(_normMagArr){
    for(let i=0;i<_normMagArr.length;i++) this.setOscilVol(i,_normMagArr[i]);
    //console.log(_normMagArr.toString());
  }
  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!==7){console.log("[Synth, init] _tuningArr.length!==7"); 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);
  }
  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;
    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);} 
}
								

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/30.);
								

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

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