MianX

emotions and grimaces
Preview: default camera Preview: back camera
Parameters
cnf		"poczucie pewności" modelu wykrywającego ekspresję emocjonalną
gui		hide / show the GUI
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
“MianX” is a simple AI-based detector of emotional expressions on the faces of people detected in the camera’s monitored field. Unlike “NVED”, “MianX” focuses on a single face (though it also highlights all faces captured by the system in the image). Miniature detects a combination of seven emotional states: calm (“neutral”), 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.
Miniature visualizes and sonifies the extracted information. Although visualization is a procedural and literal effect of converting emotional data into a graphic form, it clearly refers to a halo or aura. Sonification (in its built-in version, although thanks to Miniature’s ability to communicate with the outside world, one can attempt to create a custom soundtrack) is based on the simple idea of assigning a distinct tone to each emotion.
The title of “MianX” Miniatures comes from the ancient Chinese art of face reading, Mian Xiang (面相) – people skilled in Mian Xiang could diagnose illnesses, determine character traits, and even predict future fates by looking at the faces of the people they “examined.”
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
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 7 numbers separated by commas in the range 0 … 127 representing MIDI notes assigned to emotional components of the analyzed face; 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)
Messages passed via WebSocket

Messages to which Miniature responds
not applicable
Messages sent by Miniature
mianx face face parameters: index, normalized horizontal position, normalized vertical position, normalized width, normalized height, “calm” (normalized value), “happiness” (normalized value), “anger” (normalized value), “sadness” (normalized value), “disgust” (normalized value), “surprise” (normalized value), “fear” (normalized value)
mianx faces reports the number of recognized faces
MIDI

Messages to which Miniature responds
not applicable
Messages sent by Miniature
not applicable
Communication with MaxMSP

Messages to which Miniature responds
not applicable
Messages sent by Miniature
not applicable
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="MianX">
  <meta name="keywords" content="computer vision, music, audio, sound, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <style>body {padding:0;margin:0;}</style>
  <title>MianX, Pawel Janicki, 2025, https://paweljanicki.jp</title>
  <script src="https://unpkg.com/tone"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
  <script src="synth.js"></script>
  <script src="midi.js"></script>
  <script src="gui.js"></script>
  <script src="ws.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js"></script>
  <script src="sketch.js"></script>

</head>

<body>
</body>

</html>
								

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

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

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

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

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

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

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

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

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

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

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

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

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

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/30.);
								

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

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