Kuramoto Drone

przyroda, matematyka, dźwięk
Parametry
gui		chowa/pokazuje panel z interfejsem graficznym
lang		ustawia język interfejsu
pointer		chowa/pokazuje kursor myszy
size		ilość oscylatorów (minimum 2)
synth		wyłącza/włącza wewnętrzny generator dźwięku
Opis
Japoński fizyk Yoshiki Kuramoto badał, w jaki sposób niezależne elementy potrafią spontanicznie się synchronizować – jak wiele rytmów, drgań czy impulsów może nagle odnaleźć wspólny porządek. Model, który stworzył, opisuje ten proces matematycznie; w ”Kuramoto drone” zostaje przetłumaczony na język dźwięku. Oscylatory zamiast równań – tony zamiast cząstek – powoli dostrajają się do siebie, aż z chaosu wyłania się spójne, wibrujące brzmienie. To eksperyment na styku nauki i sztuki: między fizyką synchronizacji a estetyką wspólnego rytmu.
Czytaj więcej
Yoshiki Kuramoto (蔵本由紀) to japoński fizyk specjalizujący się w badaniu systemów o nieliniowej dynamice i mechanice statystycznej nierównowagowej (badacz jest związany z Nonlinear Dynamics group w Kyoto University) – za tymi zagadkowymi terminami kryją się próby zrozuminia, w jaki sposób można przewidywać zachowanie systemów złożonych z wielu wpływających na siebie oscylujących elementów (jednym z typowych przykładów ilustrujących charakter pracy Kuramoto jest prosty eksperyment polegajacy na umieszczeniu kilku mechanicznych metronomów rozsynchronizowanych w fazie na wspólnym podłożu przenoszącym drgania po pewnym czasie – zależnym od ilości przenoszonej przez podłoże energii – metronomy zaczną się synchronizować). Takie systemy często występują w naturze i zdolność do ich wyłuskiwania z ogółu otoczenia niewątpliwie składa się na wyjątkowość pracy Kuramoto na równi z umiejętnością budowania równań. Innymi słowy: badania Yoshiki Kuramoto są tak fascynujące, ponieważ łączą zaawansowaną współczesną metodykę pracy ze zdolnością obserwacji świata natury charakterystyczną dla wczesnego przyrodoznawstwa. Wśród osiągnięć Kurtamoto znajduje się nazwany jego nazwiskiem model obliczeniowy pozwalający przewidywać zdolność do samosynchronizacji wspomnianych wyżej układów złożonych z wielu oscylatorów. Ponieważ zaś oscylatory są jednym z podstawowych modułów funkcjonalnych elektronicznych instrumentów muzycznych implementacja modelu Kuramoto w syntezatorze dronowym jest świetnym ćwiczeniem intelektualnym, dobrą zabawą i poznawczym eksperymentem z zakresu sound-designu.
Dokumentacja techniczna
Parametry przekazywane przez adres URL

