Kuramoto Drone

nature, mathematics, sound
Parameters
gui		hides/shows the graphical user interface panel
lang		sets the interface language
pointer		hides/shows the mouse cursor
size		number of oscillators ( minimum of 2)
synth		disables/enables the internal sound synthesizer
Description
Japanese physicist Yoshiki Kuramoto investigated how independent elements can spontaneously synchronize – how many rhythms, vibrations, or impulses can suddenly find a common order. The model he created describes this process mathematically; in “Kuramoto drone” it is translated into the language of sound. Oscillators instead of equations – tones instead of particles – slowly tune into each other, until a coherent, vibrating sound emerges from chaos. This is an experiment at the intersection of science and art: between the physics of synchronization and the aesthetics of shared rhythm.
Yoshiki Kuramoto (蔵本由紀) is a Japanese physicist specializing in the study of nonlinear dynamics and nonequilibrium statistical mechanics (the researcher is affiliated with the Nonlinear Dynamics group at Kyoto University). These enigmatic terms represent attempts to understand how to predict the behavior of systems composed of many interacting, oscillating elements. One typical example of Kuramoto’s work is a simple experiment involving placing several mechanical metronomes out of phase on a common oscillating substrate. After a certain time, depending on the amount of energy transferred by the substrate, the metronomes will begin to synchronize. Such systems often occur in nature, and the ability to extract them from the general environment undoubtedly contributes to the uniqueness of Kuramoto’s work, as does his ability to construct equations. In other words, Yoshiki Kuramoto’s research is so fascinating because it combines advanced contemporary methodology with the ability to observe the natural world characteristic of early natural science. Among Kuramoto’s achievements is a computational model named after him that allows for predicting the self-synchronization capability of the aforementioned multi-oscillator systems. And because oscillators are one of the fundamental functional modules of electronic musical instruments, implementing Kuramoto’s model in a drone synthesizer is a great intellectual exercise, a lot of fun, and a cognitive experiment in sound design.
Technical documentation
Parameters passed via URL

gui 0 or 1; default 1; hides/shows the graphical user interface panel
lang en or pl; default en; sets the interface language (additional languages can be added)
midiinport default disabled; MIDI port number for external control of the Miniature (receiving messages)
midioutport default disabled; MIDI port number for external control of the Miniature (sending messages)
pointer 0 or 1; default 1; hides/shows the mouse cursor
size number of oscillators (minimum 2)
synth 0 or 1; default 1; disables/enables the internal sound synthesizer
tuning C c# D d# E F f# G g# A a# B; binary sequence of 12 numbers (0 or 1), where each indicates whether the corresponding pitch in the octave is enabled
worker 0 or 1; default 0; allows blocking the browser’s built-in mechanisms that suspend the program when the window is not visible
ws address; default disabled; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of the Miniature and customization)
xws address; default disabled; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of the Miniature and customization)
Messages passed via WebSocket

Messages to which the Miniature responds
circular 0 or 1; default 0; disables/enables “wrapping” of the oscillator phase value (the “circular” toggle), which allows for smooth sound changes (no “threshold”)
deviation 0.0 … 1.0; sets the level of system “jitter” (the “deviation” slider)
invert 0 or 1; default 0; inverts the oscillation direction (the “invert” toggle)
K 0.0 … 1.0; sets the normalized level of the K parameter (the “K” slider) of the model – details: https://en.wikipedia.org/wiki/Kuramoto_model
key MIDI pitch (0 … 127), amplification (0.0 … 1.0); allows manual control of the volume of oscillators assigned to specific MIDI notes
randomize sets random oscillator phases (the “randomize” button)
speed 0.0 … 1.0; sets the normalized speed (the “speed” slider)
tuning C c# D d# E F f# G g# A a# B; binary sequence of 12 numbers (0 or 1), where each indicates whether the corresponding pitch in the octave is enabled
vol 0.0 … 1.0; sets the volume level (the “vol” slider)
Messages sent by the Miniature
kuramoto circular 0 or 1; change of the oscillator phase value “wrapping” mode (the “circular” toggle)
kuramoto deviation 0.0 … 1.0; change of the system “jitter” level (the “deviation” slider)
kuramoto invert 0 or 1; change of the oscillation direction inversion mode (the “invert” toggle)
kuramoto K 0.0 … 1.0; change of the normalized level of the K parameter (the “K” slider) of the model – details: https://en.wikipedia.org/wiki/Kuramoto_model
kuramoto randomize setting random oscillator phase values (the “randomize” button)
kuramoto speed 0.0 … 1.0; change of the normalized speed (the “speed” slider)
kuramoto tuning C c# D d# E F f# G g# A a# B; binary sequence of 12 numbers (0 or 1), where each indicates whether the corresponding pitch in the octave is enabled
kuramoto values series of normalized values (0.0 … 1.0) specifying the current phase of the oscillators (the number of values equals the number of oscillators)
kuramoto vol 0.0 … 1.0; change of the volume level (the “vol” slider)
MIDI

