Pozytywka r30

music boxes and computational irreducibility

Parameters

gui		hide / show the GUI
size		width of the "tape" (number of rows representing successive tones)
pointer		hide / show the mouse pointer
lang		set the interface language
voices		sets the number of voices for the internal synthesizer
invert		inverts the function of empty and filled cells (the "invert" toggle)
continuous		enables or disables "staccato" mode [staccato=0] (the "continuous" toggle)
vol		sets the initial volume level of the instrument (global "vol" slider)
speed		sets the initial playback speed (global "speed" slider)

Description

Algorithmic order and mechanical musicality meet here in a single process. The miniature “Pozytywka r30” uses a one-dimensional cellular automaton by Stephen Wolfram, which – much like old music boxes or player pianos – creates rhythmic structures from sequences of tiny impulses. Each sound is the result of the next computational step, and the whole develops without the possibility of shortcuts or predicting the result. The work transforms a mathematical rule into a musical experience, where order and chance resonate together.

“Music Box r30” is an expanded version of another interactive miniature, simply titled “r30,” which is an addition to Paweł Janicki’s generative installation of the same name. The installation and the original miniature were created for Janicki’s solo exhibition “Point Nemo” in 2020.

The miniature references the mechanisms of music boxes, player pianos, and other similar musical devices, a combination of instruments and mechanical sequencers, controlled by perforated tapes or “discs,” and programming using punched cards (as is known, the latter have a long, pre-electronic tradition of use in the textile industry, dating back to the turn of the 18th/19th century, as carriers of programs controlling the operation of looms—an invention of Joseph-Marie Jacquard).

“Music Box r30” uses a one-dimensional cellular automaton, one of many developed by Steven Wolfram, a researcher of this type of graphical computational systems and the enfant terrible of modern mathematics. The rules by which the automaton operates can be easily changed by the user (all it takes is a few clicks in the appropriate section of the Miniatura graphical interface), but the underlying set of rules corresponds to Wolfram’s r30 automaton. This is a rather unique mechanism, one Wolfram devotes considerable attention to in his book A New Kind of Science. It is a fully-fledged computational system—it can be used to encode information and perform calculations. In other words, r30 is a Turing Machine—characterized by computational irreducibility—behavior in which, to learn the state of the automaton after a certain number of steps (generations), those steps must simply be executed (there is no computational “shortcut” that would allow us to learn the state of the evolving automaton, e.g., after 10,000 steps if the appropriate calculations are not performed in sequence).

Technical documentation

Parameters passed via URL

gui 0 or 1; default 1; hides/shows the graphical user interface panel
size width of the “tape” (number of rows representing successive pitches)
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)
synth 0 or 1; default 1; disables/enables the internal sound generator
ws address; disabled by default; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of Miniature and customization)
xws address; disabled by default; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of Miniature and customization)
midiinport disabled by default; MIDI port number for external control of Miniature (receiving messages)
midioutport disabled by default; MIDI port number for external control of Miniature (sending messages)
tpf “ticks per frame”; sets the “note” length expressed in MIDI clock ticks (useful for synchronization with an advanced MIDI system)
voices sets the number of voices of the internal synthesizer
lowestkey expressed in MIDI key numbers, the index of the lowest sound
invert 0 or 1; default 0; inverts the behavior of empty and filled cells (the “invert” toggle)
continuous 0 or 1; default 1; enables or disables “staccato” mode [staccato=0] (the “continuous” toggle)
clock 0 or 1; default 1; disables/enables the internal playback control clock
vol 0.0 … 1.0; sets the initial instrument volume level (global “vol” slider)
speed sets the initial playback speed (global “speed” slider)
tuning C c# D d# E F f# G g# A a# B; binary sequence of 12 numbers (0 or 1), where each indicates whether the corresponding pitch in the octave is enabled

Messages passed via WebSocket

Messages to which Miniature responds

continuous 0 or >0; default 1; enables/disables “staccato” mode [staccato=0] (the “continuous” toggle)
invert 0 or >0; default 0; inverts the behavior of empty and filled cells (the “invert” toggle)
speed sets the playback speed (global “speed” slider)
vol sets the instrument volume level (global “vol” slider)
key MIDI key (pitch), status (0/1); (tuning) disables/enables a given MIDI note
rule binary sequence (0/1) of 8 values, setting the rules for the cellular automaton
randomize sets random states for the automaton cells
update forces calculation of a new generation of the cellular automaton – a message useful for building custom synchronization mechanisms between Miniature and other applications or devices

Messages sent by Miniature

ca note pitch (0 … 127) amp (0.0 … 1.0) disabling/enabling a note of specified pitch and volume (amp 0.0 means disabling the note)
ca flush signals the closing of all played notes
ca invert inverts the meaning of empty and filled cells (the “invert” toggle)
ca continuous disabling/enabling the mode of connecting successive filled cells into continuous notes (the “continuous” toggle)
ca speed change of normalized playback speed (the “speed” slider)
ca vol change of normalized instrument volume (global “vol” slider)
ca key pitch (0 … 127) status (0/1); (tuning) change of key state
ca rule binary sequence (0/1) of 8 values, returning the rules for the cellular automaton
ca randomize setting random states for automaton cells (the “speed” slider)
ca update reports calculation of a new state of the cellular automaton (the message can be used to synchronize Miniature with other applications or devices)
ca tuning list of 12 binary values representing the tuning

MIDI

Messages to which Miniature responds

CC 010 on any channel enables/disables “staccato” mode [staccato=0] (the “continuous” toggle)
CC 011 on any channel inverts the behavior of empty and filled cells (the “invert” toggle)
CC 012 on any channel sets random states for the automaton cells
CC 013 on any channel sets the playback speed (global “speed” slider)
CC 014 on any channel change of normalized instrument volume (global “vol” slider)
CC 020 on any channel disables/enables the cellular automaton state for case 000
CC 021 on any channel disables/enables the cellular automaton state for case 001
CC 022 on any channel disables/enables the cellular automaton state for case 010
CC 023 on any channel disables/enables the cellular automaton state for case 011
CC 024 on any channel disables/enables the cellular automaton state for case 100
CC 025 on any channel disables/enables the cellular automaton state for case 101
CC 026 on any channel disables/enables the cellular automaton state for case 110
CC 027 on any channel disables/enables the cellular automaton state for case 111
CC 030 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the C pitch
CC 031 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the c# pitch
CC 032 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the D pitch
CC 033 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the d# pitch
CC 034 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the E pitch
CC 035 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the F pitch
CC 036 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the f# pitch
CC 037 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the G pitch
CC 038 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the g# pitch
CC 039 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the A pitch
CC 040 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the a# pitch
CC 041 on any channel (tuning) disables/enables (repeated in octaves within the supported range) the B pitch
Note Off on any channel (tuning) disables the cell column corresponding to the MIDI pitch parameter
Note On on any channel (tuning) enables the cell column corresponding to the MIDI pitch parameter

Messages sent by Miniature

