Empator

are you are human?
Preview: default camera Preview: back camera
Parameters
cnf		"poczucie pewności" modelu wykrywającego ekspresję emocjonalną
gui		hide / show the GUI
inv		przełączanie pomiędzy poszukiwaniem analogicznych lub przeciwstawnych ekspresji emocjonalnych obu analizowanych twarzy
lang		set the interface language
mirror		mirorr the camera image
pointer		hide / show the mouse pointer
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")
Description
“Empator” is a simple AI-based detector of emotional expressions on the faces of people detected in the camera’s field of view. “Empator” extracts two faces from the image (and generally requires at least two people in the camera’s field of view) and analyzes the facial expressions for combinations of seven emotional states: calm (“neutral” state), joy, fear, surprise, disgust, anger, and sadness. It can also extract and amplify information about emotional components other than the dominant ones from the data provided by the AI.
The miniature analyzes the correspondence between the emotional states of both people’s faces, generating a soundscape based on the congruent emotional states (“Empator” can also be switched to a mode that amplifies the differences between individual emotional components) and visualizes the “halo” or “aura” of both faces (similar emotional states are similar “appearances”). The work handles both live faces and photos placed in front of the camera equally well, allowing one to compare one’s own emotional expression with that of another person (either standing next to us in front of the camera or with someone else’s image), and thus, this Miniature can be used in various ways.
One of the key inspirations for the work (both “Empator” and “MianX”) was a device invented for the plot of the book “Do Androids Dream of Electric Sheep?” (Philip K. Dick, 1968) and the film based on it, “Blade Runner” (Ridley Scott, 1982), which conducts the so-called “Voit-Kampf test” on certain book and film protagonists and antagonists — a hypothetical procedure that tests the capacity for empathy, which allows one to distinguish humans from androids.
Technical documentation
Parameters passed via URL

cnf 0.0 … 1.0; “confidence level” of the model detecting emotional expression
famo user | environment (or env); default user; [facingMode] allows forcing the use of the front (user) or rear (environment) camera on devices equipped with dual cameras (most modern mobile devices)
gui 0 or 1; default 1; hides/shows the graphical user interface panel
h vertical camera resolution
inv 0 or 1 (default 0); switches between searching for analogous or opposing emotional expressions of both analyzed faces
lang en or pl; default en; sets the interface language (additional languages can be added)
mirror 0 or 1; default 1; disables/enables mirroring of the image from the capture device (usually a camera)
pointer 0 or 1; default 1; hides/shows the mouse cursor
sel 0.0 … 1.0; selectivity of the model detecting emotional expression
synth 0 or 1; default 1; disables/enables the internal sound generator
tuning sequence of 14 numbers separated by commas in the range 0 … 127 representing MIDI notes assigned to emotional components of both compared faces; the first 7 numbers specify values for the first face, the next 7 for the second; the order of emotions is: “calm”, “happiness”, “anger”, “sadness”, “disgust”, “surprise”, “fear”
vol 0.0 … 1.0; sets the initial instrument volume level (global “vol” slider)
w horizontal camera resolution
worker 0 or 1; default 0; allows blocking the browser’s built-in mechanisms that suspend the program when the window is not visible
ws address; disabled by default; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of Miniature and customization)
xws address; disabled by default; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of Miniature and customization)
Komunikaty przekazywane przez WebSocket

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

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

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
nie dotyczy
Source code
									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta charset="utf-8">
  <meta name="description" content="Empator">
  <meta name="keywords" content="computer vision, music, audio, sound, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <style>body {padding:0;margin:0;}</style>
  <title>Empator, Pawel Janicki, 2026, https://paweljanicki.jp</title>
  <script src="https://unpkg.com/tone"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
  <script src="synth.js"></script>
  <script src="midi.js"></script>
  <script src="gui.js"></script>
  <script src="ws.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js"></script>
  <script src="sketch.js"></script>

</head>

<body>
</body>

</html>
								

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

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

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

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

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

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

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

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

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

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

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

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/30.);
								

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

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

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

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