Pozytywka r30

pozytywki i nieredukowalność obliczeniowa

Parametry

gui		chowa / pokazuje panel z interfejsem graficznym
size		szerokość "taśmy" (ilość rzędów reprezentujących kolejne tony)
pointer		chowa / pokazuje kursor myszy
lang		ustawia język interfejsu
voices		ustala liczbę głosów wewnętrznego syntezatora
invert		odwraca działanie pustych i wypełnionych komórek (przełącznik "invert")
continuous		włącza lub wyłącza tryb "staccato" [staccato=0] (przełącznik "continuous")
clock		wyłącza/włącza wewnętrzny zegar sterujący odtwarzaniem
vol		ustala inicjalny poziom głośności instrumentu (globalny suwak "vol")
speed		ustala inicjalną prędkość odtwarzania (globalny suwak "speed")

Opis

Algorytmiczny porządek i mechaniczna muzykalność spotykają się tu w jednym procesie. Miniatura ”Pozytywka r30” wykorzystuje jednowymiarowy automat komórkowy Stevena Wolframa, który – podobnie jak dawne pozytywki czy pianole – tworzy rytmiczne struktury z sekwencji drobnych impulsów. Każdy dźwięk jest wynikiem kolejnego kroku obliczeń, a całość rozwija się bez możliwości skrótu czy przewidzenia rezultatu. Praca zamienia matematyczną regułę w muzyczne doświadczenie, w którym współbrzmią ze sobą porządek i przypadek.

Czytaj więcej

„Pozytywka r30” to rozbudowana wersja innej miniatury interkatywnej, zatytułowanej po prostu „r30”, stanowiącej dodatek do generatywnej instalacji Pawła Janickiego o tym samym tytule — instalacja i pierwotna wersja miniatury zostały stworzone na potrzeby indywidualnej wystawy Janickiego „Point Nemo” w 2020 roku.

Miniatura nawiązuje do mechanizmów pozytywek, pianol i innych podobnych muzycznych urządzeń, kombinacji instrumentów i mechanicznych sequencerów, sterowanych perforowanymi taśmami lub „płytami” i programowania przy wykorzystaniu kart perforowanych (jak wiadomo, te ostatnie mają długą, sięgającą przełomu XVIII/XIXI wieku, przedelektroniczną tradycję zastosowania w przemyśle włókienniczym, jako nośniki programów sterujących pracą krosien — wynalazek Josepha-Marie Jacquarda).

„Pozytywka r30” korzysta z jednowymiarowego automatu komórkowego, jednego z wielu opracowanych przez badacza tego rodzaju graficznych systemów obliczeniwych, enfant terrible współczesnej matematyki, Stevena Wolframa. Reguły, wedle których działa automat mogą łatwo zostać zmienione przez odbiorcę (wystarczy kilka kliknięć w odpowiedniej sekcji interfejsu graficznego Miniatury), ale bazowy zestaw reguł odpowiada wolframowskiemu automatowi r30. Jest to dość szczególny mechanizm, Wolfram poświęca mu sporo uwagi w swojej książce A New Kind of Science, pełnoprawny system obliczeniowy — można za jego pomocą kodować informacje i dokonywać obliczeń, innymi słowy r30 jest Maszyną Turinga — cechujący się nieredukowalnością obliczeniową – zachowaniem polegajacym na tym, że aby poznać stan automatu po pewnej ilości kroków (generacji) należy te kroki po prostu wykonać (nie istnieje, obliczeniowy „skrót” pozwalający dowiedzieć się, jaki będzie stan ewoluującego automatu np. po 10000 kroków jeśli nie przeprowadzi się kolejno odpowiednich obliczeń).

Dokumentacja techniczna

Parametry przekazywane przez adres URL