gui 0 lub 1; domyślnie 1; chowa/pokazuje panel z interfejsem graficznym
lang en lub pl; domyślnie en; ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
midiinport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (przyjmowanie komunikatów)
midioutport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (nadawanie komunikatów)
pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
size ilość oscylatorów (minimum 2)
synth 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny generator dźwięku
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
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
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)
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
circular 0 lub 1; domyślnie 0; wyłącza/włącza „zawijanie” wartości fazy oscylatora (przełącznik „circular”), co pozwala uzyskać płynne zmiany dźwięku (brak „progu”)
deviation 0.0 … 1.0; ustala poziom „rozchwiania” systemu (suwak „deviation”)
invert 0 lub 1; domyślnie 0; odwraca kierunek oscylacji (przełącznik „invert”)
K 0.0 … 1.0; ustala znormalizowany poziom parametru K (suwak „K”) modelu – szczegóły: https://en.wikipedia.org/wiki/Kuramoto_model
key MIDI pitch (0 … 127), amplifikacja (0.0 … 1.0); pozwala manualnie sterować głośnośią oscylatorów przyporządkowanych do konkretnych nut MIDI
randomize ustala losowe fazy oscylatorów (przycisk „randomize”)
speed 0.0 … 1.0; ustala znormalizowaną prędkość (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
vol 0.0 … 1.0; ustala poziom głośności (suwak „vol”)
Komunikaty wysyłane przez Miniaturę
kuramoto circular 0 lub 1; zmiana trybu „zawijania” wartości fazy oscylatora (przełącznik „circular”)
kuramoto deviation 0.0 … 1.0; zmiana poziomu „rozchwiania” systemu (suwak „deviation”)
kuramoto invert 0 lub 1; zmiana trybu odwracania kierunku oscylacji (przełącznik „invert”)
kuramoto K 0.0 … 1.0; zmiana znormalizowanego poziomu parametru K (suwak „K”) modelu – szczegóły: https://en.wikipedia.org/wiki/Kuramoto_model
kuramoto randomize ustawienie losowych wartości faz oscylatorów (przycisk „randomize”)
kuramoto speed 0.0 … 1.0; zmiana znormalozowanej prędkości (suwak „speed”)
kuramoto 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
kuramoto values szereg znormalizowanych wartości (0.0 … 1.0) określających aktualną fazę oscylatorów (ilość wartości równa jest ilości oscylatorów)
kuramoto vol 0.0 … 1.0; zmiana poziomu głośności (suwak „vol”)
MIDI

Komunikaty, na które reaguje Miniatura
CC 000 na kanale 1 portu MIDI ustawionego jako wejście odwraca kierunek oscylacji (przełącznik „invert”)
CC 001 na kanale 1 portu MIDI ustawionego jako wejście wyłącza/włącza „zawijanie” wartości fazy oscylatora (przełącznik „circular”), co pozwala uzyskać płynne zmiany dźwięku (brak „progu”)
CC 002 na kanale 1 portu MIDI ustawionego jako wejście ustala losowe fazy oscylatorów (przycisk „randomize”)
CC 003 na kanale 1 portu MIDI ustawionego jako wejście ustala wartość parametru „K” (suwak „K”)
CC 004 na kanale 1 portu MIDI ustawionego jako wejście ustala wartość parametru „speed” (suwak „speed”)
CC 005 na kanale 1 portu MIDI ustawionego jako wejście ustala poziom „rozchwiania” systemu (suwak „deviation”)
CC 006 na kanale 1 portu MIDI ustawionego jako wejście ustala poziom głośności (suwak „vol”)
Note Off na kanale 2 portu MIDI ustawionego jako wejście usuwa daną nutę MIDI z listy dostępnych tonów
Note On na kanale 2 portu MIDI ustawionego jako wejście pozwala włączyć daną nutę MIDI do listy dostępnych tonów
Komunikaty wysyłane przez Miniaturę
CC 000 na kanale 3 portu MIDI ustawionego jako wyjście raportuje odwrócenie kierunku oscylacji (przełącznik „invert”)
CC 001 na kanale 3 portu MIDI ustawionego jako wyjście raportuje „zawijanie” wartości fazy oscylatora (przełącznik „circular”), co pozwala uzyskać płynne zmiany dźwięku (brak „progu”)
CC 002 na kanale 3 portu MIDI ustawionego jako wyjście raportuje ustalenie losowych faz oscylatorów (przycisk „randomize”)
CC 003 na kanale 3 portu MIDI ustawionego jako wyjście raportuje zmianę wartości parametru „K” (suwak „K”)
CC 004 na kanale 3 portu MIDI ustawionego jako wyjście raportuje zmianę wartości parametru „speed” (suwak „speed”)
CC 005 na kanale 3 portu MIDI ustawionego jako wyjście raportuje zmianę wartości „rozchwiania” systemu (suwak „deviation”)
CC 006 na kanale 3 portu MIDI ustawionego jako wyjście raportuje zmianę poziomu głośności (suwak „vol”)
CC xxx na kanale 4 portu MIDI ustawionego jako wyjście raportuje zmianę fazy oscylatora o indeksie odpowiadającym numerowi komunikatu CC
Note Off na kanale 5 portu MIDI ustawionego jako wyjście przekazuje parametry stroju
Note On na kanale 5 portu MIDI ustawionego jako wyjście przekazuje parametry stroju
Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura
circular 0 lub 1; domyślnie 0; wyłącza/włącza „zawijanie” wartości fazy oscylatora (przełącznik „circular”), co pozwala uzyskać płynne zmiany dźwięku (brak „progu”)
deviation 0.0 … 1.0; ustala poziom „rozchwiania” systemu (suwak „deviation”)
invert 0 lub 1; domyślnie 0; odwraca kierunek oscylacji (przełącznik „invert”)
K 0.0 … 1.0; ustala znormalizowany poziom parametru K (suwak „K”) modelu – szczegóły: https://en.wikipedia.org/wiki/Kuramoto_model
key MIDI pitch (0 … 127), amplifikacja (0.0 … 1.0); pozwala manualnie sterować głośnośią oscylatorów przyporządkowanych do konkretnych nut MIDI
randomize ustala losowe fazy oscylatorów (przycisk „randomize”)
speed 0.0 … 1.0; ustala znormalizowaną prędkość (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
vol 0.0 … 1.0; ustala poziom głośności (suwak „vol”)
Komunikaty wysyłane przez Miniaturę
kuramoto circular 0 lub 1; zmiana trybu „zawijania” wartości fazy oscylatora (przełącznik „circular”)
kuramoto deviation 0.0 … 1.0; zmiana poziomu „rozchwiania” systemu (suwak „deviation”)
kuramoto invert 0 lub 1; zmiana trybu odwracania kierunku oscylacji (przełącznik „invert”)
kuramoto K 0.0 … 1.0; zmiana znormalizowanego poziomu parametru K (suwak „K”) modelu – szczegóły: https://en.wikipedia.org/wiki/Kuramoto_model
kuramoto randomize ustawienie losowych wartości faz oscylatorów (przycisk „randomize”)
kuramoto speed 0.0 … 1.0; zmiana znormalozowanej prędkości (suwak „speed”)
kuramoto 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
kuramoto values szereg znormalizowanych wartości (0.0 … 1.0) określających aktualną fazę oscylatorów (ilość wartości równa jest ilości oscylatorów)
kuramoto vol 0.0 … 1.0; zmiana poziomu głośności (suwak „vol”)
Kod źródłowy
									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="Kuramoto Drone">
  <meta name="keywords" content="Kuramoto, drone, 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>"Kuramoto Drone", Pawel Janicki, 2025, https://paweljanicki.jp</title>
  <style>
    body {padding: 0;margin: 0;}
  </style>
  <!--<script src="http://unpkg.com/tone"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="ws.js"></script>
  <script src="synth.js"></script>
  <script src="midi.js"></script>
  <script src="gui.js"></script>
  <script src="KuramotoModel.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 kura,synth;
  let theme={speakerIcon:null};
  let guiContainer={
    storedTuning:[true,false,true,false,true,true,false,true,false,true,false,true],
    noteRange:{min:30,max:110},
    isPointerVisibleAndInteractive:true,
    gui:null, isActive:true, lock:-1, lang:'en',
    handlers:{
      toInvertToggle:{id:-1,label:{en:'invert',pl:'odwróć'}},
      toCircularToggle:{id:-1,label:{en:'circular',pl:'kołowo'}},
      toRandomizeTrigger:{id:-1,label:{en:'randomize',pl:'losuj'}},
      toKSlider:{id:-1,label:{en:'K',pl:'K'}},
      toSpeedSlider:{id:-1,label:{en:'speed',pl:'tempo'}},
      toDeviationSlider:{id:-1,label:{en:'deviation',pl:'odchylenie'}},
      toMidiNoteSelector:{id:-1,label:{en:'',pl:''}},
      toVolSlider:{id:-1,label:{en:'vol',pl:'głośność'}}
    },
    getLabelByLang(_handler){
      let result='unhandled';
      switch(this.lang){
        case 'en': result=_handler.label.en; break;
        case 'pl': result=_handler.label.pl; break;
        default: console.log('[guiContainer, getLabelByLang] unhandled this.lang: '+this.lang);
      }
      return result;
    },
  };
  let webSocket={
    isActive:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let midi={
    isActive:false,
    processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1,
    channels:{ccControlIn:1, noteTuningIn:2, ccControlOut:3, ccOscilsOut:4, noteTuningOut:5},
    ccInMap:{invert:0,circular:1,randomize:2,K:3,speed:4,deviation:5,vol:6},
    ccOutMap:{invert:0,circular:1,randomize:2,K:3,speed:4,deviation:5,vol:6}
  };
  let externalInput={keys:[]};
  let storedUrlParams={
    useWorker:false,
    numOfKuraOscils:50,
    useInnerSynth:true,
  };
  p.preload=function(){theme.speakerIcon=p.loadImage("speaker-svgrepo-com.svg");}
  p.setup=function(){
    p.setupExternalInput(); p.handleUrlParams();
    p.createCanvas(innerWidth,innerHeight);
    kura = new KuramotoModel(p,0.001,storedUrlParams.numOfKuraOscils);
    synth = new Synth(p); synth.isActive=storedUrlParams.useInnerSynth;
    p.setupGui(); p.setMaxBindings(); p.initWebSocket(); p.initMidi();
    for(let i=0;i<guiContainer.storedTuning.length;i++) guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(i,guiContainer.storedTuning[i]);
    if(maxIsDetected) window.max.outlet('size',storedUrlParams.numOfKuraOscils);
    if(webSocket.isActive) webSocket.processor.safeSend(["size",storedUrlParams.numOfKuraOscils]);
    if(storedUrlParams.useWorker){
      p.noLoop();
      let intervalWorker = new Worker('worker.js');
      intervalWorker.onmessage = function(_e){p.handleWorker();}
      console.log("[setup] Worker set as clock source.");
    }else{p.frameRate(60);}
  };
  p.handleWorker=function(){p.redraw();}
  p.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,0,0,96,true);
    kura.update(); kura.draw(0,0,p.width,p.height);
    synth.update(kura.getAllValuesAsArray());
    guiContainer.gui.draw();
    if(maxIsDetected){window.max.outlet.apply(window.max,['kuramoto','values'].concat(kura.getAllValuesAsArray()));}
    if(webSocket.isActive){webSocket.processor.safeSend(['kuramoto',"values"].concat(kura.getAllValuesAsArray()));}
    p.sendOscilsDataViaMidi(midi.channels.ccOscilsOut);
    if(synth.isActive&&(!synth.audioEnabled)) p.drawMutedIcon();
  };
  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(){p.handleUniversalTouchStart();return false;};
  p.mouseReleased=function(){guiContainer.gui.unlockPointer(p.mouseX,p.mouseY); p.handleUniversalClick();return false;};
  p.touchStarted=function(_touchEvent){p.handleUniversalTouchStart();return false;};
  p.touchMoved=function(_touchEvent){guiContainer.gui.dragPointer(p.mouseX,p.mouseY);return false;};
  p.touchEnded=function(_touchEvent){guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);p.handleUniversalClick();return false;};
  p.handleUniversalTouchStart=function(){
    //if(synth.isActive&&!synth.audioEnabled){if(kura){synth.init(kura.size);guiContainer.gui.forceBroadcast();}}
    guiContainer.lock=guiContainer.gui.lockPointer(p.mouseX,p.mouseY);
  };
  p.handleUniversalClick=function(){
    if(synth.isActive&&(!synth.audioEnabled)){if(kura){synth.init(kura.size);guiContainer.gui.forceBroadcast();return;}}
    if(guiContainer.isActive){
      if(guiContainer.lock<0){
        if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){
          guiContainer.gui.disableAllItems(); guiContainer.isActive=false;
          guiContainer.gui.setBackgroundPanelVisibility(false);
          if(!guiContainer.isPointerVisibleAndInteractive) p.noCursor();
        }
      }
    }else{
      guiContainer.gui.enableAllItems(); guiContainer.isActive=true; p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true);
      //if((midi.isEnabled&&midi.inputPort)||(maxIsDetected&&midi.isMaxMidiEnabled)) guiContainer.gui.disableItemAccessedById(guiContainer.handlers.toMidiNoteSelector.id);
    }
  };
  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.setMaxBindings=function(){
    if(maxIsDetected){
      document.getElementsByTagName('body')[0].style.overflow = 'hidden';
      window.max.bindInlet('invert',function(_v){p.externallyControlledInvert(_v);});
      window.max.bindInlet('circular',function(_v){p.externallyControlledCircular(_v);});
      window.max.bindInlet('randomize',function(){p.externallyControlledRandomize();});
      window.max.bindInlet('K',function(_v){p.externallyControlledK(_v);});
      window.max.bindInlet('speed',function(_v){p.externallyControlledSpeed(_v);});
      window.max.bindInlet('deviation',function(_v){p.externallyControlledDeviation(_v);});
      window.max.bindInlet('tuning',function(_v1,_v2,_v3,_v4,_v5,_v6,_v7,_v8,_v9,_v10,_v11,_v12){p.externallyControlledTuning(_v1,_v2,_v3,_v4,_v5,_v6,_v7,_v8,_v9,_v10,_v11,_v12);});
      window.max.bindInlet('vol',function(_v){p.externallyControlledVol(_v);});
      window.max.bindInlet('key',function(_key,_vel){p.setExternalInputKey(_key,_vel);});
    }
  };
  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);}
        // speed multiplier ???
        if("pointer" in urlparams){let v=parseInt(urlparams.pointer); if(!isNaN(v)) guiContainer.isPointerVisibleAndInteractive=(v>0);console.log("[p.handleUrlParams] pointer: "+guiContainer.isPointerVisibleAndInteractive); if(!guiContainer.isPointerVisibleAndInteractive) p.noCursor();}
        if("synth" in urlparams){let v=parseInt(urlparams.synth); if(!isNaN(v)){storedUrlParams.useInnerSynth=(v>0); console.log("[p.handleUrlParams] synth: "+storedUrlParams.useInnerSynth);}}
        if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){storedUrlParams.useWorker=(v>0); console.log("[p.handleUrlParams] worker: "+storedUrlParams.useWorker);}}
        if("size" in urlparams){let v=parseInt(urlparams.size); if(v<2) v=2; if(!isNaN(v)){storedUrlParams.numOfKuraOscils=v; console.log("[p.handleUrlParams] size: "+storedUrlParams.numOfKuraOscils);}}
        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("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.setupGui=function(){
    //guiContainer.gui = new GUI(p,false);
    guiContainer.gui = new GUI(p,true,420,330,false);
    guiContainer.gui.setBackgroundPanelRect(20,20,380,300,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_tgl_inv = new SimpleToggle(30,30,90,30,GUI.ORIENTATION_HORIZONTAL,false,guiContainer.getLabelByLang(guiContainer.handlers.toInvertToggle));
    gui_tgl_inv.onChange=function(_id,_v){
      kura.invert=_v;
      if(maxIsDetected) window.max.outlet('kuramoto','invert',p.b2i(_v));
      if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','invert',p.b2i(_v)]);
      p.safeSendMidiCC(midi.ccOutMap.invert,p.b2i(_v)*127,midi.channels.ccControlOut);
    };
    guiContainer.handlers.toInvertToggle.id=guiContainer.gui.addItem(gui_tgl_inv);
    let gui_tgl_crc = new SimpleToggle(140,30,90,30,GUI.ORIENTATION_HORIZONTAL,false,guiContainer.getLabelByLang(guiContainer.handlers.toCircularToggle));
    gui_tgl_crc.onChange=function(_id,_v){
      kura.circular=_v;
      if(maxIsDetected) window.max.outlet('kuramoto','circular',p.b2i(_v));
      if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','circular',p.b2i(_v)]);
      p.safeSendMidiCC(midi.ccOutMap.circular,p.b2i(_v)*127,midi.channels.ccControlOut);
    };
    guiContainer.handlers.toCircularToggle.id=guiContainer.gui.addItem(gui_tgl_crc);
    let gui_trg_rnd = new SimpleTrigger(250,30,90,30,GUI.ORIENTATION_HORIZONTAL,guiContainer.getLabelByLang(guiContainer.handlers.toRandomizeTrigger));
    gui_trg_rnd.onTrigger=function(_id){
      kura.randomize();
      if(maxIsDetected) window.max.outlet('kuramoto','randomize');
      if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','randomize']);
      p.safeSendMidiCC(midi.ccOutMap.radomize,127,midi.channels.ccControlOut);
    };
    guiContainer.handlers.toRandomizeTrigger.id=guiContainer.gui.addItem(gui_trg_rnd);
    let gui_sld_k = new SimpleSlider(30,80,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.004,0.018,0.009,guiContainer.getLabelByLang(guiContainer.handlers.toKSlider));
    gui_sld_k.onChange=function(_id,_v){
      kura.K=_v;
      if(maxIsDetected) window.max.outlet('kuramoto','K',_v);
      if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','K',_v]);
      p.safeSendMidiCC(midi.ccOutMap.K,Math.floor(_v*127),midi.channels.ccControlOut);
    };
    guiContainer.handlers.toKSlider.id=guiContainer.gui.addItem(gui_sld_k);
    let gui_sld_f = new SimpleSlider(30,130,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.1,1.0,0.5,guiContainer.getLabelByLang(guiContainer.handlers.toSpeedSlider));
    gui_sld_f.onChange=function(_id,_v){
      kura.setSpeed(_v*(kura.size/50.0));
      if(maxIsDetected) window.max.outlet('kuramoto','speed',_v);
      if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','speed',_v]);
      p.safeSendMidiCC(midi.ccOutMap.speed,Math.floor(_v*127),midi.channels.ccControlOut);
    };
    guiContainer.handlers.toSpeedSlider.id=guiContainer.gui.addItem(gui_sld_f);
    let gui_sld_dev = new SimpleSlider(30,180,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.418,guiContainer.getLabelByLang(guiContainer.handlers.toDeviationSlider));
    gui_sld_dev.onChange=function(_id,_v){
      kura.setDeviation(_v);
      if(maxIsDetected) window.max.outlet('kuramoto','deviation',_v);
      if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','deviation',_v]);
      p.safeSendMidiCC(midi.ccOutMap.deviation,Math.floor(_v*127),midi.channels.ccControlOut);
    };
    guiContainer.handlers.toDeviationSlider.id=guiContainer.gui.addItem(gui_sld_dev);
    let gui_mns_tng = new SimpleMidiNotesSelector(30,280,30,30,GUI.ORIENTATION_HORIZONTAL,36,12);
    gui_mns_tng.onChange=function(_id,_key,_status){p.handleScaleChangeWithGui(_id);};
    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_sld_vol = new SimpleSlider(30,230,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.66,guiContainer.getLabelByLang(guiContainer.handlers.toVolSlider));
    gui_sld_vol.onChange=function(_id,_v){
      synth.ampFactor=_v*9.0;
      if(maxIsDetected) window.max.outlet('kuramoto','vol',_v);
      if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','vol',_v]);
      p.safeSendMidiCC(midi.ccOutMap.vol,Math.floor(_v*127),midi.channels.ccControlOut);
    };
    guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
    if(guiContainer.isActive){
      guiContainer.gui.enableAllItems(); guiContainer.isActive=true; p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true);
    }else{
      guiContainer.gui.disableAllItems();
    }
    //guiContainer.gui.forceBroadcast();
  };
  p.handleScaleChangeWithGui=function(_guiItemId){
    let temp1=guiContainer.gui.items[_guiItemId].getAllValuesAsArray();
    let temp2=synth.makeScaleWithVel(temp1[0],temp1[1],temp1[2],temp1[3],temp1[4],temp1[5],temp1[6],temp1[7],temp1[8],temp1[9],temp1[10],temp1[11],0.8);
    let temp3=synth.scaleWithVelToTuningArr(temp2,guiContainer.noteRange.min,guiContainer.noteRange.max);
    synth.setTuningAndAmp(temp3);
    for(let i=0;i<temp1.length;i++) temp1[i]=p.b2i(temp1[i]);
    if(maxIsDetected) window.max.outlet.apply(window.max,['kuramoto','tuning'].concat(temp1));
    if(webSocket.isActive) webSocket.processor.safeSend(['kuramoto','tuning'].concat(temp1));
    p.sendGuiTuningViaMidi(temp1);
  };
  p.externallyControlledInvert=function(_v){
    if(isNaN(_v)) return; if(_v>0) _v=1; else _v=0;
    guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].setValue(_v);
  };
  p.externallyControlledCircular=function(_v){
    if(isNaN(_v)) return; if(_v>0) _v=1; else _v=0;
    guiContainer.gui.items[guiContainer.handlers.toCircularToggle.id].setValue(_v);
  };
  p.externallyControlledRandomize=function(){
    guiContainer.gui.items[guiContainer.handlers.toRandomizeTrigger.id].trigger();
  };
  p.externallyControlledK=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.toKSlider.id].setNormValue(_v);
  };
  p.externallyControlledSpeed=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);
  };
  p.externallyControlledDeviation=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.toDeviationSlider.id].setNormValue(_v);
  };
  p.externallyControlledTuning=function(_v1,_v2,_v3,_v4,_v5,_v6,_v7,_v8,_v9,_v10,_v11,_v12){
    if(isNaN(_v1)) return; if(_v1>0) _v1=1; else _v1=0;
    if(isNaN(_v2)) return; if(_v2>0) _v2=1; else _v2=0;
    if(isNaN(_v3)) return; if(_v3>0) _v3=1; else _v3=0;
    if(isNaN(_v4)) return; if(_v4>0) _v4=1; else _v4=0;
    if(isNaN(_v5)) return; if(_v5>0) _v5=1; else _v5=0;
    if(isNaN(_v6)) return; if(_v6>0) _v6=1; else _v6=0;
    if(isNaN(_v7)) return; if(_v7>0) _v7=1; else _v7=0;
    if(isNaN(_v8)) return; if(_v8>0) _v8=1; else _v8=0;
    if(isNaN(_v9)) return; if(_v9>0) _v9=1; else _v9=0;
    if(isNaN(_v10)) return; if(_v10>0) _v10=1; else _v10=0;
    if(isNaN(_v11)) return; if(_v11>0) _v11=1; else _v11=0;
    if(isNaN(_v12)) return; if(_v12>0) _v12=1; else _v12=0;
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(0,_v1);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(1,_v2);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(2,_v3);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(3,_v4);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(4,_v5);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(5,_v6);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(6,_v7);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(7,_v8);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(8,_v9);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(9,_v10);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(10,_v11);
    guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(11,_v12);
  };
  p.externallyControlledVol=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);
  };
  p.setupExternalInput=function(){
    for(let i=0;i<128;i++) externalInput.keys[i]={isPressed:false,vel:0.0};
  };
  p.setExternalInputKey=function(_key,_vel){ // 0-127, 0.0-1.0
    if(_key===null) return; if(_key===undefined) return; if(isNaN(_key)) return;
    _key=Math.floor(_key); if((_key<0)||(_key>127)) return;
    if(_vel===null){_vel=0.0;}else{if(_vel===undefined){_vel=0.0;}else{if(isNaN(_vel)){_vel=0.0;}}}
    if(_vel<0.0) _vel=0.0; if(_vel>1.0) _vel=1.0;
    externalInput.keys[_key]=_vel;
    p.processExternalInput();
  };
  p.processExternalInput=function(){
    let tuning=[]; // 128 x {isPressed:b,vel:normfloat}
    let b1=false; let b2=false;
    for(let i=0;i<128;i++){
      b1=(externalInput.keys[i]>0); if(b1) b2=true;
      tuning[i]={isPressed:b1,vel:externalInput.keys[i]};
    }
    synth.setTuningAndAmp(tuning);
    if(synth.isActive){if(b2) synth.mute(false); else synth.mute(true);}
  };
  p.handleIncomingWebSocketMessages=function(_msg){
    if(!_msg||_msg===null) return; if(_msg===undefined) return;
    if(!_msg.data||_msg.data===null) return; if(_msg.data===undefined) return;
    var arr = _msg.data.split(" ");
    if((!arr)||(arr===null)) return; if(arr===undefined) return; if(arr.length<1) return;
      switch(arr[0]){
        case "invert": if(arr.length!==2) return; p.externallyControlledInvert(parseInt(arr[1])); break;
        case "circular": if(arr.length!==2) return; p.externallyControlledCircular(parseInt(arr[1])); break;
        case "randomize": if(arr.length!==1) return; p.externallyControlledRandomize(); break;
        case "K": if(arr.length!==2) return; p.externallyControlledK(parseFloat(arr[1])); break;
        case "speed": if(arr.length!==2) return; p.externallyControlledSpeed(parseFloat(arr[1])); break;
        case "deviation": if(arr.length!==2) return; p.externallyControlledDeviation(parseFloat(arr[1])); break;
        case "tuning": if(arr.length!==13) return; p.externallyControlledTuning(parseInt(arr[1]),parseInt(arr[2]),parseInt(arr[3]),parseInt(arr[4]),parseInt(arr[5]),parseInt(arr[6]),parseInt(arr[7]),parseInt(arr[8]),parseInt(arr[9]),parseInt(arr[10]),parseInt(arr[11]),parseInt(arr[12])); break;
        case "vol": if(arr.length!==2) return; p.externallyControlledVol(parseFloat(arr[1])); break;
        case "key": if(arr.length!==3) return; p.setExternalInputKey(parseInt(arr[1]),parseFloat(arr[2])); break;
        default: console.log("[p.handleIncomingWebSocketMessages] unhandled WS message: "+arr[0]);
      }
  };
  p.initWebSocket=function(){
    //for(let i=0;i<128;i++) webSocket.receivedMessages[i]=false; // let's use the same range as MIDI
    if(webSocket.isActive){
      console.log("[p.initWebSocket] starting websocket connection, address: "+webSocket.address);
      webSocket.processor.init(webSocket.address,p.handleIncomingWebSocketMessages);
    }
  };
  p.initMidi=function(){
    if(isNaN(midi.inputPortIndex)) midi.inputPortIndex=-1;
    midi.inputPortIndex=Math.floor(midi.inputPortIndex);
    if(isNaN(midi.outputPortIndex)) midi.outputPortIndex=-1;
    midi.outputPortIndex=Math.floor(midi.outputPortIndex);
    midi.processor.init(midi.inputPortIndex,midi.outputPortIndex);
    if((midi.inputPortIndex>=0)||(midi.outputPortIndex>=0)) midi.isActive=true;
    if(midi.inputPortIndex>=0){
      midi.processor.onNoteOff = function(_midiEvent){p.handleIncomingMidiNoteOffMessages(_midiEvent);}
      midi.processor.onNoteOn = function(_midiEvent){p.handleIncomingMidiNoteOnMessages(_midiEvent);}
      midi.processor.onCC = function(_midiEvent){p.handleIncomingMidiCCMessages(_midiEvent);}
    }
  };
  p.handleIncomingMidiCCMessages=function(_midiEvent){
    if(_midiEvent.message.channel!==midi.channels.ccControlIn) return;
    //console.log(_midiEvent.controller.number+" "+_midiEvent.rawValue);
    switch(_midiEvent.controller.number){
      case midi.ccInMap.invert: p.externallyControlledInvert(_midiEvent.rawValue); break;
      case midi.ccInMap.circular: p.externallyControlledCircular(_midiEvent.rawValue); break;
      case midi.ccInMap.randomize: p.externallyControlledRandomize(); break;
      case midi.ccInMap.K: p.externallyControlledK(_midiEvent.rawValue/127); break;
      case midi.ccInMap.speed: p.externallyControlledSpeed(_midiEvent.rawValue/127); break;
      case midi.ccInMap.deviation: p.externallyControlledDeviation(_midiEvent.rawValue/127); break;
      case midi.ccInMap.vol: p.externallyControlledVol(_midiEvent.rawValue/127); break;
      default: console.log("[p.handleIncomingMidiCCMessages] unhandled _midiEvent.controller.number: "+_midiEvent.controller.number);
    }
  };
  p.handleIncomingMidiNoteOffMessages=function(_midiEvent){if(_midiEvent.message.channel===midi.channels.noteTuningIn) p.setExternalInputKey(_midiEvent.note.number,0.0);};
  p.handleIncomingMidiNoteOnMessages=function(_midiEvent){if(_midiEvent.message.channel===midi.channels.noteTuningIn) p.setExternalInputKey(_midiEvent.note.number,_midiEvent.note.attack);};
  p.sendGuiTuningViaMidi=function(_arr){
    if((midi.outputPortIndex<0)||(!midi.isActive)||(!kura)) return;
    if((!midi.processor.outputPort)||(!midi.processor.isEnabled)) return;
    for(let i=0;i<_arr.length;i++) midi.processor.sendMidiNote(i,_arr[i]*127,midi.channels.noteTuningOut);
  };
  p.sendOscilsDataViaMidi=function(_chn){
    if((midi.outputPortIndex<0)||(!midi.isActive)||(!kura)) return;
    if((!midi.processor.outputPort)||(!midi.processor.isEnabled)) return;
    if(isNaN(_chn)) return; _chn=Math.floor(_chn); if((_chn<1)||(_chn>16)) return;
    let values=kura.getAllValuesAsArray(); let n=values.length; if(n>127) n=127;
    for(let i=0;i<n;i++) midi.processor.sendCC(i,Math.floor(values[i]*127),_chn);
  };
  p.safeSendMidiCC=function(_ctrl,_val,_chn){
    if((midi.outputPortIndex<0)||(!midi.isActive)) return;
    if((!midi.processor.outputPort)||(!midi.processor.isEnabled)) return;
    if(isNaN(_val)) return; _val=Math.floor(_val); if((_val<0)||(_val>127)) return;
    if(isNaN(_ctrl)) return; _ctrl=Math.floor(_ctrl); if((_ctrl<0)||(_ctrl>127)) return;
    if(isNaN(_chn)) return; _chn=Math.floor(_chn); if((_chn<1)||(_chn>16)) return;
    midi.processor.sendCC(_ctrl,_val,_chn);
  };
  p.b2i=function(_v){if(_v) return 1; return 0;};
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

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

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

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

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

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

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

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

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

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

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/60.);
								

									KuramotoModel.js
									// https://en.wikipedia.org/wiki/Kuramoto_model