CC 070 on channel 2 enabling/disabling “staccato” mode [staccato=0] (the “continuous” toggle)
CC 071 on channel 2 inverts the meaning of empty and filled cells (the “invert” toggle)
CC 072 on channel 2 reports setting random states for automaton cells (the “randomize” toggle)
CC 073 on channel 2 change of playback speed (the “speed” slider)
CC 074 on channel 2 change of instrument volume (global “vol” slider)
CC 080 on channel 2 cellular automaton state for case 000
CC 081 on channel 2 cellular automaton state for case 001
CC 082 on channel 2 cellular automaton state for case 010
CC 083 on channel 2 cellular automaton state for case 011
CC 084 on channel 2 cellular automaton state for case 100
CC 085 on channel 2 cellular automaton state for case 101
CC 086 on channel 2 cellular automaton state for case 110
CC 087 on channel 2 cellular automaton state for case 111
CC 090 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the C pitch
CC 091 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the c# pitch
CC 092 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the D pitch
CC 093 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the d# pitch
CC 094 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the E pitch
CC 095 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the F pitch
CC 096 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the f# pitch
CC 097 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the G pitch
CC 098 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the g# pitch
CC 099 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the A pitch
CC 100 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the a# pitch
CC 101 on channel 2 (tuning) disabling/enabling (repeated in octaves within the supported range) the B pitch
Note Off on channel 2 (tuning) reports the state of the cell column corresponding to the MIDI pitch parameter
Note On on channel 2 (tuning) reports the state of the cell column corresponding to the MIDI pitch parameter

Communication with MaxMSP

Messages to which Miniature responds

continuous 0 or >0; default 1; enables or disables “staccato” mode [staccato=0] (the “continuous” toggle)
invert 0 or >0; default 0; inverts the behavior of empty and filled cells (the “invert” toggle)
speed sets the playback speed (global “speed” slider)
vol sets the instrument volume level (global “vol” slider)
key MIDI key (pitch), status (0/1); (tuning) disables/enables a given MIDI note
rule binary sequence (0/1) of 8 values, setting the rules for the cellular automaton
randomize sets random states for the automaton cells
update forces calculation of a new generation of the cellular automaton – a message useful for building custom synchronization mechanisms between Miniature and other applications or devices

Messages sent by Miniature

ca note pitch (0 … 127) amp (0.0 … 1.0) disabling/enabling a note of specified pitch and volume (amp 0.0 means disabling the note)
ca flush signals the closing of all played notes
ca invert inverts the meaning of empty and filled cells (the “invert” toggle)
ca continuous disabling/enabling the mode of connecting successive filled cells into continuous notes (the “continuous” toggle)
ca speed change of normalized playback speed (the “speed” slider)
ca vol change of normalized instrument volume (global “vol” slider)
ca key pitch (0 … 127) status (0/1); (tuning) change of key state
ca rule binary sequence (0/1) of 8 values, returning the rules for the cellular automaton
ca randomize setting random states for automaton cells (the “speed” slider)
ca update reports calculation of a new state of the cellular automaton (the message can be used to synchronize Miniature with other applications or devices)
ca tuning list of 12 binary values representing the tuning

Source code

									index.html
									<!DOCTYPE html>
<html lang="">