gui 0 lub 1; domyślnie 1; chowa/pokazuje panel z interfejsem graficznym
size szerokość „taśmy” (ilość rzędów reprezentujących kolejne tony)
pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
lang en lub pl; domyślnie en; ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
synth 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny generator dźwięku
ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
midiinport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (przyjmowanei komunikatów)
midioutport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (nadawanie komunikatów)
tpf „ticks per frame”; ustala długość „nuty” wyrażoną w impulsach zegara MIDI (przydatne w przypadku użycia Miniatury w synchronizacji z rozbudowanym systemem MIDI)
voices ustala liczbę głosów wewnętrznego syntezatora
lowestkey wyrażony w numerach klawiszy MIDI index najniższego dźwięku
invert 0 lub 1; domyślnie 0; odwraca działanie pustych i wypełnionych komórek (przełącznik „invert”)
continuous 0 lub 1; domyślnie 1; włącza lub wyłącza tryb „staccato” [staccato=0] (przełącznik „continuous”)
clock 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny zegar sterujący odtwarzaniem
vol 0.0 … 1.0; ustala inicjalny poziom głośności instrumentu (globalny suwak „vol”)
speed ustala inicjalną prędkość odtwarzania (globalny suwak „speed”)
tuning C c# D d# E F f# G g# A a# B; sekwencja binarna złożona z 12 liczb (0 lub 1), z których każda określa, czy odpowiadający jej pozycją dźwięk w oktawie jest włączony

Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura

continuous 0 lub >0; domyślnie 1; włącza/wyłącza tryb „staccato” [staccato=0] (przełącznik „continuous”)
invert 0 lub >0; domyślnie 0; odwraca działanie pustych i wypełnionych komórek (przełącznik „invert”)
speed ustala prędkość odtwarzania (globalny suwak „speed”)
vol ustala poziom głośności instrumentu (globalny suwak „vol”)
key MIDI key (pitch), status (0/1); (strój) wyłącza/włącza daną nutę MIDI
rule sekwencja binarna (0/1) złożona z 8 wartości, ustalająca reguły dla automatu komórkowego
randomize ustawia losowe stany komórek automatu
update wymusza przeliczenie nowego pokolenia automatu komórkowego – komunikat przydatny do budowy własnych mechanizmów synchronizacji Miniatury z innymi aplikacjami lub urządzeniami

Komunikaty wysyłane przez Miniaturę

ca note pitch (0 … 127) amp (0.0 … 1.0) wyłączenie/włączenie nuty o określonej wysokości i głośności (amp 0.0 oznacza wyłączenie nuty)
ca flush sygnalizuje zamknięcie wszystkich odgrywanych nut
ca invert odwrócenie znaczenia pustych i wypełnionych komórek (przełącznik „invert”)
ca continuous wyłączenie/włączenie trybu łączenia następujących po sobie wypełnionych komórek do postaci ciągłych nut (przełącznik „continuous”)
ca speed zmiana znormalizowanej prędkości odtwarzania (suwak „speed”)
ca vol zmiana znormalizowanej głośności instrumentu (globalny suwak „vol”)
ca key pitch (0 … 127) status (0/1); (strój) zmiana stanu klawisza
ca rule sekwencja binarna (0/1) złożona z 8 wartości, zwracająca reguły dla automatu komórkowego
ca randomize ustawienie losowych stanów komórek automatu (suwak „speed”)
ca update raportuje przeliczenie nowego stanu automatu komórkowego (komunikat może posłużyć do synchronizacji Miniatury z innymi aplikacjami lub urządzeniami)
ca tuning lista 12 wartości binarnych reprezentujących strój

MIDI

Komunikaty, na które reaguje Miniatura

CC 010 na dowolnym kanale włącza/wyłącza tryb „staccato” [staccato=0] (przełącznik „continuous”)
CC 011 na dowolnym kanale odwraca działanie pustych i wypełnionych komórek (przełącznik „invert”)
CC 012 na dowolnym kanale ustawia losowe stany komórek automatu
CC 013 na dowolnym kanale ustala prędkość odtwarzania (globalny suwak „speed”)
CC 014 na dowolnym kanale zmiana znormalizowanej głośności instrumentu (globalny suwak „vol”)
CC 020 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 000
CC 021 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 001
CC 022 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 010
CC 023 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 011
CC 024 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 100
CC 025 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 101
CC 026 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 110
CC 027 na dowolnym kanale wyłącza/włącza stan automatu komórkowego dla przypadku 111
CC 030 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk C
CC 031 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk c#
CC 032 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk D
CC 033 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk d#
CC 034 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk E
CC 035 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk F
CC 036 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk f#
CC 037 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk G
CC 038 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk g#
CC 039 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk A
CC 040 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk a#
CC 041 na dowolnym kanale (strój) wyłącza/włącza (powtarzany w oktawach w obrębie obsługiwanego zakresu) dźwięk B
Note Off na dowolnym kanale (strój) wyłącza korespondującą z parametrem MIDI pitch kolumnę komórek
Note On na dowolnym kanale (strój) włącza korespondującą z parametrem MIDI pitch kolumnę komórek

