W3RGBV

the study of fundamental visual qualities
Preview: default camera Preview: back camera
Parameters
gui		hides/shows the graphical user interface panel
mirror		mirorr the camera image
audio		disables/enables detection of the audio level captured by the microphone
invert		disables/enables inversion of the response to the audio level captured by the microphone (the "smooth" toggle)
pointer		hides/shows the mouse cursor
lang		sets the interface language
smooth		sets the initial degree of animation smoothing (position of the "smooth" slider in the menu)
vol		sets the initial microphone volume level (position of the "vol" slider in the menu)
sclh		horizontal image scaling (default 1.0, negative values correspond to mirroring along the axis)
sclv		vertical image scaling (default 1.0, negative values correspond to mirroring along the axis)
Description
The miniature is a web version of the RGB: Ray Gun Beam Virus installation, presented at WRO in 2012 on the occasion of the 50th anniversary of electronic art.
Like its exhibition prototype, it refers to the Ray Gun Virus installation by American artist Paul Sharits from 1966.
The work simulates the “spreading” of the color components of the image – a side effect of early video projectors – and introduces distortions that respond to environmental stimuli (such as sound).
W3RGBV is a digital study of perception and a reminder that what was once a flaw in the medium can become its aesthetic potential.
W3RGBV is a a browser-based version of our installation “RGB: Ray Gun Beam Virus” from the exhibition “Variable. Constant. Stray. AC/DC/IT,” which we created to celebrate the half-century anniversary of electronic art. Like its exhibition prototype, it references the 1966 installation “Ray Gun Virus” by American artist Paul Sharits.
The installation simulates the effect of the color components of an image “splitting” (also introducing additional distortions under the influence of sufficiently strong stimuli) – an undesirable side effect resulting from the design of early video projectors, which were equipped with separate projection systems for each color component and were easily desynchronized. It also draws on Sharits’s interests – the study of fundamental visual qualities and the interactions between phenomena representing these fundamental qualities.
Technical documentation
Parameters passed via URL

gui 0 or 1; default 1; hides/shows the graphical user interface panel
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)
mirror 0 or 1; default 1; disables/enables image mirroring mode
audio 0 or 1; default 1; disables/enables detection of the audio level captured by the microphone
invert 0 or 1; default 0; disables/enables inversion of the response to the audio level captured by the microphone (the “smooth” toggle)
pointer 0 or 1; default 1; hides/shows the mouse cursor
worker 0 or 1; default 0; allows blocking the browser’s built-in mechanisms that suspend the program when the window is not visible
lang en or pl; default en; sets the interface language (additional languages can be added)
ws address; default disabled; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of the Miniature and customization)
xws address; default disabled; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of the Miniature and customization)
midiinport default disabled; MIDI port number for external control of the Miniature
smooth 0.0 … 1.0; sets the initial degree of animation smoothing (position of the “smooth” slider in the menu)
vol 0.0 … 1.0; sets the initial microphone volume level (position of the “vol” slider in the menu)
w horizontal camera resolution
h vertical camera resolution
sclh horizontal image scaling (default 1.0, negative values correspond to mirroring along the axis)
sclv vertical image scaling (default 1.0, negative values correspond to mirroring along the axis)
Messages passed via WebSocket

Messages to which the Miniature responds
vol value treated as an equivalent of microphone signal volume controlling the intensity of image processing
Messages sent by the Miniature
not applicable
MIDI

Messages to which the Miniature responds
CC xxx on any channel the value of any CC controller is treated as an equivalent of microphone signal volume controlling the intensity of image processing
Note Off on any channel the note’s vel parameter is treated as an equivalent of microphone signal volume controlling the intensity of image processing
Note On on any channel the note’s vel parameter is treated as an equivalent of microphone signal volume controlling the intensity of image processing
Messages sent by the Miniature
not applicable
Communication with MaxMSP

Messages to which the Miniature responds
not applicable
Messages sent by the Miniature
not applicable
Source code
									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="W3RGBV">
  <meta name="keywords" content="Paul, Sharits, media, red, green, blue, virus, beam, beamer, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3RGBV, Pawel Janicki, 2012-25, https://paweljanicki.jp</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <!--<script src="http://unpkg.com/tone"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="ws.js"></script>
  <script src="midi.js"></script>
  <script src="gui.js"></script>
  <script src="history.js"></script>
  <script src="device.js"></script>
  <script src="animator.js"></script>
  <script src="animatedtexturedpanel.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
</body>

</html>
								

									sketch.js
									function detectMax(){try{window.max.outlet('Hello Max!');return true;}catch(_e){console.log('Max, where are you? '+_e);} return false;}