Messages to which the Miniature responds
CC 000 on channel 1 of the MIDI port set as input inverts the oscillation direction (the “invert” toggle)
CC 001 on channel 1 of the MIDI port set as input disables/enables “wrapping” of the oscillator phase value (the “circular” toggle), which allows for smooth sound changes (no “threshold”)
CC 002 on channel 1 of the MIDI port set as input sets random oscillator phases (the “randomize” button)
CC 003 on channel 1 of the MIDI port set as input sets the value of the “K” parameter (the “K” slider)
CC 004 on channel 1 of the MIDI port set as input sets the value of the “speed” parameter (the “speed” slider)
CC 005 on channel 1 of the MIDI port set as input sets the level of system “jitter” (the “deviation” slider)
CC 006 on channel 1 of the MIDI port set as input sets the volume level (the “vol” slider)
Note Off on channel 2 of the MIDI port set as input removes a given MIDI note from the list of available tones
Note On on channel 2 of the MIDI port set as input allows adding a given MIDI note to the list of available tones
Messages sent by the Miniature
CC 000 on channel 3 of the MIDI port set as output reports the inversion of the oscillation direction (the “invert” toggle)
CC 001 on channel 3 of the MIDI port set as output reports the “wrapping” of the oscillator phase value (the “circular” toggle), which allows for smooth sound changes (no “threshold”)
CC 002 on channel 3 of the MIDI port set as output reports the setting of random oscillator phases (the “randomize” button)
CC 003 on channel 3 of the MIDI port set as output reports the change of the “K” parameter value (the “K” slider)
CC 004 on channel 3 of the MIDI port set as output reports the change of the “speed” parameter value (the “speed” slider)
CC 005 on channel 3 of the MIDI port set as output reports the change of the system “jitter” value (the “deviation” slider)
CC 006 on channel 3 of the MIDI port set as output reports the change of the volume level (the “vol” slider)
CC xxx on channel 4 of the MIDI port set as output reports the change of the phase of the oscillator with an index corresponding to the CC message number
Note Off on channel 5 of the MIDI port set as output transmits tuning parameters
Note On on channel 5 of the MIDI port set as output transmits tuning parameters
Communication with MaxMSP

Messages to which the Miniature responds
circular 0 or 1; default 0; disables/enables “wrapping” of the oscillator phase value (the “circular” toggle), which allows for smooth sound changes (no “threshold”)
deviation 0.0 … 1.0; sets the level of system “jitter” (the “deviation” slider)
invert 0 or 1; default 0; inverts the oscillation direction (the “invert” toggle)
K 0.0 … 1.0; sets the normalized level of the K parameter (the “K” slider) of the model – details: https://en.wikipedia.org/wiki/Kuramoto_model
key MIDI pitch (0 … 127), amplification (0.0 … 1.0); allows manual control of the volume of oscillators assigned to specific MIDI notes
randomize sets random oscillator phases (the “randomize” button)
speed 0.0 … 1.0; sets the normalized speed (the “speed” slider)
tuning C c# D d# E F f# G g# A a# B; binary sequence of 12 numbers (0 or 1), where each indicates whether the corresponding pitch in the octave is enabled
vol 0.0 … 1.0; sets the volume level (the “vol” slider)
Messages sent by the Miniature
kuramoto circular 0 or 1; change of the oscillator phase value “wrapping” mode (the “circular” toggle)
kuramoto deviation 0.0 … 1.0; change of the system “jitter” level (the “deviation” slider)
kuramoto invert 0 or 1; change of the oscillation direction inversion mode (the “invert” toggle)
kuramoto K 0.0 … 1.0; change of the normalized level of the K parameter (the “K” slider) of the model – details: https://en.wikipedia.org/wiki/Kuramoto_model
kuramoto randomize setting random oscillator phase values (the “randomize” button)
kuramoto speed 0.0 … 1.0; change of the normalized speed (the “speed” slider)
kuramoto tuning C c# D d# E F f# G g# A a# B; binary sequence of 12 numbers (0 or 1), where each indicates whether the corresponding pitch in the octave is enabled
kuramoto values series of normalized values (0.0 … 1.0) specifying the current phase of the oscillators (the number of values equals the number of oscillators)
kuramoto vol 0.0 … 1.0; change of the volume level (the “vol” slider)
Source code
									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"])
}
								