Komunikaty wysyłane przez Miniaturę

CC 070 na kanale 2 włączenie/wyłączenie trybu „staccato” [staccato=0] (przełącznik „continuous”)
CC 071 na kanale 2 odwrócenie znaczenia pustych i wypełnionych komórek (przełącznik „invert”)
CC 072 na kanale 2 raportuje ustalenie losowych stanów komórek automatu (przełącznik „randomize”)
CC 073 na kanale 2 zmiana prędkości odtwarzania (suwak „speed”)
CC 074 na kanale 2 zmiana głośności instrumentu (globalny suwak „vol”)
CC 080 na kanale 2 stan automatu komórkowego dla przypadku 000
CC 081 na kanale 2 stan automatu komórkowego dla przypadku 001
CC 082 na kanale 2 stan automatu komórkowego dla przypadku 010
CC 083 na kanale 2 stan automatu komórkowego dla przypadku 011
CC 084 na kanale 2 stan automatu komórkowego dla przypadku 100
CC 085 na kanale 2 stan automatu komórkowego dla przypadku 101
CC 086 na kanale 2 stan automatu komórkowego dla przypadku 110
CC 087 na kanale 2 stan automatu komórkowego dla przypadku 111
CC 090 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk C
CC 091 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk c#
CC 092 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk D
CC 093 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk d#
CC 094 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk E
CC 095 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk F
CC 096 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk f#
CC 097 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk G
CC 098 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk g#
CC 099 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk A
CC 100 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk a#
CC 101 na kanale 2 (strój) wyłączenie/włączenie (powtarzanego w oktawach w obrębie obsługiwanego zakresu) dźwięk B
Note Off na kanale 2 (strój) raportuje stan korespondującej z parametrem MIDI pitch kolumny komórek
Note On na kanale 2 (strój) raportuje stan korespondującej z parametrem MIDI pitch kolumny komórek

Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura

continuous 0 lub >0; domyślnie 1; włącza lub wyłącza tryb „staccato” [staccato=0] (przełącznik „continuous”)
invert 0 lub >0; domyślnie 0; odwraca działanie pustych i wypełnionych komórek (przełącznik „invert”)
speed ustala prędkość odtwarzania (globalny suwak „speed”)
vol ustala poziom głośności instrumentu (globalny suwak „vol”)
key MIDI key (pitch), status (0/1); (strój) wyłącza/włącza daną nutę MIDI
rule sekwencja binarna (0/1) złożona z 8 wartości, ustalająca reguły dla automatu komórkowego
randomize sutawia losowe stany komórek automatu
update wymusza przeliczenie nowego pokolenia automatu komórkowego – komunikat przydatny do budowy własnych mechanizmów synchronizacji Miniatury z innymi aplikacjami lub urządzeniami

Komunikaty wysyłane przez Miniaturę

ca note pitch (0 … 127) amp (0.0 … 1.0) wyłączenie/włączenie nuty o określonej wysokości i głośności (amp 0.0 oznacza wyłączenie nuty)
ca flush sygnalizuje zamknięcie wszystkich odgrywanych nut
ca invert odwrócenie znaczenia pustych i wypełnionych komórek (przełącznik „invert”)
ca continuous wyłączenie/włączenie trybu łączenia następujących po sobie wypełnionych komórek do postaci ciągłych nut (przełącznik „continuous”)
ca speed zmiana znormalizowanej prędkości odtwarzania (suwak „speed”)
ca vol zmiana znormalizowanej głośności instrumentu (globalny suwak „vol”)
ca key pitch (0 … 127) status (0/1); (strój) zmiana stanu klawisza
ca rule sekwencja binarna (0/1) złożona z 8 wartości, zwracająca reguły dla automatu komórkowego
ca randomize ustawienie losowych stanów komórek automatu (suwak „speed”)
ca update raportuje przeliczenie nowego stanu automatu komórkowego (komunikat może posłużyć do synchronizacji Miniatury z innymi aplikacjami lub urządzeniami)
ca tuning lista 12 wartości binarnych reprezentujących strój

Kod źródłowy

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