let s=function(p){
  let storedUrlParams={vol:0.5, inv:false, smooth:0.3};
  let device = new Device(p);
  let useWorker =false;
  let audio={isActive:true,isEnabled:false,micLevel:0.0,prevVal:0.0,currVal:0.0,analyserNode:null,smooth:0.3,vol:0.5};
  let capture={w:640,h:480,processor:null,flip:false,facingMode:"default"};
  let animator, mic_history_short, mic_history_long;
  let theme={
    colors:{bg:{r:0,g:0,b:0},},
    scl:{h:1.0,v:1}
    //smooth:0.3, vol:0.5
  };
  let externalInput={vol:0.0};
  let webSocket={
    isActive:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let midi={
    isActive:false,
    processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1
  };
  let guiContainer={
    gui:null, isActive:true, lock:-1, lang:'en',
    pointer:true,
    handlers:{
      toInvertVolToggle:{id:-1,label:{en:'invert',pl:'odwrotnie'}},
      toSmoothSlider:{id:-1,label:{en:'smooth',pl:'wygładzaj'}},
      toVolSlider:{id:-1,label:{en:'vol',pl:'vol'}}
    },
    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;
    }
  };
  const maxIsDetected=detectMax();
  p.getMedia=async function(_constraints){
    try{
      let stream=null;
      stream = await navigator.mediaDevices.getUserMedia(_constraints);
      const audioContext = new AudioContext();
      const microphone = audioContext.createMediaStreamSource(stream);
      audio.analyserNode = audioContext.createAnalyser();
      microphone.connect(audio.analyserNode);
      audio.isEnabled=true;
      console.log("[p.getMedia] audio input enabled");
    }catch(_err){console.log("[p.getMedia] error: "+_err);}
  };
  p.getLevel=function(){
    if (!audio.analyserNode) return 0.0;
    const pcmData = new Float32Array(audio.analyserNode.fftSize);
    audio.analyserNode.getFloatTimeDomainData(pcmData);
    let sumSquares=0.0;
    for(const amplitude of pcmData) sumSquares+=amplitude*amplitude;
    return Math.sqrt(sumSquares/pcmData.length);
  }
  p.preload=function(){device.preload();};
  p.randomizePanelOrdering=function(){if(p.frameCount%30===0){if(Math.random()< 0.2) animator.randomize();}};
  p.setBackground=function(_r,_g,_b){
    _r = Math.floor(_r); _g = Math.floor(_g); _b = Math.floor(_b);
    p.background(_r, _g, _b);
    document.body.style.background = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';
  };
  p.setup=function(){
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementsByTagName('body')[0].style.margin = "0px 0px 0px 0px";
    document.getElementsByTagName('body')[0].style.padding = "0px 0px 0px 0px";
    p.handleUrlParams();
    mic_history_short = new History(5,0.0); mic_history_long = new History(20,0.0);
    p.createCanvas(10,10,p.WEBGL);
    if(audio.isActive) p.getMedia({audio:true,video:false});
    if(maxIsDetected){document.getElementsByTagName('body')[0].style.overflow = 'hidden';}
    animator = new Animator(p);
    //capture.processor=p.createCapture(p.VIDEO);
    //capture.processor.size(capture.w,capture.h);
    //capture.processor.hide();
    p.initCaptureDevice(capture.w,capture.h);
    p.initGui(); device.init(capture.processor.width,capture.processor.height);
    p.initMidi(); p.initWebSocket();
    if((!guiContainer.pointer)&&(!guiContainer.isActive)) p.noCursor();
    if(useWorker){
      p.noLoop();
      let intervalWorker = new Worker('worker.js');
      intervalWorker.onmessage = function(_e){p.handleWorker();}
      console.log("[setup] Worker set as clock source.");
    }else{p.frameRate(60);}
  };
  p.handleWorker=function(){p.redraw();};
  p.updateAudio=function(){
    if(audio.isActive&&audio.isEnabled){
      audio.prevVal=audio.currVal; audio.micLevel=p.getLevel()*guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].getValue()*4.0;
      if(audio.micLevel>1.0) audio.micLevel=1.0;
      if(guiContainer.gui.items[guiContainer.handlers.toInvertVolToggle.id].getValue()) audio.micLevel=1.0-audio.micLevel;
      mic_history_short.update(audio.micLevel); mic_history_long.update(audio.micLevel);
    }
  };
  p.updateExternalInput=function(){
    if(midi.isActive||webSocket.isActive){
      audio.prevVal=audio.currVal; audio.micLevel=externalInput.vol*guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].getValue();
      if(audio.micLevel>1.0) audio.micLevel=1.0;
      if(guiContainer.gui.items[guiContainer.handlers.toInvertVolToggle.id].getValue()) audio.micLevel=1.0-audio.micLevel;
      mic_history_short.update(audio.micLevel); mic_history_long.update(audio.micLevel);
    }
  };
  p.draw=function(){
    p.randomizePanelOrdering();
    if((p.width!=innerWidth)||(p.height!=innerHeight)){p.resizeCanvas(innerWidth,innerHeight); device.resize();}
    p.setBackground(theme.colors.bg.r,theme.colors.bg.g,theme.colors.bg.b);
    p.updateExternalInput(); p.updateAudio();
    if(capture.processor){
      device.updateColorTextures(capture.processor);
      device.draw(mic_history_short,mic_history_long,animator);
      p.push();
        p.scale(theme.scl.h,theme.scl.v);
        p.image(device.tex_gfxGlitch,-p.width*0.5,-p.height*0.5,p.width,p.height);
      p.pop();
    }else{
      // ???
    }
    animator.update();
    guiContainer.gui.draw();
  };
  p.doubleClicked=function(){return false;};p.mouseClicked=function(){return false;};p.mouseWheel=function(){return false;};
  p.mouseDragged=function(){guiContainer.gui.dragPointer(p.mouseX,p.mouseY);return false;};
  p.mouseMoved=function(){guiContainer.gui.moveIdlePointer(p.mouseX,p.mouseY);return false;};
  p.mousePressed=function(){guiContainer.lock=guiContainer.gui.lockPointer(p.mouseX,p.mouseY);return false;};
  p.mouseReleased=function(){
    guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);
    p.initMic();
    p.unifiedTactileEventClick();
    return false;
  };
  p.touchStarted=function(_touchEvent){guiContainer.lock=guiContainer.gui.lockPointer(p.mouseX,p.mouseY);return false;};
  p.touchMoved=function(_touchEvent){guiContainer.gui.dragPointer(p.mouseX,p.mouseY);return false;};
  p.touchEnded=function(_touchEvent){
    guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);
    p.initMic();
    p.unifiedTactileEventClick();
    return false;};
  p.initMic=function(){
    //if((!isAudioEnabled)&&isAudioActive){mic = new p5.AudioIn(); mic.start(); isAudioEnabled=true;}
  }
  p.unifiedTactileEventClick=function(){
    if(guiContainer.isActive){
      if(guiContainer.lock<0){
        if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){guiContainer.gui.setBackgroundPanelVisibility(false); guiContainer.gui.disableAllItems();guiContainer.isActive=false;if(!guiContainer.pointer)p.noCursor();}
      }
    }else{
      guiContainer.gui.enableAllItems(); guiContainer.isActive=true; p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true);
    }
  };
  p.handleIncomingWebSocketMessages=function(_msg){
    if(!_msg||_msg===null) return; if(_msg===undefined) return;
    if(!_msg.data||_msg.data===null) return; if(_msg.data===undefined) return;
    var arr = _msg.data.split(" ");
    if((!arr)||(arr===null)) return; if(arr===undefined) return; //if(arr.length<1) return;
    if(arr.length!==2) return;
    if(arr[0]!=="vol") return; 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;
    externalInput.vol=arr[1];
  };
  p.initWebSocket=function(){
    if(webSocket.isActive){
      console.log("[p.initWebSocket] starting websocket connection, address: "+webSocket.address);
      webSocket.processor.init(webSocket.address,p.handleIncomingWebSocketMessages);
    }
  };
  p.initMidi=function(){
    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;
    if(midi.inputPortIndex>=0){
      midi.processor.onNoteOff = function(_midiEvent){p.handleIncomingMidiNoteOffMessages(_midiEvent);}
      midi.processor.onNoteOn = function(_midiEvent){p.handleIncomingMidiNoteOnMessages(_midiEvent);}
      midi.processor.onCC = function(_midiEvent){p.handleIncomingMidiCCMessages(_midiEvent);}
    }
  };
  p.handleIncomingMidiNoteOffMessages=function(_midiEvent){externalInput.vol=0.0;};
  p.handleIncomingMidiNoteOnMessages=function(_midiEvent){externalInput.vol=_midiEvent.note.attack;};
  p.handleIncomingMidiCCMessages=function(_midiEvent){externalInput.vol=_midiEvent.rawValue/127.0;};
  p.initCaptureDevice=function(_w,_h){
    let b=p._initCaptureDevice(_w,_h);
    if((!b)&&(capture.facingMode!=="default")){
      console.log("[p.initCaptureDevice] can't access capture device against current facing mode ("+capture.facingMode+"), trying to access default mode instead...");
      capture.facingMode="default"; p._initCaptureDevice(_w,_h);
    };
  }
  p._initCaptureDevice=function(_w,_h){
    let result=false;
    switch(capture.facingMode){
      case "default":
        try{
          capture.processor=p.createCapture(p.VIDEO,{flipped:capture.flip});
          capture.processor.size(_w,_h);
          capture.processor.elt.setAttribute('playsinline', '');
          capture.processor.hide();
          console.log('[_initCaptureDevice] capture ready: '+capture.processor.width+' '+capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "user":
        try{
          //imageProcessor.capture.processor=p.createCapture({audio:false,video:{facingMode:{exact:"user"}}});
          capture.processor=p.createCapture(p.VIDEO,{video:{facingMode:{exact:"user"}},flipped:capture.flip});
          capture.processor.size(_w,_h);
          capture.processor.elt.setAttribute('playsinline', '');
          capture.processor.hide();
          console.log('[_initCaptureDevice] capture ready: '+capture.processor.width+' '+capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "environment":
        try{
          //imageProcessor.capture=p.createCapture({audio:false,video:{facingMode:{exact:"environment"}}});
          capture.processor=p.createCapture(p.VIDEO,{video:{facingMode:{exact:"environment"}},flipped:capture.flip});
          capture.processor.size(_w,_h);
          capture.processor.elt.setAttribute('playsinline', '');
          capture.processor.hide();
          console.log('[initCaptureDevice] capture ready: '+capture.processor.width+' '+capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      default: console.log("[_initCaptureDevice] unhandled facingMode: "+capture.facingMode);
    }
    return result;
  };
  p.initGui=function(){
    //guiContainer.gui = new GUI(p,true,300,300,true);
    //guiContainer.gui = new GUI(p,false);
    guiContainer.gui = new GUI(p,true,420,330,true);
    guiContainer.gui.setBackgroundPanelRect(20,20,290,130,5);
    guiContainer.gui.backgroundPanel.color.r=0;
    guiContainer.gui.backgroundPanel.color.g=0;
    guiContainer.gui.backgroundPanel.color.b=0;
    guiContainer.gui.backgroundPanel.color.a=127;
    let gui_sld_invvol = new SimpleToggle(30,110,100,30,GUI.ORIENTATION_HORIZONTAL,storedUrlParams.inv,guiContainer.getLabelByLang(guiContainer.handlers.toInvertVolToggle));
    gui_sld_invvol.onChange=function(_id,_v){};
    guiContainer.handlers.toInvertVolToggle.id=guiContainer.gui.addItem(gui_sld_invvol);
    let gui_sld_vol = new SimpleSlider(30,70,270,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,storedUrlParams.vol,guiContainer.getLabelByLang(guiContainer.handlers.toVolSlider));
    gui_sld_vol.onChange=function(_id,_v){};
    guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
    let gui_sld_smooth = new SimpleSlider(30,30,270,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,storedUrlParams.smooth,guiContainer.getLabelByLang(guiContainer.handlers.toSmoothSlider));
    gui_sld_smooth.onChange=function(_id,_v){};
    guiContainer.handlers.toSmoothSlider.id=guiContainer.gui.addItem(gui_sld_smooth);
    if(guiContainer.isActive){
      guiContainer.gui.enableAllItems(); p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true);
    }else {
      guiContainer.gui.disableAllItems();
      if(!guiContainer.pointer) p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(false);
    }
    //guiContainer.gui.forceBroadcast();
  };
  p.handleUrlParams=function(){
    try{
      let urlparams = p.getURLParams();
      if(urlparams){
        if("gui" in urlparams){let v=parseInt(urlparams.gui); if(!isNaN(v)){guiContainer.isActive=(v>0);}console.log("[p.handleUrlParams] gui: "+guiContainer.isActive);}
        if("mirror" in urlparams){let v=parseInt(urlparams.mirror); if(!isNaN(v)){capture.flip=(v>0);} console.log("[p.handleUrlParams] mirror: "+(v>0));}
        if("famo" in urlparams){
          capture.facingMode=decodeURIComponent(urlparams.famo);
          capture.facingMode=capture.facingMode.toLowerCase();
          if(capture.facingMode==="env") capture.facingMode="environment";
          console.log("[p.handleUrlParams] camera facing mode: "+capture.facingMode);
        }
        if("invert" in urlparams){let v=parseInt(urlparams.invert); if(!isNaN(v)){storedUrlParams.inv=(v>0); console.log("[p.handleUrlParams] invert: "+(v>0));}}
        if("audio" in urlparams){let v=parseInt(urlparams.audio); if(!isNaN(v)){audio.isActive=(v>0); console.log("[p.handleUrlParams] audio: "+audio.isActive);}}
        if("pointer" in urlparams){let v=parseInt(urlparams.pointer); if(!isNaN(v)) guiContainer.pointer=(v>0);console.log("[p.handleUrlParams] pointer: "+guiContainer.pointer); if(!guiContainer.pointer) p.noCursor();}
        if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0); console.log("[p.handleUrlParams] worker: "+useWorker);}}
        if("lang" in urlparams){guiContainer.lang=decodeURIComponent(urlparams.lang); console.log("[p.handleUrlParams] lang: "+guiContainer.lang);}
        if("ws" in urlparams){webSocket.address="ws://"+decodeURIComponent(urlparams.ws)+"/"; webSocket.isActive=true; console.log("[p.handleUrlParams] (ws) webSocket.address: "+webSocket.address);}
        if("xws" in urlparams){webSocket.address=decodeURIComponent(urlparams.xws); webSocket.isActive=true; console.log("[p.handleUrlParams] (xws) webSocket.address: "+webSocket.address);}
        if("midiinport" in urlparams){let v=parseInt(urlparams.midiinport); if(!isNaN(v)){midi.inputPortIndex=v; console.log("[p.handleUrlParams] MIDI input port index: "+v);}}
        if("smooth" in urlparams){let v=parseFloat(urlparams.smooth); if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; storedUrlParams.smooth=v; console.log("[p.handleUrlParams] smooth: "+v);}}
        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; storedUrlParams.vol=v; console.log("[p.handleUrlParams] vol: "+v);}}
        if("w" in urlparams){let v=parseInt(urlparams.w); if(!isNaN(v)){if(v>0) capture.w=v; console.log("[p.handleUrlParams] capture width: "+v);}}
        if("h" in urlparams){let v=parseInt(urlparams.h); if(!isNaN(v)){if(v>0) capture.h=v; console.log("[p.handleUrlParams] capture height: "+v);}}
        if("sclh" in urlparams){let v=parseFloat(urlparams.sclh); if(!isNaN(v)){theme.scl.h=v; console.log("[p.handleUrlParams] scale horizontal: "+v);}}
        if("sclv" in urlparams){let v=parseFloat(urlparams.sclv); if(!isNaN(v)){theme.scl.v=v; console.log("[p.handleUrlParams] scale vertical: "+v);}}
      }
    }catch(_e){console.log("[p.handleUrlParams] _e: "+_e);}
  };
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

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

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

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/60.);
								

									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"])
}
								

									animatedtexturedpanel.js
									class AnimatedTexturedPanel{
    constructor(_p){
        this.p=_p;
        this.position = {start: 0.0, end: 0.0, current: 0.0};
        this.anim_phase = 1.0;
        this.anim_duration = 1000.0;
        this.anim_startTimeTag = 0.0;
    }
    update(){
        this.anim_phase = (this.p.millis() - this.anim_startTimeTag) / this.anim_duration;
        if(this.anim_phase > 1.0) this.anim_phase = 1.0;
        this.position.current = this.position.start + (this.position.end - this.position.start) * this.anim_phase;
    }
}
								

									animator.js
									class Animator{
    constructor(_p){
        this.p=_p;
        this.redPanel = new AnimatedTexturedPanel(this.p);
        this.greenPanel = new AnimatedTexturedPanel(this.p);
        this.bluePanel = new AnimatedTexturedPanel(this.p);
        this.randomize();
    }
    randomize(){
        this.redPanel.position.start = this.redPanel.position.current;
        this.greenPanel.position.start = this.greenPanel.position.current;
        this.bluePanel.position.start = this.bluePanel.position.current;
        let temp_option = Math.floor(Math.random() * 6);
        switch(temp_option) {
            case 0: // r - g - b
            this.redPanel.position.end   = -this.p.width * 0.5;
            this.greenPanel.position.end = 0;
            this.bluePanel.position.end  = this.p.width * 0.5;
            break;
            case 1: // b - g - r
            this.redPanel.position.end   = this.p.width * 0.5;
            this.greenPanel.position.end = 0;
            this.bluePanel.position.end  = -this.p.width * 0.5;
            break;
            case 2: // r - b - g
            this.redPanel.position.end   = -this.p.width * 0.5;
            this.greenPanel.position.end = this.p.width * 0.5;
            this.bluePanel.position.end  = 0;
            break;
            case 3: // g - b - r
            this.redPanel.position.end   = this.p.width * 0.5;
            this.greenPanel.position.end = -this.p.width * 0.5;
            this.bluePanel.position.end  = 0;
            break;
            case 4: // g - r - b
            this.redPanel.position.end   = 0;
            this.greenPanel.position.end = -this.p.width * 0.5;
            this.bluePanel.position.end  = this.p.width * 0.5;
            break;
            case 5: // b - r - g
            this.redPanel.position.end   = 0;
            this.greenPanel.position.end = this.p.width * 0.5;
            this.bluePanel.position.end  = -this.p.width * 0.5;
            break;
            default: console.log('[Animator, randomize, switch(temp_option)] unhandled temp_option: ' + temp_option);
        }
        this.redPanel.anim_phase = this.greenPanel.anim_phase = this.bluePanel.anim_phase = 0.0;
        this.redPanel.anim_duration = (0.5 + Math.random() * 1.0) * 1000.0;
        this.greenPanel.anim_duration = (0.5 + Math.random() * 1.0) * 1000.0;
        this.bluePanel.anim_duration = (0.5 + Math.random() * 1.0) * 1000.0;
        this.redPanel.anim_startTimeTag = this.greenPanel.anim_startTimeTag = this.bluePanel.anim_startTimeTag = this.p.millis();
    }
    update(){this.redPanel.update(); this.greenPanel.update(); this.bluePanel.update();}
}
								

									colorFilter.frag
									// ripped from https://glitch.com/edit/#!/psychedelic-webcam-shader?path=uniform.frag:127:1

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vTexCoord; // grab texcoords from vert shader