<head>

  <meta charset="utf-8">
  <meta name="description" content="Pozytywka r30">
  <meta name="keywords" content="Steven Wolfram, cellular, automata, automaton, r30, music, audio, sound, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>"Pozytywka r30 (Musicbox r30)", Pawel Janicki, 2020-25, https://paweljanicki.jp</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>

  <script src="https://unpkg.com/tone"></script>
  <script src="CellularAutomaton1D.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
  <script src="gui.js"></script>
  <script src="ws.js"></script>
  <script src="midi.js"></script>
  <script src="synth.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</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){
  const maxIsDetected=detectMax();
  let ca={
    processor:null,invert:false,range:24,
    margin:10,cellWidth:10,
    continuousTriggering:false,triggers:[],
    clock:{auto:true}
  };
  let theme={bgColor:{r:0,g:0,b:255},pointer:true,speakerIcon:null};
  let guiContainer={
    storedTuning:[true,false,true,false,true,true,false,true,false,true,false,true],
    gui:null, isActive:true, lock:-1, lang:'en',
    handlers:{
      toMidiNoteSelector:{id:-1,label:{en:'',pl:''}},
      toContinuousModeToggle:{id:-1,label:{en:'continuous',pl:'łącz nuty'}},
      toInvertToggle:{id:-1,label:{en:'invert',pl:'odwróć'}},
      toRandomizeTrigger:{id:-1,label:{en:'randomize',pl:'losuj'}},
      toSpeedSlider:{id:-1,label:{en:'speed',pl:'tempo'}},
      toVolSlider:{id:-1,label:{en:'vol',pl:'głośność'}},
      toAutomatonSetup:{id:-1,label:{en:'',pl:''}}
    },
    getLabelByLang(_handler){
      let result='unhandled';
      switch(this.lang){
        case 'en': result=_handler.label.en; break;
        case 'pl': result=_handler.label.pl; break;
        default: console.log('[guiContainer, getLabelByLang] unhandled this.lang: '+this.lang);
      }
      return result;
    }
  };
  let webSocket={
    isActive:false,monitorInput:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let midi={
    isActive:false,
    processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1,
    channels:{in:-1,out:2}, // all midi channels are used as input
    lowestKey:36,ticks:0,ticksperframe:24,
    ccmap:{
      in:{
        continuous:10,
        invert:11,
        randomize:12,
        speed:13,
        vol:14,
        ca_rule_case_000:20,
        ca_rule_case_001:21,
        ca_rule_case_010:22,
        ca_rule_case_011:23,
        ca_rule_case_100:24,
        ca_rule_case_101:25,
        ca_rule_case_110:26,
        ca_rule_case_111:27,
        tuning_oct_0:30,
        tuning_oct_1:31,
        tuning_oct_2:32,
        tuning_oct_3:33,
        tuning_oct_4:34,
        tuning_oct_5:35,
        tuning_oct_6:36,
        tuning_oct_7:37,
        tuning_oct_8:38,
        tuning_oct_9:39,
        tuning_oct_10:40,
        tuning_oct_11:41
      },
      out:{
        continuous:70,
        invert:71,
        randomize:72,
        speed:73,
        vol:74,
        ca_rule_case_000:80,
        ca_rule_case_001:81,
        ca_rule_case_010:82,
        ca_rule_case_011:83,
        ca_rule_case_100:84,
        ca_rule_case_101:85,
        ca_rule_case_110:86,
        ca_rule_case_111:87,
        tuning_oct_0:90,
        tuning_oct_1:91,
        tuning_oct_2:92,
        tuning_oct_3:93,
        tuning_oct_4:94,
        tuning_oct_5:95,
        tuning_oct_6:96,
        tuning_oct_7:97,
        tuning_oct_8:98,
        tuning_oct_9:99,
        tuning_oct_10:100,
        tuning_oct_11:101
      }
    }
  };
  let synth = new Synth(); let defSpeed=12; let defVol=0.66;
  let useWorker=false;
  p.preload=function(){theme.speakerIcon=p.loadImage("speaker-svgrepo-com.svg");};
  p.setup=function(){
    p.handleUrlParams(); ca.processor = new CellularAutomaton1D(ca.range,20); ca.processor.randomize();
    for(let i=0;i<ca.processor.size;i++) ca.triggers[i]={prevStatus:false,activationTimetag:-1,isActive:false,midiNote:(midi.lowestKey+i),vel:0.75,isEnabled:(Math.random()>0.5),label:''};
    for(let i=0;i<ca.processor.size;i++) ca.triggers[i].label=synth.midiPitchToToneNoteName(ca.triggers[i].midiNote);
    p.createCanvas(innerWidth,innerHeight);
    p.initGui(); guiContainer.gui.forceBroadcast(); p.initWebSocket(); p.initMidi(); p.initMax();
    for(let i=0;i<guiContainer.storedTuning.length;i++) guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(i,guiContainer.storedTuning[i]);
    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.mobileLandscapeFullscreenWorkaround=function(){window.scroll(0, 0);}
  p.handleWorker=function(){p.redraw();}
  p.setBackground=function(_gfx,_r,_g,_b,_setDocumentBodyStyleBackground){_r=Math.floor(_r);_g=Math.floor(_g);_b=Math.floor(_b);_gfx.background(_r,_g,_b);if(_setDocumentBodyStyleBackground) document.body.style.background = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';};
  p.draw=function(){
    if((p.width!=innerWidth)||p.height!=innerHeight) p.resizeCanvas(innerWidth,innerHeight);
    p.setBackground(p,theme.bgColor.r,theme.bgColor.g,theme.bgColor.b,true);
    if(
      ca.clock.auto&&(p.frameCount%(guiContainer.gui.items[guiContainer.handlers.toSpeedSlider.id].getInvValue())===0)
    ) p.updateCA();
    p.drawCA(); guiContainer.gui.draw();
    if(synth.isActive&&(!synth.audioEnabled)){p.push();p.drawMutedIcon();p.pop();}
  };
  p.drawCA=function(){
    ca.cellWidth=Math.floor((p.width-2*ca.margin)/ca.processor.size);
    let numOfAvailableSegments=Math.floor((p.height-2*ca.margin)/ca.cellWidth);
    while(numOfAvailableSegments>=ca.processor.getMemorySize()){
      ca.processor.addEmptyGenerationToArena();//console.log("[drawCA] numOfAvailableSegments: "+numOfAvailableSegments+" ca.getMemorySize(): "+ca.getMemorySize());
    }
    let numOfVisibleMemoryUnits=numOfAvailableSegments-1;
    let n=numOfVisibleMemoryUnits-1;
    let verticalPadding=Math.floor((p.height-numOfAvailableSegments*ca.cellWidth)/2); let horizontalPadding=Math.floor((p.width-ca.processor.size*ca.cellWidth)/2);
    let b, alpha, luma, timeFactor; let firstState = ca.processor.getState(0);
    for(let j=0;j<ca.processor.size;j++){
      b=firstState[j]; if(ca.invert) b=!b;
      p.noFill();p.stroke(255,128);
      p.rect(
        horizontalPadding+ca.cellWidth*j+2,verticalPadding+2,ca.cellWidth-4,ca.cellWidth-4,
        3,3,3,3
      );
      if(b){
        if(ca.triggers[j].isEnabled){p.noStroke();p.fill(255);}else{{p.noStroke();p.fill(255,128);}}
        p.rect(
          horizontalPadding+ca.cellWidth*j+4,verticalPadding+4,ca.cellWidth-8,ca.cellWidth-8,
          3,3,3,3
        );
      }
    }
    for(let i=1;i<n;i++){
      let state = ca.processor.getState(i);
      for(let j=0;j<ca.processor.size;j++){
        b=state[j]; if(ca.invert) b=!b;
        if(b){
          if(ca.triggers[j].isEnabled){p.noStroke();p.fill(255);}else{{p.noStroke();p.fill(255,128);}}
          p.rect(
            horizontalPadding+ca.cellWidth*j+2,verticalPadding+ca.cellWidth*i+2,ca.cellWidth-4,ca.cellWidth-4,
            3,3,3,3
          );
        }
      }
    }
    p.textAlign(p.CENTER,p.CENTER); p.noStroke();
    for(let j=0;j<ca.processor.size;j++){
      if(ca.triggers[j].isEnabled){
        alpha=255; if(synth.isMidiPitchNormal(ca.triggers[j].midiNote)) luma=255; else luma=0;
      }else{
        if(synth.isMidiPitchNormal(ca.triggers[j].midiNote)){luma=255; alpha=128;}else{luma=0; alpha=60;}
      }
      p.fill(luma,alpha);
      p.rect(
        horizontalPadding+ca.cellWidth*j+2,verticalPadding+ca.cellWidth*n+2,ca.cellWidth-4,ca.cellWidth*2-4,
        3,3,3,3
      );
      if(ca.triggers[j].isActive&&ca.triggers[j].isEnabled){
        timeFactor = (p.millis()-ca.triggers[j].activationTimetag)/500.0;
        if(timeFactor>1.0) timeFactor=1.0; timeFactor=Math.sqrt(1.0-timeFactor);
        p.fill(200,200,255,timeFactor*255.0);
        p.rect(
          horizontalPadding+ca.cellWidth*j+2,verticalPadding+ca.cellWidth*n+2,ca.cellWidth-4,ca.cellWidth*2-4,
          3,3,3,3
        );
      }
      if(ca.triggers[j].isEnabled){
        alpha=255; if(synth.isMidiPitchNormal(ca.triggers[j].midiNote)) luma=0; else luma=255;
      }else{
        if(synth.isMidiPitchNormal(ca.triggers[j].midiNote)){luma=0; alpha=128;}else{luma=255; alpha=60;}
      }
      p.fill(luma,alpha);
      p.push();
        p.translate(horizontalPadding+ca.cellWidth*j+0.5*ca.cellWidth,verticalPadding+ca.cellWidth*n+0.5*ca.cellWidth*2);
        p.rotate(p.radians(-90));
        p.text(ca.triggers[j].label,0,0);
      p.pop();
    }
  };
  p.hitTestTriggers=function(_x,_y){
    let numOfAvailableSegments=Math.floor((p.height-2*ca.margin)/ca.cellWidth);
    let numOfVisibleMemoryUnits=numOfAvailableSegments-1;
    let n=numOfVisibleMemoryUnits-1;
    let verticalPadding=Math.floor((p.height-numOfAvailableSegments*ca.cellWidth)/2);
    let horizontalPadding=Math.floor((p.width-ca.processor.size*ca.cellWidth)/2);
    for(let j=0;j<ca.processor.size;j++)
      if((_x>(horizontalPadding+ca.cellWidth*j))&&(_x<(horizontalPadding+ca.cellWidth*j+ca.cellWidth))&&(_y>(verticalPadding+ca.cellWidth*n))&&(_y<(verticalPadding+ca.cellWidth*n+ca.cellWidth*2)))
        return j;
    return -1;
  };
  p.flushTriggers=function(){
    for(let i=0;i<ca.triggers.length;i++){
      if(ca.triggers[i].isActive){
        //if(midi.outputPort) p.sendMidiNoteOff(ca.triggers[i].midiNote);
        //if(maxIsDetected) p.sendMaxNoteOff(ca.triggers[i].midiNote);
        synth.noteOff(ca.triggers[i].midiNote);
        if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendMidiNote(ca.triggers[i].midiNote,0,midi.channels.out);}
        if(webSocket.isActive) webSocket.processor.safeSend(["ca","note",ca.triggers[i].midiNote,0]);
        if(maxIsDetected) window.max.outlet("ca","note",ca.triggers[i].midiNote,0);
        ca.triggers[i].isActive=false; ca.triggers[i].prevStatus=false;
      }
    }
    synth.flush();
    if(webSocket.isActive) webSocket.processor.safeSend(["ca","flush"]);
    if(maxIsDetected) window.max.outlet("ca","flush");
  }
  p.updateTriggers=function(){
    let n=Math.floor((p.height-2*ca.margin)/ca.cellWidth)-2; if(n>=ca.processor.getMemorySize()) n=ca.processor.getMemorySize()-1;
    let state = ca.processor.getState(n); let b;
    for(let i=0;i<ca.processor.size;i++){
      b=state[i]; if(ca.invert) b=!b;
      if(b){
        if(ca.triggers[i].isActive){
          if(!ca.continuousTriggering){
            if(ca.triggers[i].isEnabled){
              ca.triggers[i].activationTimetag=p.millis();
              if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendMidiNote(ca.triggers[i].midiNote,0,midi.channels.out);}
              synth.noteOff(ca.triggers[i].midiNote);
              if(webSocket.isActive) webSocket.processor.safeSend(["ca","note",ca.triggers[i].midiNote,0]);
              if(maxIsDetected) window.max.outlet("ca","note",ca.triggers[i].midiNote,0);
              if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendMidiNote(ca.triggers[i].midiNote,ca.triggers[i].vel,midi.channels.out);}
              synth.noteOn(ca.triggers[i].midiNote,ca.triggers[i].vel);
              if(webSocket.isActive) webSocket.processor.safeSend(["ca","note",ca.triggers[i].midiNote,ca.triggers[i].vel]);
              if(maxIsDetected) window.max.outlet("ca","note",ca.triggers[i].midiNote,ca.triggers[i].vel);
            }
          }
        }else{
          ca.triggers[i].isActive=true;
          if(ca.triggers[i].isEnabled) ca.triggers[i].activationTimetag=p.millis();
          if(ca.triggers[i].isEnabled){
            if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendMidiNote(ca.triggers[i].midiNote,ca.triggers[i].vel,midi.channels.out);}
            synth.noteOn(ca.triggers[i].midiNote,ca.triggers[i].vel);
            if(webSocket.isActive) webSocket.processor.safeSend(["ca","note",ca.triggers[i].midiNote,ca.triggers[i].vel]);
            if(maxIsDetected) window.max.outlet("ca","note",ca.triggers[i].midiNote,ca.triggers[i].vel);
          }
        }
      }else{
        if(ca.triggers[i].isActive){
          ca.triggers[i].isActive=false;
          if(ca.triggers[i].isEnabled){
            if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendMidiNote(ca.triggers[i].midiNote,0,midi.channels.out);}
            synth.noteOff(ca.triggers[i].midiNote);
            if(webSocket.isActive) webSocket.processor.safeSend(["ca","note",ca.triggers[i].midiNote,0]);
            if(maxIsDetected) window.max.outlet("ca","note",ca.triggers[i].midiNote,0);
          }
        }//else{/*nothing to do*/}
      }
      ca.triggers[i].prevStatus=b; // I think, this is useless
    }
  };
  p.closeOrphanTriggers=function(){
    for(let i=0;i<ca.triggers.length;i++){
      if(ca.triggers[i].isActive&&(!ca.triggers[i].isEnabled)){
        ca.triggers[i].isActive=false;
        if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendMidiNote(ca.triggers[i].midiNote,0,midi.channels.out);}
        synth.noteOff(ca.triggers[i].midiNote);
        if(webSocket.isActive) webSocket.processor.safeSend(["ca","note",ca.triggers[i].midiNote,0]);
        if(maxIsDetected) window.max.outlet("ca","note",ca.triggers[i].midiNote,0);
      }
    }
  };
  p.hitTestCurrentCAState=function(_x,_y){
    let n=Math.floor((p.height-2*ca.margin)/ca.cellWidth);
    let verticalPadding=Math.floor((p.height-n*ca.cellWidth)/2);
    let horizontalPadding=Math.floor((p.width-ca.processor.size*ca.cellWidth)/2);
    for(let j=0;j<ca.processor.size;j++)
      if((_x>(horizontalPadding+ca.cellWidth*j))&&(_x<(horizontalPadding+ca.cellWidth*j+ca.cellWidth))&&(_y>(verticalPadding))&&(_y<(verticalPadding+ca.cellWidth)))
        return j;
    return -1;
  };
  p.updateCA=function(){ca.processor.shift(); ca.processor.calc(); p.updateTriggers(); p.closeOrphanTriggers();};
  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(){p.unifiedTactileEventRelease();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){p.unifiedTactileEventRelease();p.unifiedTactileEventClick();return false;};
  p.unifiedTactileEventRelease=function(){
    let b=false;
    let idx1=p.hitTestCurrentCAState(p.mouseX,p.mouseY);
    if(idx1>=0){ca.processor.arena[0][idx1]=!ca.processor.arena[0][idx1]; b=true;}
    let idx2=p.hitTestTriggers(p.mouseX,p.mouseY);
    if((idx2>=0)&&!b){
      if(ca.triggers[idx2].isEnabled&&ca.triggers[idx2].isActive) ca.triggers[idx2].isActive=false;
      ca.triggers[idx2].isEnabled=!ca.triggers[idx2].isEnabled;
      if(webSocket.isActive) webSocket.processor.safeSend(["ca","key",ca.triggers[idx2].midiNote,p.v2i(ca.triggers[idx2].isEnabled)]);
      if(maxIsDetected) window.max.outlet("ca","key",ca.triggers[idx2].midiNote,p.v2i(ca.triggers[idx2].isEnabled));
      b=true; // ???
    }
    guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);
  };
  p.unifiedTactileEventClick=function(){
    if((!synth.audioEnabled)&&synth.isActive){synth.init(-1);guiContainer.gui.forceBroadcast();return;}
    if((p.hitTestCurrentCAState(p.mouseX,p.mouseY)>=0)||(p.hitTestTriggers(p.mouseX,p.mouseY)>=0)){
      // nothing to do
    }else{
      if(guiContainer.isActive){
        if(guiContainer.lock<0){
          if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){guiContainer.gui.setBackgroundPanelVisibility(false); guiContainer.gui.disableAllItems(); if(!theme.pointer) p.noCursor(); guiContainer.isActive=false;}
        }
      }else{
        guiContainer.gui.enableAllItems(); guiContainer.isActive=true; p.cursor();
        guiContainer.gui.setBackgroundPanelVisibility(true);
      }
    }
  };
  p.drawMutedIcon=function(){
    let tf1=1.0+Math.sin(p.millis()*0.01)*0.2;
    let tf2=1.0+Math.sin(p.millis()*0.017)*0.1;
    let tf3=p.millis()*0.0001;
    let sz=p.width; if(p.width>p.height) sz=p.height;
    let scl=sz/theme.speakerIcon.width*0.4;
    p.noStroke(); p.fill(128,128); p.rect(0,0,p.width,p.height);
    p.fill(30,70,255,128);p.circle(
      p.width*0.5,
      p.height*0.5,
      theme.speakerIcon.width*scl*1.1*tf2
    );
    p.image(
      theme.speakerIcon,
      p.width*0.5-theme.speakerIcon.width*scl*0.5*tf2,
      p.height*0.5-theme.speakerIcon.height*scl*0.5*tf2,
      theme.speakerIcon.width*scl*tf2,
      theme.speakerIcon.height*scl*tf2
    );
    p.noFill();p.stroke(255,0,0,128);p.strokeWeight(10);
    p.push();
      p.translate(p.width*0.5,p.height*0.5);
      p.rotate(tf3);
      p.line(
        -theme.speakerIcon.width*scl*0.6*tf1,
        -theme.speakerIcon.width*scl*0.6*tf1,
        theme.speakerIcon.width*scl*0.6*tf1,
        theme.speakerIcon.width*scl*0.6*tf1
      );
    p.pop();
    //p.noStroke(); p.fill(128,128); p.rect(0,0,p.width,p.height);
    //let size=p.width; if(p.width>p.height) size=p.height; size*=0.2;
    //p.textAlign(p.CENTER,p.CENTER);
    //p.fill(255,128); p.textSize(size*0.5); p.text("tap",p.width*0.5,p.height*0.5-size);
    //p.fill(0,255); p.textSize(size); p.text("🔇",p.width*0.5,p.height*0.5);
  };
  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; else midi.isActive=false;
    if(midi.inputPortIndex>=0){
      midi.processor.onCC=function(_midiEvent){p.handleIncomingMidiCCMessages(_midiEvent);};
      midi.processor.onNoteOn=function(_midiEvent){p.enableTriggerByMidiNoteNumber(_midiEvent.note.number, 1);}; // _midiEvent.message.channel // _midiEvent.note.attack
      midi.processor.onNoteOff=function(_midiEvent){p.enableTriggerByMidiNoteNumber(_midiEvent.note.number, 0);};
      midi.processor.onClock=function(_midiEvent){if((midi.ticks%midi.ticksperframe)===0) p.updateCA(); midi.ticks+=1;};
      //midi.processor.onStart=function(_midiEvent){console.log(_midiEvent);};
      //midi.processor.onContinue=function(_midiEvent){console.log(_midiEvent);};
      midi.processor.onStop=function(_midiEvent){midi.ticks=0;};
    }
  };
  p.handleIncomingMidiCCMessages=function(_midiEvent){
    switch(_midiEvent.controller.number){
      case midi.ccmap.in.continuous: guiContainer.gui.items[guiContainer.handlers.toContinuousModeToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.invert: guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.speed: guiContainer.gui.items[guiContainer.handlers.toSpeedSlider.id].setNormValue(_midiEvent.rawValue/127.0); break;
      case midi.ccmap.in.vol: guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setNormValue(_midiEvent.rawValue/127.0); break;
      case midi.ccmap.in.randomize: guiContainer.gui.items[guiContainer.handlers.toRandomizeTrigger.id].trigger(); break;
      case midi.ccmap.in.tuning_oct_0: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(0,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_1: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(1,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_2: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(2,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_3: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(3,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_4: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(4,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_5: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(5,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_6: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(6,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_7: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(7,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_8: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(8,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_9: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(9,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_10: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(10,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_11: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(11,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.ca_rule_case_000: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("000", _status); break;
      case midi.ccmap.in.ca_rule_case_001: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("001", _status); break;
      case midi.ccmap.in.ca_rule_case_010: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("010", _status); break;
      case midi.ccmap.in.ca_rule_case_011: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("011", _status); break;
      case midi.ccmap.in.ca_rule_case_100: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("100", _status); break;
      case midi.ccmap.in.ca_rule_case_101: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("101", _status); break;
      case midi.ccmap.in.ca_rule_case_110: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("110", _status); break;
      case midi.ccmap.in.ca_rule_case_111: guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setCaseStatus("111", _status); break;
      default: console.log("[p.handleIncomingMidiCCMessages] unhandled _midiEvent.controller.number: "+_midiEvent.controller.number);
    }
  };
  p.initWebSocket=function(){
    if(!webSocket.isActive) return;
    webSocket.processor.init(webSocket.address,function(_msg){
      if(_msg===null) return; if(_msg===undefined) return; if(_msg.data===null) return; if(_msg.data===undefined) return;
      if(webSocket.monitorInput) console.log("[p.initWebSocket/handler] monitor: "+_msg.data);
      let arr=_msg.data.split(" ");
      if(arr===null) return; if(arr===undefined) return;
      if(arr.length===2){
        switch(arr[0]){
          case "invert": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].setValue(arr[1]);
            }
          break;
          case "continuous": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toContinuousModeToggle.id].setValue(arr[1]);
            }
          break;
          case "speed":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){
              if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
              guiContainer.gui.items[guiContainer.handlers.toSpeedSlider.id].setNormValue(arr[1]);
            }
          break;
          case "vol":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){
              if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
              guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setNormValue(arr[1]);
            }
          break;
          default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
        }
      }else{
        if(arr.length===3){
          switch(arr[0]){
            case "key":
              arr[1]=parseInt(arr[1]); arr[2]=parseInt(arr[2]);
              if(!isNaN(arr[1])&&!isNaN(arr[2])) p.enableTriggerByMidiNoteNumber(arr[1],arr[2]);
            break;
            default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
          }
        }else{
          if(arr.length===9){
            switch(arr[0]){
              case "rule": 
                arr[1]=parseInt(arr[1]);arr[2]=parseInt(arr[2]);arr[3]=parseInt(arr[3]);arr[4]=parseInt(arr[4]);arr[5]=parseInt(arr[5]);arr[6]=parseInt(arr[6]);arr[7]=parseInt(arr[7]);arr[8]=parseInt(arr[8]);
                if(isNaN(arr[1])||isNaN(arr[2])||isNaN(arr[3])||isNaN(arr[4])||isNaN(arr[5])||isNaN(arr[6])||isNaN(arr[7])||isNaN(arr[8])){
                  // bad data
                }else{
                  guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setRule(arr[1],arr[2],arr[3],arr[4],arr[5],arr[6],arr[7],arr[8]);
                }
              break;
              default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
            }
          }
          else{
            if(arr.length===1){
              switch(arr[0]){
                case "randomize": 
                  guiContainer.gui.items[guiContainer.handlers.toRandomizeTrigger.id].randomize();
                break;
                case "update": 
                  p.updateCA();
                break;
                default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
              }
            }
          }
        }
      }
    });
  };
  p.initGui=function(){
    //guiContainer.gui = new GUI(p,false);
    guiContainer.gui = new GUI(p,true,420,330,false);
    guiContainer.gui.setBackgroundPanelRect(20,20,380,210,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_c1ds_aut = new SimpleCellularAutomaton1DSetup(30,150,45,30,GUI.ORIENTATION_HORIZONTAL);
    gui_c1ds_aut.onChange=function(_id,_key,_status){
      let arr=["rule"]; let cases=guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].cases;
      for(let i=0;i<cases.length;i++){
        ca.processor.setCase(cases[i].bcode[0],cases[i].bcode[1],cases[i].bcode[2],cases[i].status);
        arr[arr.length]=p.v2i(cases[i].status);
      }
      if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){
        if(cases.length===8){
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_000,p.v2i(cases[0].status),midi.channels.out);
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_001,p.v2i(cases[1].status),midi.channels.out);
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_010,p.v2i(cases[2].status),midi.channels.out);
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_011,p.v2i(cases[3].status),midi.channels.out);
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_100,p.v2i(cases[4].status),midi.channels.out);
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_101,p.v2i(cases[5].status),midi.channels.out);
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_110,p.v2i(cases[6].status),midi.channels.out);
          midi.processor.sendCC(midi.ccmap.out.ca_rule_case_111,p.v2i(cases[7].status),midi.channels.out);
        }else{console.log("[p.initGui/gui_c1ds_aut.onChange] bad number of cases (should be equal 8), cases.length: "+cases.length);}
      }
      if(webSocket.isActive) webSocket.processor.safeSend(["ca"].concat(arr));
      if(maxIsDetected) window.max.outlet.apply(window.max,["ca"].concat(arr));
    };
    guiContainer.handlers.toAutomatonSetup.id=guiContainer.gui.addItem(gui_c1ds_aut);
    let gui_mns_tng = new SimpleMidiNotesSelector(30,190,30,30,GUI.ORIENTATION_HORIZONTAL,36,12);
    gui_mns_tng.onChange=function(_id,_key,_status){p.setTuningFromInternalGui(_id,_key);};
    gui_mns_tng.setKeyAccessedByIndex(0,true);gui_mns_tng.setKeyAccessedByIndex(2,true);gui_mns_tng.setKeyAccessedByIndex(4,true);gui_mns_tng.setKeyAccessedByIndex(5,true);gui_mns_tng.setKeyAccessedByIndex(7,true);gui_mns_tng.setKeyAccessedByIndex(9,true);gui_mns_tng.setKeyAccessedByIndex(11,true);
    guiContainer.handlers.toMidiNoteSelector.id=guiContainer.gui.addItem(gui_mns_tng);
    let gui_tgl_cnt = new SimpleToggle(130,30,90,30,GUI.ORIENTATION_HORIZONTAL,true,guiContainer.getLabelByLang(guiContainer.handlers.toContinuousModeToggle));
    gui_tgl_cnt.onChange=function(_id,_v){
      ca.continuousTriggering=(_v>0);
      if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendCC(midi.ccmap.out.continuous,p.v2i(_v),midi.channels.out);}
      if(webSocket.isActive) webSocket.processor.safeSend(["ca","continuous",p.v2i(_v)]);
      if(maxIsDetected) window.max.outlet("ca","continuous",p.v2i(_v));
    };
    guiContainer.handlers.toContinuousModeToggle.id=guiContainer.gui.addItem(gui_tgl_cnt);
    let gui_tgl_inv = new SimpleToggle(30,30,90,30,GUI.ORIENTATION_HORIZONTAL,false,guiContainer.getLabelByLang(guiContainer.handlers.toInvertToggle));
    gui_tgl_inv.onChange=function(_id,_v){
      ca.invert=(_v>0);
      if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendCC(midi.ccmap.out.invert,p.v2i(_v),midi.channels.out);}
      if(webSocket.isActive) webSocket.processor.safeSend(["ca","invert",p.v2i(_v)]);
      if(maxIsDetected) window.max.outlet("ca","invert",p.v2i(_v));
    };
    guiContainer.handlers.toInvertToggle.id=guiContainer.gui.addItem(gui_tgl_inv);
    let gui_trg_rnd = new SimpleTrigger(230,30,90,30,GUI.ORIENTATION_HORIZONTAL,guiContainer.getLabelByLang(guiContainer.handlers.toRandomizeTrigger));
    gui_trg_rnd.onTrigger=function(_id){
      ca.processor.randomize();
      if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendCC(midi.ccmap.out.randomize,127,midi.channels.out);}
      if(webSocket.isActive) webSocket.processor.safeSend(["ca","randomize"]);
      if(maxIsDetected) window.max.outlet("ca","randomize");
    };
    guiContainer.handlers.toRandomizeTrigger.id=guiContainer.gui.addItem(gui_trg_rnd);
    let gui_sld_f = new SimpleSlider(30,70,360,30,GUI.ORIENTATION_HORIZONTAL,false,4,18,defSpeed,guiContainer.getLabelByLang(guiContainer.handlers.toSpeedSlider));
    gui_sld_f.onChange=function(_id,_v){
      if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendCC(midi.ccmap.out.speed,Math.ceil(_v*127.0),midi.channels.out);}
      if(webSocket.isActive) webSocket.processor.safeSend(["ca","speed",_v]);
      if(maxIsDetected) window.max.outlet("ca","speed",_v);
    };
    guiContainer.handlers.toSpeedSlider.id=guiContainer.gui.addItem(gui_sld_f);
    let gui_sld_vol = new SimpleSlider(30,110,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,defVol,guiContainer.getLabelByLang(guiContainer.handlers.toVolSlider));
    gui_sld_vol.onChange=function(_id,_v){
      synth.ampFactor=_v;
      if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){midi.processor.sendCC(midi.ccmap.out.vol,Math.ceil(_v*127.0),midi.channels.out);}
      if(webSocket.isActive) webSocket.processor.safeSend(["ca","vol",_v]);
      if(maxIsDetected) window.max.outlet("ca","vol",_v);
    };
    guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
    if(guiContainer.isActive){
      guiContainer.gui.enableAllItems(); p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true);
    }else{
      guiContainer.gui.disableAllItems();
      if(guiContainer.pointer) p.noCursor();
      guiContainer.gui.setBackgroundPanelVisibility(false);
    }
    //guiContainer.gui.forceBroadcast();
  };
  p.enableTriggerByMidiNoteNumber=function(_midiNoteNumber, _enabled){
    if(isNaN(_midiNoteNumber)||isNaN(_enabled)) return;
    _enabled=(_enabled>0); _midiNoteNumber=Math.floor(_midiNoteNumber); _midiNoteNumber-=midi.lowestKey;
    if((_midiNoteNumber>=0)&&(_midiNoteNumber<ca.triggers.length)) ca.triggers[j].isEnabled=_enabled;
  }
  p.setTuningFromInternalGui=function(_id,_key){
    let isPressed, note; let arr=["tuning"];
    for(let i=0;i<guiContainer.gui.items[_id].keys.length;i++){
      note=guiContainer.gui.items[_id].keys[i].midiKey%12;
      isPressed=guiContainer.gui.items[_id].keys[i].isPressed;
      arr[arr.length]=p.v2i(isPressed);
      for(let j=0;j<ca.triggers.length;j++){
        if((ca.triggers[j].midiNote%12)===note){
          if(ca.triggers[j].isEnabled!==isPressed){
            if(ca.triggers[j].isEnabled&&ca.triggers[j].isActive){
              //if(synth.audioEnabled&&synth.isActive) p.sendToneNoteOff(ca.triggers[j].midiNote);
              //if(midi.outputPort) p.sendMidiNoteOff(ca.triggers[j].midiNote);
              //if(maxIsDetected) p.sendMaxNoteOff(ca.triggers[i].midiNote);
              ca.triggers[j].isActive=false;
            }
            ca.triggers[j].isEnabled=isPressed;
            if(isPressed) ca.triggers[j].vel=0.75;
          }
        }
      }
    }
    if(midi.isActive&&midi.processor.outputPort&&midi.processor.isEnabled){
      if(arr.length===13){
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_0,p.v2i(arr[1]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_1,p.v2i(arr[2]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_2,p.v2i(arr[3]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_3,p.v2i(arr[4]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_4,p.v2i(arr[5]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_5,p.v2i(arr[6]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_6,p.v2i(arr[7]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_7,p.v2i(arr[8]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_8,p.v2i(arr[9]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_9,p.v2i(arr[10]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_10,p.v2i(arr[11]),midi.channels.out);
        midi.processor.sendCC(midi.ccmap.out.tuning_oct_11,p.v2i(arr[12]),midi.channels.out);
      }else{console.log("[p.setTuningFromInternalGui] bad arr.length (should be equal 13), arr.length: "+arr.length);}
    }
    if(webSocket.isActive) webSocket.processor.safeSend(["ca"].concat(arr));
    if(maxIsDetected) window.max.outlet.apply(window.max,["ca"].concat(arr));
  };
  p.initMax=function(){
    if(!maxIsDetected) return;
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    window.max.bindInlet('update',function(){if(!clock.auto) p.updateCA();});
    window.max.bindInlet('invert',function(_v){if(isNaN(_v)) return; if(_v>0) _v=1; else _v=0; guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].setValue(_v);});
    window.max.bindInlet('continuous',function(_v){if(isNaN(_v)) return; if(_v>0) _v=1; else _v=0; guiContainer.gui.items[guiContainer.handlers.toContinuousModeToggle.id].setValue(_v);});
    window.max.bindInlet('randomize',function(){guiContainer.gui.items[guiContainer.handlers.toRandomizeTrigger.id].trigger();});
    window.max.bindInlet('speed',function(_v){if(isNaN(_v)) return; if(_v<0.0){_v=0.0;}else{if(_v>1.0) _v=1;} guiContainer.gui.items[guiContainer.handlers.toSpeedSlider.id].setNormValue(_v);});
    window.max.bindInlet('vol',function(_v){if(isNaN(_v)) return; if(_v<0.0){_v=0.0;}else{if(_v>1.0) _v=1;} guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setNormValue(_v);});
    window.max.bindInlet('key',function(_midiNote, _enabled){p.enableTriggerByMidiNoteNumber(_midiNote, _enabled);});
    window.max.bindInlet('rule',function(_v000,_v001,_v010,_v011,_v100,_v101,_v110,_v111){
      if(isNaN(_v000)) return; if(_v000>0) _v000=true; else _v000=false; if(isNaN(_v001)) return; if(_v001>0) _v001=true; else _v001=false; if(isNaN(_v010)) return; if(_v010>0) _v010=true; else _v010=false; if(isNaN(_v011)) return; if(_v011>0) _v011=true; else _v011=false; if(isNaN(_v100)) return; if(_v100>0) _v100=true; else _v100=false; if(isNaN(_v101)) return; if(_v101>0) _v101=true; else _v101=false; if(isNaN(_v110)) return; if(_v110>0) _v110=true; else _v110=false; if(isNaN(_v111)) return; if(_v111>0) _v111=true; else _v111=false;
      guiContainer.gui.items[guiContainer.handlers.toAutomatonSetup.id].setRule(_v000,_v001,_v010,_v011,_v100,_v101,_v110,_v111);
    });
  }
  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("pointer" in urlparams){let v=parseInt(urlparams.pointer); if(!isNaN(v)){if(v>0) p.cursor(); else p.noCursor(); theme.pointer=(v>0);} console.log("[p.handleUrlParams] pointer: "+theme.pointer);}
        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("midiinchn" in urlparams){if(!isNaN(urlparams.midiinchn)){midi.chnin=1+(Math.abs(Math.floor(urlparams.midiinchn)-1)%16);}} // 1 ... 16
        if("midioutport" in urlparams){let v=parseInt(urlparams.midioutport); if(!isNaN(v)){midi.outputPortIndex=v; console.log("[p.handleUrlParams] MIDI output port index: "+v);}}
        //if("midioutchn" in urlparams){if(!isNaN(urlparams.midioutchn)){midi.chnout=1+(Math.abs(Math.floor(urlparams.midioutchn)-1)%16);}} // 1 ... 16
        if("synth" in urlparams){let v=parseInt(urlparams.synth); if(!isNaN(v)){synth.isActive=(v>0);} console.log("[p.handleUrlParams] synth: "+synth.isActive);}
        if("size" in urlparams){let v=parseInt(urlparams.size); if(!isNaN(v)){v=Math.floor(v); if(v>=3) ca.range=v;} console.log("[p.handleUrlParams] size: "+ca.range);}
        if("voices" in urlparams){let v=parseInt(urlparams.voices); if(!isNaN(v)){v=Math.floor(v); if(v>=1) synth.setPolyphonyBeforeInit(_v);} console.log("[p.handleUrlParams] voices: "+v);}
        if("tpf" in urlparams){let v=parseInt(urlparams.tpf); if(!isNaN(v)){v=Math.floor(v); if(v>=1) midi.ticksperframe=v;} console.log("[p.handleUrlParams] ticks per frame: "+v);}
        if("lowestkey" in urlparams){let v=parseInt(urlparams.lowestkey); if(!isNaN(v)){v=Math.floor(v); if(_v>=0) midi.lowestKey=v;} console.log("[p.handleUrlParams] lowest key: "+v);}
        if("invert" in urlparams){let v=parseInt(urlparams.invert); if(!isNaN(v)){v=(v>0); ca.invert=v;} console.log("[p.handleUrlParams] invert: "+v);}
        if("continuous" in urlparams){let v=parseInt(urlparams.continuous); if(!isNaN(v)){v=(v>0); ca.continuousTriggering=v;} console.log("[p.handleUrlParams] continuous: "+v);}
        if("clock" in urlparams){let v=parseInt(urlparams.clock); if(!isNaN(v)){v=(v>0); midi.clock.auto=v;} console.log("[p.handleUrlParams] clock: "+v);}
        if("speed" in urlparams){let v=parseFloat(urlparams.speed); if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; v=4+Math.ceil(v*8.0); defSpeed=v;} console.log("[p.handleUrlParams] speed: "+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; defVol=v;} console.log("[p.handleUrlParams] vol: "+v);}
        if("tuning" in urlparams){
          let v=parseInt(urlparams.tuning);
          if(!isNaN(v)){
            let s=""+v; for(let i=0;i<guiContainer.storedTuning.length;i++) guiContainer.storedTuning[i]=false;
            for(let i=0;i<s.length();i++){let n=s.length()-i-1; if((n>=0)&&(n<s.length())){if(s.charAt(n)!=='0')guiContainer.storedTuning[n]=true;}else{break;}}
            let b=true; for(let i=0;i<guiContainer.storedTuning.length;i++) if(guiContainer.storedTuning[i]){b=false;break;}
            if(b) for(let i=0;i<guiContainer.storedTuning.length;i++) guiContainer.storedTuning[i]=true;
          }
        }
      }
    }catch(_e){console.log("[p.handleUrlParams] _e: "+_e);}
  };
  p.v2i=function(_v){if(_v>0) return 1; return 0;};
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

									CellularAutomaton1D.js
									class CellularAutomaton1D{
  static get RULE_R30(){return [
    /*0*/ {code:"000",status:false},
    /*1*/ {code:"001",status:true},
    /*2*/ {code:"010",status:true},
    /*3*/ {code:"011",status:false},
    /*4*/ {code:"100",status:true},
    /*5*/ {code:"101",status:false},
    /*6*/ {code:"110",status:false},
    /*7*/ {code:"111",status:false}
  ];}
  constructor(_size, _memory){
    if(_size<3) _size=3; if(_memory<2) _memory=2;
    this.size=_size; this.arena=[];
    this.rule=CellularAutomaton1D.RULE_R30;
    for(let i=0;i<_memory;i++) this.addEmptyGenerationToArena();
  }
  getMemorySize(){return this.arena.length;}
  addEmptyGenerationToArena(){this.arena[this.arena.length]=this.makeEmptyGeneration();}
  makeEmptyGeneration(){let gen=[]; for(let j=0;j<this.size;j++) gen[j]=false; return gen;}
  setRule(_status1,_status2,_status3,_status4,_status5,_status6,_status7,_status8){
    this.setCase(0,0,0,_status1);
    this.setCase(0,0,1,_status2);
    this.setCase(0,1,0,_status3);
    this.setCase(0,1,1,_status4);
    this.setCase(1,0,0,_status5);
    this.setCase(1,0,1,_status6);
    this.setCase(1,1,0,_status7);
    this.setCase(1,1,1,_status8);
  }
  setCase(_b1,_b2,_b3,_status){
    _b1=(_b1>0);_b2=(_b2>0);_b3=(_b3>0);_status=(_status>0);
    this.rule[this.detectCase(_b1,_b2,_b3)].status=_status;
  }
  getState(_m){return this.arena[_m];}
  getCurrentState(){return getState(0);}
  detectCase(_b1,_b2,_b3){
    _b1=(_b1>0);_b2=(_b2>0);_b3=(_b3>0);
    if(_b1){
      if(_b2){
          if(_b3){
            return 7; // "111"
          }else{
            return 6; // "110"
          }
      }else{
        if(_b3){
          return 5; // "101"
        }else{
          return 4; // "100"
        }
      }
    }else{
      if(_b2){
          if(_b3){
            return 3; // "011"
          }else{
            return 2; // "010"
          }
      }else{
        if(_b3){
          return 1; // "001"
        }else{
          return 0; // "000"
        }
      }
    }
  }
  clear(){
    let m=this.getMemorySize();
    for(let i=m-1;i>0;i--) for(let j=0;j<this.size;j++) this.arena[i][j]=false;
  }
  calc(){
    let a,b,c,dc;
    for(let j=0;j<this.size;j++){
      a=(j-1+this.size)%this.size;b=j;c=(j+1)%this.size;
      dc=this.detectCase(this.arena[1][a],this.arena[1][b],this.arena[1][c]);
      this.arena[0][j]=this.rule[dc].status;
    }
  }
  randomize(){
    for(let i=0;i<this.size;i++) this.arena[0][i]=(Math.random()>0.5);
  }
  shift(){
    let m=this.getMemorySize();
    for(let i=m-1;i>0;i--) for(let j=0;j<this.size;j++) this.arena[i][j]=this.arena[i-1][j];
  }
  createArray(_size){ // helper function creating x-dementional arrays createArray(x, y, z...);
    let arr = new Array(_size||0), i=_size;
    if(arguments.length>1){
      let args = Array.prototype.slice.call(arguments, 1);
      while(i--) arr[_size-1-i]=this.createArray.apply(this, args);
    }
    return arr;
  }
}



								

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

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

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

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

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

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

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

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

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

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

									synth.js
									class Synth{
  constructor(){
    this.audioEnabled=false; this.isActive=true; this.toneLatency="playback"; // "interactive", "playback", "balanced", number
    this.tonePolySynth=null; this.polyphony=12;
    this.ampFactor=0.75; this.defaultAmp=0.75;
    //this.tuning=[];
  }
  setPolyphonyBeforeInit(_polyphony){
    if(isNaN(_polyphony)||(_polyphony===null)||(_polyphony===undefined)) return;
    _polyphony=Math.floor(_polyphony); if(_polyphony<1) return;
    this.polyphony=_polyphony;
  }
  init(_polyphony){
    if((!this.isActive)||this.audioEnabled) return;
    const myContext = new AudioContext({latencyHint:this.toneLatency}); Tone.setContext(myContext);
    if(isNaN(_polyphony)||(_polyphony===null)||(_polyphony===undefined)){
      _polyphony=this.polyphony;
    }else{
      _polyphony=Math.floor(_polyphony);
      if(_polyphony<1) _polyphony=this.polyphony; else this.polyphony=_polyphony;
    }
    this.tonePolySynth = new Tone.PolySynth(
      Tone.Synth,{
        maxPolyphony: _polyphony, oscillator: {partials: [0,2,3],},
        envelope:{attack:0.01, decay:0.1, sustain:0.4, release:0.4, attackCurve:"exponential", decayCurve:"linear", releaseCurve:"exponential",} // liner, exponential
	  	}
    ).toDestination();
    this.tonePolySynth.maxPolyphony=_polyphony; this.audioEnabled=true;
    console.log("[Synth, init] internal synth enabled, polyphony: "+this.polyphony+", latency: "+this.toneLatency);
  }
  isMidiPitchNormal(_p){_p=_p%12; if((_p===0)||(_p===2)||(_p===4)||(_p===5)||(_p===7)||(_p===9)||(_p===11)) return true; return false;}
  isMidiPitchSharp(_p){_p=_p%12; if((_p===1)||(_p===3)||(_p===6)||(_p===8)||(_p===10)) return true; return false;}
  midiPitchToToneNoteName(_p){
    let result='?';
    switch(_p%12){
      case 0: result='C'; break; case 1: result='C#'; break; case 2: result='D'; break; case 3: result='D#'; break; case 4: result='E'; break; case 5: result='F'; break; case 6: result='F#'; break; case 7: result='G'; break; case 8: result='G#'; break; case 9: result='A'; break; case 10: result='A#'; break; case 11: result='B'; break;
      default: // ???
    }
    result+=Math.floor(_p/12); return result;
  }
  flush(){this.tonePolySynth.releaseAll();}
  note(_pitch,_normVel){if(_normVel>0.0) noteOn(_pitch,_normVel); else noteOff(_pitch);}
  noteOn(_pitch,_normVel){if(!this.audioEnabled||!this.isActive) return; _normVel*=this.ampFactor;this.tonePolySynth.triggerAttack(this.midiPitchToToneNoteName(_pitch),Tone.now(),_normVel);}
  noteOff(_pitch){if(!this.audioEnabled||!this.isActive) return; this.tonePolySynth.triggerRelease(this.midiPitchToToneNoteName(_pitch),0);}
}
								

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/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"])
}
								