// Pawel Janicki, 2024-25, https://paweljanicki.jp
class KuramotoModel{
  static get DRAWMODE_SIMPLE(){return 1;}
  static get DRAWMODE_BARS(){return 2;}
  constructor(_p, _K, _size){
    this.p=_p; this.drawMode=KuramotoModel.DRAWMODE_BARS;
    this.numOfBuffers=2; this.currentBuffer=0;
    this.exp = 1.0; this.invert=false; this.circular=false;
    this.K=_K; this.size=_size; this.cells=[]; this.speed=0.5; this.deviation=0.1;
    for(let buf=0;buf<this.numOfBuffers;buf++){
      let cells=[];
      for(let c=0;c<this.size;c++) cells[c]={p1:Math.random(), f:this.speed};
      this.cells[buf]=cells;
    }
  }
  updateSpeedAndDeviation(){
    for(let i=0;i<this.size;i++){
      this.cells[this.currentBuffer][i].f=Math.abs(this.speed+(Math.random()-0.5)*this.deviation*2.0);
      if(this.cells[this.currentBuffer][i].f<=0.01) this.cells[this.currentBuffer][i].f=0.01;
    }
  }
  setDeviation(_deviation){this.deviation=_deviation; this.updateSpeedAndDeviation();}
  setSpeed(_speed){this.speed=_speed; this.updateSpeedAndDeviation();}
  copyCellData(_fromBuffer, _fromIndex, _toBuffer, _toIndex){
    this.cells[_toBuffer][_toIndex].p1 = this.cells[_fromBuffer][_fromIndex].p1;
    this.cells[_toBuffer][_toIndex].f  = this.cells[_fromBuffer][_fromIndex].f;
  }
  update(){
    let nextBuffer = (this.currentBuffer+1)%this.numOfBuffers;
    for(let i=0;i<this.size;i++){
      this.copyCellData(this.currentBuffer, i, nextBuffer, i);
      let s=0;
      for(let j=0;j<this.size;j++){
        s += Math.sin(this.p.TWO_PI*(this.cells[this.currentBuffer][j].p1-this.cells[this.currentBuffer][i].p1));
      }
      this.cells[nextBuffer][i].p1 += (this.cells[this.currentBuffer][i].f/this.size + this.K*s/this.size);
      this.cells[nextBuffer][i].p1 = this.p.fract(this.cells[nextBuffer][i].p1);
    }
    this.currentBuffer=nextBuffer;
  }
  getValue(_index){
    let result = this.cells[this.currentBuffer][_index].p1;
    if(!this.invert) result = 1.0 - result;
    if(this.circular&&(result>0.5)) result = (1.0 - result) * 2.0;
    return Math.pow(result, this.exp);
  }
  getAllValuesAsArray(){let result=[]; for(let i=0;i<this.size;i++) result[i]=this.getValue(i); return result;}
  randomize(){
    this.updateSpeedAndDeviation();
    for(let i=0;i<this.numOfBuffers;i++)
      for(let j=0;j<this.size;j++) this.cells[i][j].p1=Math.random();
  }
  draw(_x,_y,_w,_h){
    switch(this.drawMode){
      case KuramotoModel.DRAWMODE_SIMPLE: this.draw_simple(_x,_y,_w,_h); break;
      case KuramotoModel.DRAWMODE_BARS: this.draw_bars(_x,_y,_w,_h); break;
      default: console.log("[KuramotoModel, draw] unhandled this.drawMode: "+this.drawMode);
    }
  }
  draw_bars(_x,_y,_w,_h){
    const barWidth=_w/this.size;
    this.p.noStroke(); let l, h;
    for(let i=0; i<this.size;i++){
      l=this.getValue(i)*255.0; h=this.getValue(i)*_h;
      this.p.fill(l,l,100);
      this.p.rect(_x+i*barWidth+2,_y+2,barWidth-4,h,4,4,4,4);
    }
  }
  draw_simple(_x,_y,_w,_h){
    const barWidth=_w/this.size;
    this.p.noStroke();
    for(let i=0; i<this.size;i++){
      this.p.fill(this.getValue(i)*255.0);
      this.p.rect(_x+i*barWidth,_y,barWidth,_h);
    }
  }
}
								

									synth.js
									class Synth{
  constructor(_p){
    this.p=_p; this.lNote=0; this.hNote=127;
    this.audioEnabled=false; this.isActive=true;
    this.oscBank=[]; this.ampFactor=6.0; this.defaultAmp=0.75; this.defaultAmpFactor=6.0;
    this.tuning=[]; this.amp=[];
  }
  mute(_b){if(_b) this.ampFactor=0.0; else this.ampFactor=this.defaultAmpFactor;}
  init(_numOfOscils){
    if(this.audioEnabled||!this.isActive) return;
    for(let i=0;i<_numOfOscils;i++){this.tuning[i]=i;this.amp[i]=0.0;}
    for(let i=0;i<_numOfOscils;i++){
      this.oscBank[i] = new p5.Oscillator('triangle'), // square, sine, triangle, sawtooth
      this.oscBank[i].amp(0);
      this.oscBank[i].freq(this.p.midiToFreq(this.tuning[i]));
      this.oscBank[i].pan(this.p.map(i,0,_numOfOscils-1,-1.0,1.0));
      this.oscBank[i].start();
    }
    console.log("[Synth, init] synth and audio enabled");
    this.audioEnabled=true;
  }
  makeScaleWithVel(_b0,_b1,_b2,_b3,_b4,_b5,_b6,_b7,_b8,_b9,_b10,_b11,_v){
    return[
      {isPressed:(_b0>0),vel:_v},{isPressed:(_b1>0),vel:_v},{isPressed:(_b2>0),vel:_v},{isPressed:(_b3>0),vel:_v},
      {isPressed:(_b4>0),vel:_v},{isPressed:(_b5>0),vel:_v},{isPressed:(_b6>0),vel:_v},{isPressed:(_b7>0),vel:_v},
      {isPressed:(_b8>0),vel:_v},{isPressed:(_b9>0),vel:_v},{isPressed:(_b10>0),vel:_v},{isPressed:(_b11>0),vel:_v}
    ];
  }
  scaleWithVelToTuningArr(_scaleAndAmpArr,_minNote,_maxNote){ // 12 x {isPressed:b,vel:normfloat}
    let result=[]; let n=0; let b=false;
    for(let i=0;i<128;i++){
      n=i%12; if((i>=_minNote)&&(i<=_maxNote)) b=true; else b=false;
      result[i]={isPressed:(_scaleAndAmpArr[n].isPressed&&b),vel:_scaleAndAmpArr[n].vel};
    }
    return result;
  }
  isTuningAndAmpArrEmpty(_tuningAndAmpArr){
    if(_tuningAndAmpArr===null) return true; if(_tuningAndAmpArr===undefined) return true; if(_tuningAndAmpArr.length!==128) return true;
    for(let i=0;i<_tuningAndAmpArr.length;i++) if(_tuningAndAmpArr[i].isPressed) return false;
    return true;
  }
  setTuningAndAmp(_tuningAndAmpArr){ // 128 x {isPressed:b,vel:normfloat}
    if(!this.audioEnabled||!this.isActive) return;
    if(_tuningAndAmpArr===null) return; if(_tuningAndAmpArr===undefined) return; if(_tuningAndAmpArr.length!==128) return;
    if(this.isTuningAndAmpArrEmpty(_tuningAndAmpArr)) return;
    let note=this.lNote; let incdec=-1;
    for(let i=0;i<this.tuning.length;i++){
      while(!_tuningAndAmpArr[note].isPressed){if((note===this.lNote)||(note===this.hNote)) incdec*=-1; note+=incdec;}
      this.tuning[i]=note; this.amp[i]=_tuningAndAmpArr[note].vel;
      if((note===this.lNote)||(note===this.hNote)) incdec*=-1; note+=incdec;
    }
    this.retuneOscils();
  }
  retuneOscils(){for(let i=0;i<this.oscBank.length;i++) this.oscBank[i].freq(this.p.midiToFreq(this.tuning[i]));}
  update(_velArr){
    if(!this.audioEnabled||!this.isActive) return;
    if(_velArr===null) return; if(_velArr===undefined) return; if(_velArr.length!==this.oscBank.length) return;
    for(let i=0;i<this.oscBank.length;i++) this.oscBank[i].amp((_velArr[i]/_velArr.length)*this.amp[i]*this.ampFactor,0.05);
  }
  /*
  sendAmpToMax(){window.max.outlet.apply(window.max,['amp'].concat(this.amp));}
  sendTuningToMax(){window.max.outlet.apply(window.max,['tuning'].concat(this.tuning));}
  sendAmpAsCCs(){}
  sendTuningAsCCs(){}
  sendAmpViaWS(){}
  sendTuningViaWS(){}
  */
}
								

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

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

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