// our textures coming from p5
uniform sampler2D tex0;
uniform vec4 u_mul_rgba;

//float luma(vec3 color) {return dot(color, vec3(0.299, 0.587, 0.114));}

void main() {
  vec4 tex = texture2D(tex0, vTexCoord);
  gl_FragColor = vec4(tex.r * u_mul_rgba[0], tex.g * u_mul_rgba[1], tex.b * u_mul_rgba[2], 1.0); // gl_FragColor = tex;
}
								

									colorFilter.vert
									attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord; // lets get texcoords just for fun! 

//attribute vec4 aVertexColor;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
//varying vec4 vColor;

void main() {
  vTexCoord = aTexCoord; // copy the texcoords
  // copy the position data into a vec4, using 1.0 as the w component
  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

  gl_Position = positionVec4; // send the vertex information on to the fragment shader
  //gl_Position = positionVec4 * uProjectionMatrix * uModelViewMatrix;
}
								

									device.js
									class Device{
    constructor(_p){
        this.p=_p;
        this.redShader=null; this.greenShader=null; this.blueShader=null; this.glitchShader=null;
        this.tex_gfxGlitch=null; this.tex_gfxMain=null; this.tex_gfxRed=null; this.tex_gfxGreen=null; this.tex_gfxBlue=null;
    }
    preload(){
        this.redShader = this.p.loadShader('colorFilter.vert', 'colorFilter.frag');
        this.greenShader = this.p.loadShader('colorFilter.vert', 'colorFilter.frag');
        this.blueShader = this.p.loadShader('colorFilter.vert', 'colorFilter.frag');
        this.glitchShader = this.p.loadShader('glitch.vert', 'glitch.frag');
    }
    init(_captureW,_captureH){
        this.tex_gfxRed   = this.p.createGraphics(_captureW,_captureH,this.p.WEBGL); this.tex_gfxRed.textureWrap(this.p.REPEAT);
        this.tex_gfxGreen = this.p.createGraphics(_captureW,_captureH,this.p.WEBGL); this.tex_gfxGreen.textureWrap(this.p.REPEAT);
        this.tex_gfxBlue  = this.p.createGraphics(_captureW,_captureH,this.p.WEBGL); this.tex_gfxBlue.textureWrap(this.p.REPEAT);
        this.resize();
        //p.pixelDensity(1);tex_gfxMain.pixelDensity(1);tex_gfxRed.pixelDensity(1);tex_gfxGreen.pixelDensity(1);tex_gfxBlue.pixelDensity(1);
        this.p.textureWrap(this.p.REPEAT);
    }
    resize(){
        //tex_gfxMain.remove(); tex_gfxMain = p.createGraphics(innerWidth, innerHeight, p.WEBGL); tex_gfxMain.textureWrap(p.REPEAT);
        //tex_gfxGlitch.remove(); tex_gfxGlitch = p.createGraphics(innerWidth, innerHeight, p.WEBGL); tex_gfxGlitch.textureWrap(p.REPEAT);
        if(this.tex_gfxMain===null)
            this.tex_gfxMain=this.p.createGraphics(this.p.width,this.p.width,this.p.WEBGL);
        else
            this.resizeGraphicsWorkaround(this.tex_gfxMain,this.p.width,this.p.height,true);
        this.tex_gfxMain.textureWrap(this.p.REPEAT);
        if(this.tex_gfxGlitch===null)
            this.tex_gfxGlitch = this.p.createGraphics(this.p.width,this.p.width,this.p.WEBGL);
        else
            this.resizeGraphicsWorkaround(this.tex_gfxGlitch,this.p.width,this.p.height,true);
        this.tex_gfxGlitch.textureWrap(this.p.REPEAT);
        this.p.textureWrap(this.p.REPEAT);
    }
    drawTexture(_tex,_offset,_grid){
        let temp_scale_factor        = this.tex_gfxMain.height / _tex.height;
        let temp_panel_width         = temp_scale_factor * _tex.width;
        let temp_panel_height        = this.tex_gfxMain.height;
        let temp_tex_segment_width   = _tex.width / _grid.w;
        let temp_tex_segment_height  = _tex.height / _grid.h;
        let temp_segment_width       = temp_panel_width / _grid.w;
        let temp_segment_height      = temp_panel_height / _grid.h;
        let temp_segment_half_width  = temp_segment_width * 0.5;
        let temp_segment_half_height = temp_segment_height * 0.5;
        this.tex_gfxMain.push();
        this.tex_gfxMain.translate(-temp_panel_width/2+_offset,-temp_panel_height/2,0);
        this.tex_gfxMain.texture(_tex);
        for(let y = 0; y < _grid.h; y++) {
            for(let x = 0; x < _grid.w; x++) {
            this.tex_gfxMain.push();
                this.tex_gfxMain.translate(
                x * temp_segment_width + temp_segment_half_width,
                y * temp_segment_height + temp_segment_half_height,
                0
                );
                this.tex_gfxMain.beginShape();
                this.tex_gfxMain.vertex(
                    -temp_segment_half_width, -temp_segment_half_height, 0,
                    x * temp_tex_segment_width, y * temp_tex_segment_height
                );
                this.tex_gfxMain.vertex(
                    temp_segment_half_width, -temp_segment_half_height, 0,
                    (x + 1) * temp_tex_segment_width, y * temp_tex_segment_height
                );
                this.tex_gfxMain.vertex(
                    temp_segment_half_width, temp_segment_half_height, 0,
                    (x + 1) * temp_tex_segment_width, (y + 1) * temp_tex_segment_height
                );
                this.tex_gfxMain.vertex(
                    -temp_segment_half_width, temp_segment_half_height, 0,
                    x * temp_tex_segment_width, (y + 1) * temp_tex_segment_height
                );
                this.tex_gfxMain.endShape();
            this.tex_gfxMain.pop();
            }
        }
        this.tex_gfxMain.pop();
    }
    updateColorTextures(_captureDevice){
        this.tex_gfxRed.shader(this.redShader); this.tex_gfxGreen.shader(this.greenShader); this.tex_gfxBlue.shader(this.blueShader);
        this.redShader.setUniform('u_mul_rgba', [1.0, 0.0, 0.0, 1.0]); this.greenShader.setUniform('u_mul_rgba', [0.0, 1.0, 0.0, 1.0]); this.blueShader.setUniform('u_mul_rgba', [0.0, 0.0, 1.0, 1.0]);
        this.redShader.setUniform('tex0', _captureDevice); this.greenShader.setUniform('tex0', _captureDevice); this.blueShader.setUniform('tex0', _captureDevice);
        this.tex_gfxRed.rect(-this.tex_gfxRed.width*0.5,-this.tex_gfxRed.height*0.5,this.tex_gfxRed.width,this.tex_gfxRed.height);
        this.tex_gfxGreen.rect(-this.tex_gfxGreen.width*0.5,-this.tex_gfxGreen.height*0.5,this.tex_gfxGreen.width,this.tex_gfxGreen.height);
        this.tex_gfxBlue.rect(-this.tex_gfxBlue.width*0.5,-this.tex_gfxBlue.height*0.5,this.tex_gfxBlue.width,this.tex_gfxBlue.height);
        this.tex_gfxRed.resetShader();this.tex_gfxGreen.resetShader();this.tex_gfxBlue.resetShader();
    }
    draw(_mic_history_short,_mic_history_long,_animator){
        let temp_offset_factor=Math.sqrt(_mic_history_short.getMedianValue());
        let temp_grid = {w:1,h:1}; // problem with grid and performance under Safari
        this.tex_gfxMain.clear();
        //setHackermansBlendAddMode(tex_gfxMain);
        this.tex_gfxMain.blendMode(this.p.ADD);
        this.drawTexture(this.tex_gfxRed,   _animator.redPanel.position.current   * temp_offset_factor, temp_grid);
        this.drawTexture(this.tex_gfxGreen, _animator.greenPanel.position.current * temp_offset_factor, temp_grid);
        this.drawTexture(this.tex_gfxBlue,  _animator.bluePanel.position.current  * temp_offset_factor, temp_grid);
        this.tex_gfxGlitch.push();
            //if(flipTextureFlag) p.scale(1.0, -1.0, 1.0); else p.scale(1.0, 1.0, 1.0);
            this.tex_gfxGlitch.shader(this.glitchShader);
            this.glitchShader.setUniform('u_deform_0', _mic_history_short.getCurrentValue());
            this.glitchShader.setUniform('u_deform_1', _mic_history_long.getMedianValue());
            this.glitchShader.setUniform('u_deform_2', _mic_history_short.getMedianValue());
            this.glitchShader.setUniform('u_deform_3', _mic_history_long.getFeedbackValue());
            this.glitchShader.setUniform('u_deform_4', _mic_history_short.getFeedbackValue());
            this.glitchShader.setUniform('u_time', this.p.millis());
            this.glitchShader.setUniform('u_resolution', [this.tex_gfxGlitch.width, this.tex_gfxGlitch.height]);
            this.glitchShader.setUniform('tex0', this.tex_gfxMain);
            this.tex_gfxGlitch.rect(-this.tex_gfxGlitch.width * 0.5, -this.tex_gfxGlitch.height * 0.5, this.tex_gfxGlitch.width, this.tex_gfxGlitch.height);
            this.tex_gfxGlitch.resetShader();
        this.tex_gfxGlitch.pop();
    }
    resizeGraphicsWorkaround(_g, _w, _h, _webglflag){
        if(_g === null || _g === undefined) {
            if(_webglflag) _g = this.p.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(
            '[Device, 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();
    }
}
								

									glitch.frag
									// ripped from https://glitch.com/edit/#!/psychedelic-webcam-shader?path=uniform.frag:127:1
// https://thebookofshaders.com/10/

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vTexCoord; // grab texcoords from vert shader
uniform sampler2D tex0;
uniform float u_time;
uniform float u_deform_0;
uniform float u_deform_1;
uniform float u_deform_2;
uniform float u_deform_3;
uniform float u_deform_4;
uniform vec2 u_resolution;

float random_orig (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}

float randomWithTime(vec2 st) {
  return fract(
    sin(
      u_time * 0.5453434 + dot(st.xy, vec2(12.9898,78.233))
    ) * 43758.5453123
  );
}

void main() {
  vec4 a = texture2D(tex0, vTexCoord);
  vec4 b = texture2D(
    tex0,
    vec2(
      vTexCoord[0] + (sin(vTexCoord[1] * (u_deform_1 + 5.0) * 100.0 + u_time * 0.01)) * u_deform_2,
      vTexCoord[1]
    )
  );
  vec4 c = texture2D(
    tex0,
    vec2(
      vTexCoord[0],
      vTexCoord[1] + (sin(vTexCoord[0] * (u_deform_3 + 5.0) * 100.0 + u_time * 0.011)) * u_deform_4
    )
  );
  float f = sqrt(u_deform_0);
  gl_FragColor = vec4(a.rgb * (1.0 - f) + b.rgb * f, 1.0);
}
								

									glitch.vert
									// our vertex data
attribute vec3 aPosition;
attribute vec2 aTexCoord;

// lets get texcoords just for fun! 
varying vec2 vTexCoord;

void main() {
  // copy the texcoords
  vTexCoord = aTexCoord;

  // copy the position data into a vec4, using 1.0 as the w component
  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

  // send the vertex information on to the fragment shader
  gl_Position = positionVec4;
}
								

									history.js
									class History{
    constructor(_numberOfItems, _initValue){
        this.feedback = _initValue;
        this.normFeedbackLevel = 0.92;
        this.items = [];
        this.currentItem = 0;
        this.median = _initValue;
        for(let i=0;i<_numberOfItems;i++) this.items[i] = _initValue;
    }
    update(_val){
        if(isNaN(_val)) return;
        if(_val>1.0) _val=1.0; if(_val<0.0) _val=0.0;
        _val-=0.01; if(_val<0.0) _val=0.0; _val*=1.01;
        this.currentItem = (this.currentItem + 1) % this.items.length;
        this.items[this.currentItem] = _val;
        this.median = 0;
        for(let i=0;i<this.items.length;i++) this.median += this.items[i];
        this.median /= this.items.length;
        this.feedback = this.feedback * this.normFeedbackLevel + _val * (1.0 - this.normFeedbackLevel);
    }
    getMedianValue(){return this.median;}
    getFeedbackValue(){return this.feedback;}
    getCurrentValue(){return this.items[this.currentItem];}
}
								

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