Kamtytura

camera image as a graphic score

Preview: Front camera Preview: Back camera

Parameters

Description

“Kamtytura” explores the possibilities of the contemporary graphic score – one that can be read not only by the eye and ear but also by the machine. Every image captured by the camera becomes a sound recording, and its structure determines the course of the composition. The work references the experiments of Iannis Xenakis and his UPIC system, combining the idea of graphic literalness with the openness of algorithmic interpretation. It thus connects three breakthrough moments in the history of music – notation, electricity, and the inclusion of noise within its scope – showing that contemporary composition can arise from image, gesture, and chance.

The encyclopedic publication “Sound Art. Sound as a Medium of Art,” edited by Peter Weibel, identifies three events that changed the course of music: the invention of notation, the application of electricity, and the inclusion of noise within the realm of music. The miniature “Kamtytura” grapples with all of these phenomena to some extent, though most strongly with notation, especially graphic notation. There are many definitions of graphic scores, and it seems that currently the most common emphasis is on the freedom with which such scores can be treated by performers or on the representation of music using symbols outside the scope of traditional musical notation (this understanding of graphic scores usually refers to the music of the 1950s and its characteristic expansion of the range of notational symbols used, along with the introduction of symbols with vague meaning). “Kamtytura” approaches the topic from a slightly different perspective, assuming that graphic scores can be interpreted very precisely, even machine-like (which, however, does not preclude us from introducing random elements or interpretive decisions into the playback) and that they can be completely devoid of symbolic elements (instead of multiplying their number and meaning). “Kamtytura” operates with electronic sound (i.e., electricity), and although its built-in synthesizer uses traditional equal temperament, this Miniatura can also be controlled (via MIDI, WebSocket, or by loading the Miniatura into the MaxMSP environment) by any external devices or programs that produce sounds (or operate in any other medium).

A particular example of apparatus for creating and playing graphic scores in the context of electronic music is, of course, the UPIC (Unité Polyagogique Informatique CEMAMu) system, developed by Iannis Xenakis at the Centre d’Etudes de Mathématique et Automatique Musicales (CEMAMu) in Paris, which saw its first operational versions in 1977. At the end of the UPIC signal chain was the Australian Fairlight CMI music workstation, combining a synthesizer, sampler, sequencer, and a number of other components, some of which remain impressive in their conceptual and technical sophistication to this day. However, even more interesting elements, Xenakis’s conceptual innovations, existed “before” the Fairlight. Xenakis used a tablet controlled by a special pen to manually draw musical waveforms, oscillator waveforms, and envelopes—introducing a distinctive kind of graphic literalism to compositional practice. He also utilized algorithmic and stochastic material transformation mechanisms (the entire system was managed by a computer connected to a vector CRT display), sequencing both synthesized and sampling material. He quickly discovered the educational potential of the system, its openness, and ease of use, inviting children, among others, to experiment with UPIC.

The “input device” of “Kamtytura” is a camera – any image can be treated as a graphic score and converted by the software into sound and messages for external devices. The miniature divides the image into a number of bands, which correspond to the state of virtual “strings” or “keys.” This number can be changed, allowing for experimentation with the readability of the “scores” at different resolutions.

Technical documentation

Parameters passed via URL

- camera 0 or 1; default 0; hides or shows the camera image (the “camera” toggle)
- clock 0 or 1; default 1; disables/enables the internal clock controlling playback
- dark 0 or 1; default 0; disables/enables dark color mode (the “dark” toggle)
- dense 0 or 1; default 0; disables or enables “dense” tuning mode (the “dense” toggle)
- dur 7.0 – 30.0; default 10.0; sets the duration for the head to traverse the score (the “duration” slider)
- famo user | environment (or env); default user; [facingMode] allows forcing the use of the front (user) or rear (environment) camera on devices equipped with dual cameras (most modern mobile devices)
- gui 0 or 1; default 1; hides/shows the graphical user interface panel
- h vertical camera resolution
- invert 0 or 1; default 0; inverts the response to dark and light colors (the “invert” toggle)
- lang en or pl; default en; sets the interface language (additional languages can be added)
- loop 0 or 1; default 1; disables/enables playback looping (the “loop” toggle)
- midiinchn MIDI channel number for external control of the Miniature (receiving messages)
- midiinport disabled by default; MIDI port number for external control of the Miniature (receiving messages)
- midioutbarschn MIDI channel number used to emit data about the state of “bars” (strips) into which the score is divided (default 3)
- midioutchn MIDI channel number used to emit interface status messages (default 2)
- midioutport disabled by default; MIDI port number for external control of the Miniature (sending messages)
- mirror 0 or 1; default 1; disables/enables mirroring of the image from the capture device (usually a camera)
- pendulum 0 or 1; default 0; disables/enables pendulum mode for head movement (the “pendulum” toggle)
- play 0 or 1; default 1; disables/enables head movement (the “play” toggle or spacebar)
- pointer 0 or 1; default 1; hides/shows the mouse cursor
- resolution horizontal resolution of the score (minimum 2)
- scratch 0 or 1; default 0; disables/enables “scratch” mode (external or cursor-based control of the head position)
- sens 0.0 … 1.0; sets the initial normalized sensitivity of the motion detector (the “sensitivity” slider)
- 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
- vol 0.0 … 1.0; sets the initial instrument volume level (global “vol” slider)
- w horizontal camera resolution
- 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; disabled by default; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of the Miniatura and customization)
- xws address; disabled by default; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of the Miniatura and customization)

Messages passed via WebSocket

Messages to which the Miniature responds

camera 0 or 1; default 0; hides or shows the camera image (the “camera” toggle)
dark 0 or 1; default 0; disables/enables dark color mode (the “dark” toggle)
dense 0 or 1; default 0; disables or enables “dense” tuning mode (the “dense” toggle)
dur 7.0 – 30.0; default 10.0; sets the duration for the head to traverse the score (the “duration” slider)
invert 0 or 1; default 0; inverts the response to dark and light colors (the “invert” toggle)
loop 0 or 1; default 1; disables/enables playback looping (the “loop” toggle)
note MIDI key (pitch), status (0=disabled, >0=active); forces disabling/enabling the specified MIDI “key”
pendulum 0 or 1; default 0; disables/enables pendulum mode for head movement (the “pendulum” toggle)
play 0 or 1; default 0; disables/enables head movement (the “play” toggle or spacebar)
pos 0.0 … 1.0; position of the playback head
scratchmode 0 or 1; default 0; disables/enables the mode for free maneuvering of the playback head (using the mouse or external messages)
segment index (strip number), status (0=disabled, 1=active); forces disabling/enabling the specified “strip”
sensitivity 0.0 … 1.0; sets the normalized sensitivity of the motion detector (the “sensitivity” 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 instrument volume level (global “vol” slider)

Messages sent by the Miniature

kamtytura camera 0 or 1; disabling or enabling camera visibility
kamtytura dark 0 or 1; disabling or enabling dark mode visibility
kamtytura dense 0 or 1; change of tuning mode
kamtytura dur 7.0 – 30.0; reports change of the duration for the head to traverse the score
kamtytura invert 0 or 1; disabling or enabling brightness inversion mode
kamtytura loop 0 or 1; disabling or enabling looped playback
kamtytura pendulum 0 or 1; disabling or enabling pendulum playback mode
kamtytura play 0 or 1; disabling or enabling playback
kamtytura pos 0.0 … 1.0; position of the playback head
kamtytura scratchmode change of the playback head maneuvering mode status (normal playback / “scratch”)
kamtytura segment index (strip number), status (0=disabled, 1=active), MIDI note (0-127), fill level (0.0 … 1.0); reports strip status
kamtytura sensitivity 0.0 … 1.0; reports the normalized sensitivity of the motion detector (the “sensitivity” slider)
kamtytura 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; reports tuning change
kamtytura vol 0.0 … 1.0; reports change of volume level

MIDI

Messages to which the Miniature responds

CC 070 on channel 2 reports disabling/enabling of head movement (the “play” toggle or spacebar)
CC 071 on channel 2 reports change of the inversion of the response mechanism to dark and light colors (the “invert” toggle)
CC 072 on channel 2 reports change of the disabling/enabling state of playback looping (the “loop” toggle)
CC 073 on channel 2 reports change of the duration for the head to traverse the score (the “duration” slider) – controller values (0-127) are scaled to the range 7.0-30.0 seconds
CC 074 on channel 2 reports change of the instrument volume level (global “vol” slider)
CC 075 on channel 2 reports disabling/enabling of pendulum mode for head movement (the “pendulum” toggle)
CC 076 on channel 2 reports change of the disabling/enabling of dark color mode (the “dark” toggle)
CC 077 on channel 2 reports change of the parameter for hiding/showing the camera image (the “camera” toggle)
CC 078 on channel 2 reports change of the disabling/enabling of “dense” tuning mode (the “dense” toggle)
CC 079 on channel 2 reports change of the value of the normalized sensitivity of the motion detector (the “sensitivity” slider)
CC 080 on channel 2 reports change of the mode for free maneuvering of the playback head (using the mouse or external messages)
CC 081 on channel 2 position of the playback head
CC 090 on channel 2 (tuning) reports disabling/enabling of the C pitch
CC 091 on channel 2 (tuning) reports disabling/enabling of the c# pitch
CC 092 on channel 2 (tuning) reports disabling/enabling of the D pitch
CC 093 on channel 2 (tuning) reports disabling/enabling of the d# pitch
CC 094 on channel 2 (tuning) reports disabling/enabling of the E pitch
CC 095 on channel 2 (tuning) reports disabling/enabling of the F pitch
CC 096 on channel 2 (tuning) reports disabling/enabling of the f# pitch
CC 097 on channel 2 (tuning) reports disabling/enabling of the G pitch
CC 098 on channel 2 (tuning) reports disabling/enabling of the g# pitch
CC 099 on channel 2 (tuning) reports disabling/enabling of the A pitch
CC 100 on channel 2 (tuning) reports disabling/enabling of the a# pitch
CC 101 on channel 2 (tuning) reports disabling/enabling of the B pitch
CC xxx on channel 3 reports the status of the strip with an index corresponding to the CC message index

Communication with MaxMSP

Messages to which the Miniature responds

camera 0 or 1; default 0; hides or shows the camera image (the “camera” toggle)
dark 0 or 1; default 0; disables/enables dark color mode (the “dark” toggle)
dense 0 or 1; default 0; disables or enables “dense” tuning mode (the “dense” toggle)
dur 7.0 – 30.0; default 10.0; sets the duration for the head to traverse the score (the “duration” slider)
invert 0 or 1; default 0; inverts the response to dark and light colors (the “invert” toggle)
loop 0 or 1; default 1; disables/enables playback looping (the “loop” toggle)
note MIDI key (pitch), status (0=disabled, >0=active); forces disabling/enabling the specified MIDI “key”
pendulum 0 or 1; default 0; disables/enables pendulum mode for head movement (the “pendulum” toggle)
play 0 or 1; default 0; disables/enables head movement (the “play” toggle or spacebar)
pos 0.0 … 1.0; position of the playback head
scratchmode 0 or 1; default 0; disables/enables the mode for free maneuvering of the playback head (using the mouse or external messages)
segment index (strip number), status (0=disabled, 1=active); forces disabling/enabling the specified “strip”
sensitivity 0.0 … 1.0; sets the normalized sensitivity of the motion detector (the “sensitivity” 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 instrument volume level (global “vol” slider)

Messages sent by the Miniature

kamtytura camera 0 or 1; disabling or enabling camera visibility
kamtytura dark 0 or 1; disabling or enabling dark mode visibility
kamtytura dense 0 or 1; change of tuning mode
kamtytura dur 7.0 – 30.0; reports change of the duration for the head to traverse the score
kamtytura invert 0 or 1; disabling or enabling brightness inversion mode
kamtytura loop 0 or 1; disabling or enabling looped playback
kamtytura pendulum 0 or 1; disabling or enabling pendulum playback mode
kamtytura play 0 or 1; disabling or enabling playback
kamtytura pos 0.0 … 1.0; position of the playback head
kamtytura scratchmode change of the playback head maneuvering mode status (normal playback / “scratch”)
kamtytura segment index (strip number), status (0=disabled, 1=active), MIDI note (0-127), fill level (0.0 … 1.0); reports strip status
kamtytura sensitivity 0.0 … 1.0; reports the normalized sensitivity of the motion detector (the “sensitivity” slider)
kamtytura 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; reports tuning change
kamtytura vol 0.0 … 1.0; reports change of volume level

Source code

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

<head>
  <meta charset="utf-8">
  <meta name="description" content="Kamtytura">
  <meta name="keywords" content="visual, score, graphic, recognition, sonification, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>"Kamtytura (Camore), Pawel Janicki, 2025, https://paweljanicki.jp</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <!--<script src="https://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="visualscore.js"></script>
  <script src="roi.js"></script>
  <script src="midi.js"></script>
  <script src="ws.js"></script>
  <script src="synth.js"></script>
  <script src="gui.js"></script>
  <script src="sketch.js" type="module"></script>

</head>

<body>
</body>

</html>
								

									sketch.js
									function detectMax(){try{window.max.outlet('Hello Max!');return true;}catch(_e){console.log('Max, where are you? '+_e);} return false;}
let s=function(p){
  let visualScoreInterpreter={
    isActive:true,
    capture:{
      processor:null, w:640, h:480, helperCanvas:null,
      flip:true, facingMode:"default"
    },
    roi:{
      processor:(new Roi()),
      x:0,y:0,w:320,h:240
    },
    processor:(new VisualScore(p))
  };
  let webSocket={
    isActive:false,monitorInput:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let midi={
    isActive:false,
    processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1,
    channels:{in:-1,out:2,outBars:3}, // all midi channels are used as input
    clock:{
      scratchMode:0, // 0 no scratch, 1 mouse, 2 external
      rawpos:0.0,
      pos:0.0,
      auto:true,
      seqdur:1.0,
      sync:true,
      timeOffset:0.0
    },
    ccmap:{
      in:{
        play:10,
        invert:11,
        loop:12,
        dur:13,
        vol:14,
        pendulum:15,
        dark:16,
        camera:17,
        dense:18,
        sensitivity:19,
        scratchMode:20,
        pos:21,
        tuning_oct_0:30,
        tuning_oct_1:31,
        tuning_oct_2:32,
        tuning_oct_3:33,
        tuning_oct_4:34,
        tuning_oct_5:35,
        tuning_oct_6:36,
        tuning_oct_7:37,
        tuning_oct_8:38,
        tuning_oct_9:39,
        tuning_oct_10:40,
        tuning_oct_11:41
      },
      out:{
        play:70,
        invert:71,
        loop:72,
        dur:73,
        vol:74,
        pendulum:75,
        dark:76,
        camera:77,
        dense:78,
        sensitivity:79,
        scratchMode:80,
        pos:81,
        //fill:82,
        tuning_oct_0:90,
        tuning_oct_1:91,
        tuning_oct_2:92,
        tuning_oct_3:93,
        tuning_oct_4:94,
        tuning_oct_5:95,
        tuning_oct_6:96,
        tuning_oct_7:97,
        tuning_oct_8:98,
        tuning_oct_9:99,
        tuning_oct_10:100,
        tuning_oct_11:101
      }
    }
  };
  let theme={
    speakerIcon:null,
    darkmode:false,
    dark:{
      bgColor:{r:0,g:0,b:0}
    },
    light:{
      bgColor:{r:0,g:0,b:0}
    },
    pointer:true
  };
  let useWorker=false; let synth = new Synth(p);
  let defVol=0.7; let defDur=10.0; let defPlay=true; let defLoop=true; let defPendulum=false; let defInvert=false; let defDark=false; let defCamera=false; let defDense=false; let defSensitivity=0.5;
  let guiContainer={
    isGuiAlwaysOff:false,
    gui:null, isActive:true, lock:-1, lang:'en',
    storedTuning:[true,false,true,false,true,true,false,true,false,true,false,true],
    handlers:{
      toSensSlider:{id:-1,label:{en:'sensitivity',pl:'czułość'}},
      toVolSlider:{id:-1,label:{en:'vol',pl:'głośność'}},
      toDurSlider:{id:-1,label:{en:'duration (s)',pl:'długość sekwencji (s)'}},
      toPlayToggle:{id:-1,label:{en:'play',pl:'graj'}},
      toInvertToggle:{id:-1,label:{en:'invert',pl:'negatyw'}},
      toPendulumToggle:{id:-1,label:{en:'pendulum',pl:'wahadło'}},
      toDenseTuningToggle:{id:-1,label:{en:'dense tuning',pl:'gęste strojenie'}},
      toLoopToggle:{id:-1,label:{en:'loop',pl:'pętla'}},
      toDarkModeToggle:{id:-1,label:{en:'darkmode',pl:'tryb ciemny'}},
      toDisplayCameraToggle:{id:-1,label:{en:'camera',pl:'kamera'}},
      toMidiNoteSelector:{id:-1,label:{en:'',pl:''}}
    },
    getLabelByLang(_handler){
      let result='unhandled';
      switch(this.lang){
        case 'en': result=_handler.label.en; break;
        case 'pl': result=_handler.label.pl; break;
        default: console.log('[guiContainer, getLabelByLang] unhandled this.lang: '+this.lang);
      }
      return result;
    }
  };
  const maxIsDetected=detectMax();
  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.preload=function(){theme.speakerIcon=p.loadImage("speaker-svgrepo-com.svg");visualScoreInterpreter.processor.preload();}
  p.setup=function(){
    p.handleUrlParams();
    p.createCanvas(10,10);
    p.initVisualScoreInterpreter();
    p.setupGui(); p.initWebSocket(); p.initMidi(); p.initMax();
    for(let i=0;i<guiContainer.storedTuning.length;i++) guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(i,guiContainer.storedTuning[i]);
    if(maxIsDetected){}
    if(window.DeviceOrientationEvent){window.addEventListener("deviceorientation",p.onOrientationChange);}
    if(useWorker){
      p.noLoop();
      let intervalWorker = new Worker('worker.js');
      intervalWorker.onmessage = function(_e){p.handleWorker();}
      console.log("[setup] Worker set as clock source.");
    }else{p.frameRate(60);}
    guiContainer.gui.forceBroadcast();
  };
  p.handleWorker=function(){p.redraw();}
  p.draw=function(){
    if((p.width!=innerWidth)||(p.height!=innerHeight)) p.handleResize();
    if(theme.darkmode) p.setBackground(p,theme.dark.bgColor.r,theme.dark.bgColor.g,theme.dark.bgColor.b,true); else p.setBackground(p,theme.light.bgColor.r,theme.light.bgColor.g,theme.light.bgColor.b,true);
    p.drawBackgroundBars();
    switch(midi.clock.scratchMode){
      case 0: p.updateClock(false); break; // no scratch
      case 1: let pos=p.mouseX/p.width; if(pos<0.0) pos=0.0; if(pos>1.0) pos=1.0; midi.clock.pos=pos; break; // scratch with mouse
      case 2: break; // 2 scratch with externally controlled pos
      default: console.log("[p.draw] unhandled midi.clock.scratchMode: "+midi.clock.scratchMode)
    }
    if(visualScoreInterpreter.capture.processor) p.updateVisualScoreInterpreter();
    synth.update(visualScoreInterpreter.processor.playhead.status,guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue());
    p.drawVisualScoreInterpreter();
    let dataToSend=visualScoreInterpreter.processor.huskFreshDataToSend();
    if(maxIsDetected) p.sendFrameDataToMax(dataToSend);
    if(webSocket.isActive&&webSocket.processor.isEnabled&&webSocket.processor.websocket) p.sendFrameDataViaWebSocket(dataToSend);
    if(midi.isActive&&midi.processor.isEnabled&&midi.processor.outputPort) p.sendFrameDataViaMidi(dataToSend);
    guiContainer.gui.draw();
    if(synth.isActive&&(!synth.audioEnabled)) p.drawMutedIcon();
  };
  p.touchStarted=function(_touchEvent){
    let changedTouches=p.huskChangedTouches(_touchEvent);
    for(let i=0;i<changedTouches.length;i++) p.unifiedTactileEventPressed(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
    return false;
  }
  p.touchMoved=function(_touchEvent){
    let changedTouches=p.huskChangedTouches(_touchEvent);
    for(let i=0;i<changedTouches.length;i++) p.unifiedTactileEventDragged(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
    return false;
  }
  p.touchEnded=function(_touchEvent){
    let changedTouches=p.huskChangedTouches(_touchEvent);
    for(let i=0;i<changedTouches.length;i++) p.unifiedTactileEventReleased(changedTouches[i].x,changedTouches[i].y,changedTouches[i].id);
    p.handleUniversalClick();
    return false;
  }
  p.doubleClicked=function(){return false;};
  p.mouseClicked=function(){p.handleUniversalClick();return false;};
  p.mouseMoved=function(){if(guiContainer.gui) guiContainer.gui.moveIdlePointer(p.mouseX,p.mouseY); return false;};
  p.mouseDragged=function(){p.unifiedTactileEventDragged(p.mouseX,p.mouseY,0); return false;};
  p.mousePressed=function(){p.unifiedTactileEventPressed(p.mouseX,p.mouseY,0); return false;};
  p.mouseReleased=function(){p.unifiedTactileEventReleased(p.mouseX,p.mouseY,0); return false;};
  p.mouseWheel=function(){return false;};
  p.onOrientationChange=function(){p.fullscreen(true);};
  p.handleResize=function(){p.resizeCanvas(innerWidth,innerHeight);};
  p.keyPressed=function(){
    if(p.key===" "){
      let newVal=!guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue();
      guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(newVal);
    }
    return false;
  };
  p.handleUniversalClick=function(){
    if(synth.isActive&&(!synth.audioEnabled)){p.initSynth(); return;}
    if(!guiContainer.isGuiAlwaysOff){
      if(guiContainer.isActive){
        if(guiContainer.lock<0){
          if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){guiContainer.gui.setBackgroundPanelVisibility(false); guiContainer.gui.disableAllItems();guiContainer.isActive=false;if(!theme.pointer)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.huskChangedTouches=function(_touchEvent){
    let result=[]; let ct=_touchEvent.changedTouches; let ctl=_touchEvent.changedTouches.length;
    for(let i=0;i<ctl;i++){let t=ct.item(i);result[result.length]={id:t.identifier,x:t.clientX,y:t.clientY};}
    return result;
  };
  p.unifiedTactileEventDragged=function(_pixx,_pixy,_eventid){
    guiContainer.gui.dragPointer(_pixx,_pixy);
  };
  p.unifiedTactileEventPressed=function(_pixx,_pixy,_eventid){
    guiContainer.lock=guiContainer.gui.lockPointer(_pixx,_pixy);
  };
  p.unifiedTactileEventReleased=function(_pixx,_pixy,_eventid){
    guiContainer.gui.unlockPointer(_pixx,_pixy);
  };
  p.initSynth=function(){
    if(synth.isActive&&(!synth.audioEnabled)){
      synth.init(visualScoreInterpreter.processor.playhead.resolution);
      synth.tune(visualScoreInterpreter.processor.playhead.status);
      guiContainer.gui.forceBroadcast();
      return true;
    }
    return false;
  };
  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.initWebSocket=function(){
    if(!webSocket.isActive) return;
    webSocket.processor.init(webSocket.address,function(_msg){
      if(_msg===null) return; if(_msg===undefined) return; if(_msg.data===null) return; if(_msg.data===undefined) return;
      if(webSocket.monitorInput) console.log("[p.initWebSocket/handler] monitor: "+_msg.data);
      let arr=_msg.data.split(" ");
      if(arr===null) return; if(arr===undefined) return;
      if(arr.length===2){
        switch(arr[0]){
          case "scratchmode": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              if((arr[1]>=0)&&(arr[1]<=2)) midi.clock.scratchMode=arr[1];
            }
          break;
          case "pos":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){
              if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
              midi.clock.pos=arr[1];
            }
          break;
          case "dense": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toDenseTuningToggle.id].setValue(arr[1]);
            }
          break;
          case "camera": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toDisplayCameraToggle.id].setValue(arr[1]);
            }
          break;
          case "dark": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toDarkModeToggle.id].setValue(arr[1]);
            }
          break;
          case "loop": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toLoopToggle.id].setValue(arr[1]);
            }
          break;
          case "pendulum": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toPendulumToggle.id].setValue(arr[1]);
            }
          break;
          case "play": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(arr[1]);
            }
          break;
          case "invert": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].setValue(arr[1]);
            }
          break;
          case "vol":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){
              if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
              guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setNormValue(arr[1]);
            }
          break;
          case "dur":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){
              guiContainer.gui.items[guiContainer.handlers.toDurSlider.id].setNormValue(arr[1]);
            }
          break;
          default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
        }
      }else{
        if(arr.length===3){
          switch(arr[0]){
            case "segment": 
              arr[1]=parseInt(arr[1]);arr[2]=parseInt(arr[2]);
              if((!isNaN(arr[1]))&&(!isNaN(arr[2]))){
                arr[2]=(arr[2]>0);
                visualScoreInterpreter.processor.setSegment(arr[1],arr[2]);
              }
            break;
            case "note": 
              arr[1]=parseInt(arr[1]);arr[2]=parseInt(arr[2]);
              if((!isNaN(arr[1]))&&(!isNaN(arr[2]))){
                arr[2]=(arr[2]>0);
                visualScoreInterpreter.processor.setNote(arr[1],arr[2]);
              }
            break;
            default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
          }
        }else{
          if(arr.length===13){
            switch(arr[0]){
              case "tuning": 
                arr[1]=parseInt(arr[1]);arr[2]=parseInt(arr[2]);arr[3]=parseInt(arr[3]);arr[4]=parseInt(arr[4]);arr[5]=parseInt(arr[5]);arr[6]=parseInt(arr[6]);arr[7]=parseInt(arr[7]);arr[8]=parseInt(arr[8]);arr[9]=parseInt(arr[9]);arr[10]=parseInt(arr[10]);arr[11]=parseInt(arr[11]);arr[12]=parseInt(arr[12]);
                if(isNaN(arr[1])||isNaN(arr[2])||isNaN(arr[3])||isNaN(arr[4])||isNaN(arr[5])||isNaN(arr[6])||isNaN(arr[7])||isNaN(arr[8])||isNaN(arr[9])||isNaN(arr[10])||isNaN(arr[11])||isNaN(arr[12])){
                  // bad data
                }else{
                  p.setGuiTuningMidiNoteSelector(arr[1],arr[2],arr[3],arr[4],arr[5],arr[6],arr[7],arr[8],arr[9],arr[10],arr[11],arr[12]);
                }
              break;
              default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
            }
          }else{
          }
        }
      }
    });
  };
  p.initMax=function(){
    if(!maxIsDetected) return;
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    window.max.bindInlet('camera',function(_v){
      _v=parseInt(_v);
      if(!isNaN(_v)){
        _v=(_v>0);
        guiContainer.gui.items[guiContainer.handlers.toDisplayCameraToggle.id].setValue(_v);
      }
    });
    window.max.bindInlet('loop',function(_v){
      _v=parseInt(_v);
      if(!isNaN(_v)){
        _v=(_v>0);
        guiContainer.gui.items[guiContainer.handlers.toLoopToggle.id].setValue(_v);
      }
    });
    window.max.bindInlet('scratchmode',function(_v){
      _v=parseInt(_v);
      if(!isNaN(_v)){
        if((_v>=0)&&(_v<=2)) midi.clock.scratchMode=_v;
      }
    });
    window.max.bindInlet('pos',function(_v){
      _v=parseFloat(_v);
      if(!isNaN(_v)){
        if(_v<0.0) _v=0.0; if(_v>1.0) _v=1.0;
        midi.clock.pos=_v;
      }
    });
    window.max.bindInlet('dark',function(_v){
      _v=parseInt(_v);
      if(!isNaN(_v)){
        _v=(_v>0);
        guiContainer.gui.items[guiContainer.handlers.toDarkModeToggle.id].setValue(_v);
      }
    });
    window.max.bindInlet('pendulum',function(_v){
      _v=parseInt(_v);
      if(!isNaN(_v)){
        _v=(_v>0);
        guiContainer.gui.items[guiContainer.handlers.toPendulumToggle.id].setValue(_v);
      }
    });
    window.max.bindInlet('play',function(_v){
      _v=parseInt(_v);
      if(!isNaN(_v)){
        _v=(_v>0);
        guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(_v);
      }
    });
    window.max.bindInlet('invert',function(_v){
      _v=parseInt(_v);
      if(!isNaN(_v)){
        _v=(_v>0);
        guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].setValue(_v);
      }
    });
    window.max.bindInlet('dur',function(_v){
      _v=parseFloat(_v);
      if(!isNaN(_v)){
        guiContainer.gui.items[guiContainer.handlers.toDurSlider.id].setNormValue(_v);
      }
    });
    window.max.bindInlet('sensitivity',function(_v){if(isNaN(_v)) return; if(_v<0.0){_v=0.0;}else{if(_v>1.0) _v=1.0;} guiContainer.gui.items[guiContainer.handlers.toSensSlider.id].setNormValue(_v);});
    window.max.bindInlet('vol',function(_v){if(isNaN(_v)) return; if(_v<0.0){_v=0.0;}else{if(_v>1.0) _v=1.0;} guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setNormValue(_v);});
    window.max.bindInlet('segment',function(_v1,_v2){
      _v1=parseInt(_v1);_v2=parseInt(_v2);
      if((!isNaN(_v1))&&(!isNaN(_v2))){
        _v2=(_v2>0);
        visualScoreInterpreter.processor.setSegment(_v1,_v2);
      }
    });
    window.max.bindInlet('note',function(){
      _v1=parseInt(_v1);_v2=parseInt(_v2);
      if((!isNaN(_v1))&&(!isNaN(_v2))){
        _v2=(_v2>0);
        visualScoreInterpreter.processor.setNote(_v1,_v2);
      }
    });
    window.max.bindInlet('tuning',function(_v1,_v2,_v3,_v4,_v5,_v6,_v7,_v8,_v9,_v10,_v11,_v12){
      _v1=parseInt(_v1);_v2=parseInt(_v2);_v3=parseInt(_v3);_v4=parseInt(_v4);_v5=parseInt(_v5);_v6=parseInt(_v6);_v7=parseInt(_v7);_v8=parseInt(_v8);_v9=parseInt(_v9);_v10=parseInt(_v10);_v11=parseInt(_v11);_v12=parseInt(_v12);
      if(isNaN(_v1)||isNaN(_v2)||isNaN(_v3)||isNaN(_v4)||isNaN(_v5)||isNaN(_v6)||isNaN(_v7)||isNaN(_v8)||isNaN(_v9)||isNaN(_v10)||isNaN(_v11)||isNaN(_v12)){
        // bad data
      }else{
        p.setGuiTuningMidiNoteSelector(_v1,_v2,_v3,_v4,_v5,_v6,_v7,_v8,_v9,_v10,_v11,_v12);
      }
    });
  };
  p.initMidi=function(){
    if(!midi.isActive) return;
    if(isNaN(midi.inputPortIndex)) midi.inputPortIndex=-1; midi.inputPortIndex=Math.floor(midi.inputPortIndex);
    if(isNaN(midi.outputPortIndex)) midi.outputPortIndex=-1; midi.outputPortIndex=Math.floor(midi.outputPortIndex);
    midi.processor.init(midi.inputPortIndex,midi.outputPortIndex);
    if((midi.inputPortIndex>=0)||(midi.outputPortIndex>=0)) midi.isActive=true; else midi.isActive=false;
    if(midi.inputPortIndex>=0){
      midi.processor.onCC=function(_midiEvent){p.handleIncomingMidiCCMessages(_midiEvent);};
      midi.processor.onNoteOn=function(_midiEvent){p.handleIncomingMidiNoteOnMessages(_midiEvent);}; // _midiEvent.note.number, _midiEvent.message.channel // _midiEvent.note.attack
      midi.processor.onNoteOff=function(_midiEvent){p.handleIncomingMidiNoteOffMessages(_midiEvent);};
      //midi.processor.onClock=function(_midiEvent){if((midi.ticks%midi.ticksperframe)===0) p.updateCA(); midi.ticks+=1;};
      midi.processor.onStart=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(true);};
      midi.processor.onContinue=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(true);};
      midi.processor.onStop=function(_midiEvent){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(false);};
    }
  };
  p.handleIncomingMidiNoteOnMessages=function(_midiEvent){visualScoreInterpreter.processor.setNote(_midiEvent.note.number,true);};
  p.handleIncomingMidiNoteOffMessages=function(_midiEvent){visualScoreInterpreter.processor.setNote(_midiEvent.note.number,false);};
  p.handleIncomingMidiCCMessages=function(_midiEvent){
    switch(_midiEvent.controller.number){
      case midi.ccmap.in.play: guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.invert: guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.dur: guiContainer.gui.items[guiContainer.handlers.toDurSlider.id].setNormValue(_midiEvent.rawValue/127.0); break;
      case midi.ccmap.in.vol: guiContainer.gui.items[guiContainer.handlers.toVolSlider.id].setNormValue(_midiEvent.rawValue/127.0); break;
      case midi.ccmap.in.loop: guiContainer.gui.items[guiContainer.handlers.toLoopToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.pendulum: guiContainer.gui.items[guiContainer.handlers.toPendulumToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.pos: midi.clock.pos=_midiEvent.rawValue/127.0; break;
      case midi.ccmap.in.sensitivity: guiContainer.gui.items[guiContainer.handlers.toSensSlider.id].setNormValue(_midiEvent.rawValue/127.0); break;
      case midi.ccmap.in.scratchMode: midi.clock.scratchMode=Math.floor(_midiEvent.rawValue)%3; break;
      case midi.ccmap.in.camera: guiContainer.gui.items[guiContainer.handlers.toDisplayCameraToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.dark: guiContainer.gui.items[guiContainer.handlers.toDarkModeToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.dense: guiContainer.gui.items[guiContainer.handlers.toDenseTuningToggle.id].setValue(_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_0: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(0,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_1: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(1,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_2: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(2,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_3: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(3,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_4: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(4,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_5: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(5,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_6: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(6,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_7: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(7,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_8: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(8,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_9: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(9,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_10: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(10,_midiEvent.rawValue>0); break;
      case midi.ccmap.in.tuning_oct_11: guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].setKeyAccessedByIndex(11,_midiEvent.rawValue>0); break;
      default: console.log("[p.handleIncomingMidiCCMessages] unhandled _midiEvent.controller.number: "+_midiEvent.controller.number);
    }
  };
  p.sendFrameDataToMax=function(_dataToSend){
    for(let i=0;i<_dataToSend.length;i++) window.max.outlet("kamtytura","segment",_dataToSend[i].id,p.b2i(_dataToSend[i].isEnabled),_dataToSend[i].midiNote,_dataToSend[i].fill);
    window.max.outlet("kamtytura","pos",midi.clock.pos);
  };
  p.sendFrameDataViaWebSocket=function(_dataToSend){
    for(let i=0;i<_dataToSend.length;i++) webSocket.processor.send(["kamtytura","segment",_dataToSend[i].id,p.b2i(_dataToSend[i].isEnabled),_dataToSend[i].midiNote,_dataToSend[i].fill]);
    webSocket.processor.send(["kamtytura","pos",midi.clock.pos]);
  };
  p.sendFrameDataViaMidi=function(_dataToSend){
    for(let i=0;i<_dataToSend.length;i++) midi.outputPort.sendControlChange(_dataToSend[i].id,Math.round(_dataToSend[i].fill*127.0),midi.channels.outBars); // ctrl,val,chn
    midi.outputPort.sendControlChange(midi.ccmap.out.pos,Math.round(midi.clock.pos*127.0),midi.channels.out);
  };
  p.updateClock=function(_preventStop){
    if(!guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue()){midi.clock.pos=0.0;midi.clock.rawpos=0.0;return;}
    let tempRawPos=midi.clock.rawpos; let tempPos=midi.clock.pos;
    midi.clock.rawpos=((p.getTime(midi.clock.sync)+midi.clock.timeOffset)%(midi.clock.seqdur*1000.0*2.0))/(midi.clock.seqdur*1000.0*2.0);
    if(guiContainer.gui.items[guiContainer.handlers.toPendulumToggle.id].getValue()){
      if(midi.clock.rawpos>=0.5) midi.clock.pos=(1.0-midi.clock.rawpos)*2.0; else midi.clock.pos=midi.clock.rawpos*2.0;
      if((!_preventStop)&&(midi.clock.rawpos<tempRawPos)&&(!guiContainer.gui.items[guiContainer.handlers.toLoopToggle.id].getValue())){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(false);midi.clock.pos=0.0;midi.clock.rawpos=0.0;return;};
    }else{
      if(midi.clock.rawpos>=0.5) midi.clock.pos=(midi.clock.rawpos-0.5)*2.0; else midi.clock.pos=midi.clock.rawpos*2.0;
      if((!_preventStop)&&(midi.clock.pos<tempPos)&&(!guiContainer.gui.items[guiContainer.handlers.toLoopToggle.id].getValue())){guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].setValue(false);midi.clock.pos=0.0;midi.clock.rawpos=0.0;return;};
    }
  };
  p.initCaptureDevice=function(_w,_h){
    let b=p._initCaptureDevice(_w,_h);
    if((!b)&&(visualScoreInterpreter.capture.facingMode!=="default")){
      console.log("[p.initCaptureDevice] can't access capture device against current facing mode ("+visualScoreInterpreter.capture.facingMode+"), trying to access default mode instead...");
      visualScoreInterpreter.capture.facingMode="default"; p._initCaptureDevice(_w,_h);
    };
  }
  p._initCaptureDevice=function(_w,_h){
    let result=false;
    switch(visualScoreInterpreter.capture.facingMode){
      case "default":
        try{
          visualScoreInterpreter.capture.processor=p.createCapture(p.VIDEO,{flipped:visualScoreInterpreter.capture.flip});
          visualScoreInterpreter.capture.processor.size(_w,_h);
          visualScoreInterpreter.capture.processor.elt.setAttribute('playsinline', '');
          visualScoreInterpreter.capture.processor.hide();
          console.log('[_initCaptureDevice] capture ready: '+visualScoreInterpreter.capture.processor.width+' '+visualScoreInterpreter.capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "user":
        try{
          //imageProcessor.capture.processor=p.createCapture({audio:false,video:{facingMode:{exact:"user"}}});
          visualScoreInterpreter.capture.processor=p.createCapture(p.VIDEO,{video:{facingMode:{exact:"user"}},flipped:visualScoreInterpreter.capture.flip});
          visualScoreInterpreter.capture.processor.size(_w,_h);
          visualScoreInterpreter.capture.processor.elt.setAttribute('playsinline', '');
          visualScoreInterpreter.capture.processor.hide();
          console.log('[_initCaptureDevice] capture ready: '+visualScoreInterpreter.capture.processor.width+' '+visualScoreInterpreter.capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "environment":
        try{
          //imageProcessor.capture=p.createCapture({audio:false,video:{facingMode:{exact:"environment"}}});
          visualScoreInterpreter.capture.processor=p.createCapture(p.VIDEO,{video:{facingMode:{exact:"environment"}},flipped:visualScoreInterpreter.capture.flip});
          visualScoreInterpreter.capture.processor.size(_w,_h);
          visualScoreInterpreter.capture.processor.elt.setAttribute('playsinline', '');
          visualScoreInterpreter.capture.processor.hide();
          console.log('[initCaptureDevice] capture ready: '+visualScoreInterpreter.capture.processor.width+' '+visualScoreInterpreter.capture.processor.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      default: console.log("[_initCaptureDevice] unhandled facingMode: "+visualScoreInterpreter.capture.facingMode);
    }
    return result;
  };
  p.initVisualScoreInterpreter=function(){
    if(visualScoreInterpreter.isActive){
      //visualScoreInterpreter.capture.processor=p.createCapture(p.VIDEO,{flipped:visualScoreInterpreter.capture.flip});
      //visualScoreInterpreter.capture.processor.size(visualScoreInterpreter.capture.w,visualScoreInterpreter.capture.h);
      //visualScoreInterpreter.capture.processor.hide();
      p.initCaptureDevice(visualScoreInterpreter.capture.w,visualScoreInterpreter.capture.h);
      visualScoreInterpreter.roi.processor.calcRoi(visualScoreInterpreter.capture.processor,p,visualScoreInterpreter.roi);
      visualScoreInterpreter.processor.init(visualScoreInterpreter.capture.processor.width,visualScoreInterpreter.capture.processor.height);
      visualScoreInterpreter.capture.helperCanvas=p.createGraphics(visualScoreInterpreter.capture.w,visualScoreInterpreter.capture.h);
    }
  };
  p.updateVisualScoreInterpreter=function(){
    if(visualScoreInterpreter.isActive){
      visualScoreInterpreter.roi.processor.calcRoi(p,visualScoreInterpreter.capture.processor,visualScoreInterpreter.roi);
      if(theme.darkmode)
        visualScoreInterpreter.processor.updateWithRoi(visualScoreInterpreter.capture.processor, visualScoreInterpreter.roi, midi.clock.pos,"dark");
      else
        visualScoreInterpreter.processor.updateWithRoi(visualScoreInterpreter.capture.processor, visualScoreInterpreter.roi, midi.clock.pos,"light");
      //visualScoreInterpreter.processor.updateWithRoi(visualScoreInterpreter.capture.processor, visualScoreInterpreter.roi, midi.clock.pos);
    }
  };
  p.drawBackgroundBars=function(){
    let segh=p.height/visualScoreInterpreter.processor.playhead.resolution; p.noStroke(); p.fill(128,128);
    for(let i=0;i<visualScoreInterpreter.processor.playhead.resolution;i++) if(i%2===0) p.rect(0,i*segh,p.width,segh);
  };
  p.drawVisualScoreInterpreter=function(){
    if(visualScoreInterpreter.isActive){
      p.blendMode(p.DIFFERENCE);
      p.tint(255,220); visualScoreInterpreter.roi.processor.imageWithRoi(p,visualScoreInterpreter.processor.gfx,visualScoreInterpreter.roi,Roi.MIRROR_NONE); p.noTint();
      p.blendMode(p.BLEND);
      if(guiContainer.gui.items[guiContainer.handlers.toDisplayCameraToggle.id].getValue()){
        visualScoreInterpreter.capture.helperCanvas.image(visualScoreInterpreter.capture.processor,0,0);
        visualScoreInterpreter.capture.helperCanvas.filter(p.GRAY);
        if(guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].getValue()) visualScoreInterpreter.capture.helperCanvas.filter(p.INVERT);
        p.tint(255,128);
        visualScoreInterpreter.roi.processor.imageWithRoi(p,visualScoreInterpreter.capture.helperCanvas,visualScoreInterpreter.roi,Roi.MIRROR_NONE);
        p.noTint();
      }
      if(theme.darkmode)
        visualScoreInterpreter.processor.drawWithRoi(visualScoreInterpreter.roi,guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue(),"dark");
      else
        visualScoreInterpreter.processor.drawWithRoi(visualScoreInterpreter.roi,guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue(),"light");
    }
  };
  /*
  p.drawVisualScoreInterpreter=function(){
    if(visualScoreInterpreter.isActive){
      if(!theme.darkmode) p.blendMode(p.DIFFERENCE);
      p.tint(255,220); visualScoreInterpreter.roi.processor.imageWithRoi(p,visualScoreInterpreter.processor.gfx,visualScoreInterpreter.roi,Roi.MIRROR_NONE); p.noTint();
      if(!theme.darkmode) p.blendMode(p.BLEND);
      if(guiContainer.gui.items[guiContainer.handlers.toDisplayCameraToggle.id].getValue()){
        visualScoreInterpreter.capture.helperCanvas.image(visualScoreInterpreter.capture.processor,0,0);
        visualScoreInterpreter.capture.helperCanvas.filter(p.GRAY);
        if(guiContainer.gui.items[guiContainer.handlers.toInvertToggle.id].getValue()) visualScoreInterpreter.capture.helperCanvas.filter(p.INVERT);
        p.tint(255,128);
        visualScoreInterpreter.roi.processor.imageWithRoi(p,visualScoreInterpreter.capture.helperCanvas,visualScoreInterpreter.roi,Roi.MIRROR_NONE);
        p.noTint();
      }
      if(theme.darkmode)
        visualScoreInterpreter.processor.drawWithRoi(visualScoreInterpreter.roi,guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue(),"dark");
      else
        visualScoreInterpreter.processor.drawWithRoi(visualScoreInterpreter.roi,guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue(),"light");
    }
  };
  */
  p.setGuiTuningMidiNoteSelector=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.setupGui=function(){
    guiContainer.gui = new GUI(p,true,420,310,false);
    guiContainer.gui.setBackgroundPanelRect(20,20,380,310,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,70,90,30,GUI.ORIENTATION_HORIZONTAL,defInvert,guiContainer.getLabelByLang(guiContainer.handlers.toInvertToggle));
    gui_tgl_inv.onChange=function(_id,_v){
      visualScoreInterpreter.processor.shaderColorProcessor.invert=(_v>0);
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","invert",p.b2i(_v)]);
      if(maxIsDetected) window.max.outlet("kamtytura","invert",p.b2i(_v));
      p.safeSendMidiCC(midi.ccmap.out.invert,p.b2i(_v),midi.channels.out);
    };
    guiContainer.handlers.toInvertToggle.id=guiContainer.gui.addItem(gui_tgl_inv);
    let gui_tgl_cam = new SimpleToggle(230,70,90,30,GUI.ORIENTATION_HORIZONTAL,defCamera,guiContainer.getLabelByLang(guiContainer.handlers.toDisplayCameraToggle));
    gui_tgl_cam.onChange=function(_id,_v){
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","camera",p.b2i(_v)]);
      if(maxIsDetected) window.max.outlet("kamtytura","camera",p.b2i(_v));
      p.safeSendMidiCC(midi.ccmap.out.camera,p.b2i(_v),midi.channels.out);
    };
    guiContainer.handlers.toDisplayCameraToggle.id=guiContainer.gui.addItem(gui_tgl_cam);
    let gui_tgl_drk = new SimpleToggle(130,70,90,30,GUI.ORIENTATION_HORIZONTAL,defDark,guiContainer.getLabelByLang(guiContainer.handlers.toDarkModeToggle));
    gui_tgl_drk.onChange=function(_id,_v){
      theme.darkmode=(_v>0);
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","dark",p.b2i(_v)]);
      if(maxIsDetected) window.max.outlet("kamtytura","dark",p.b2i(_v));
      p.safeSendMidiCC(midi.ccmap.out.dark,p.b2i(_v),midi.channels.out);
    };
    guiContainer.handlers.toDarkModeToggle.id=guiContainer.gui.addItem(gui_tgl_drk);
    let gui_tgl_play = new SimpleToggle(30,30,90,30,GUI.ORIENTATION_HORIZONTAL,defPlay,guiContainer.getLabelByLang(guiContainer.handlers.toPlayToggle));
    gui_tgl_play.onChange=function(_id,_v){
      if(_v) midi.clock.timeOffset=-p.getTime(midi.clock.sync)%(midi.clock.seqdur*1000.0*2.0);
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","play",p.b2i(_v)]);
      if(maxIsDetected) window.max.outlet("kamtytura","play",p.b2i(_v));
      p.safeSendMidiCC(midi.ccmap.out.play,p.b2i(_v),midi.channels.out);
    };
    guiContainer.handlers.toPlayToggle.id=guiContainer.gui.addItem(gui_tgl_play);
    let gui_tgl_pndlm = new SimpleToggle(130,30,90,30,GUI.ORIENTATION_HORIZONTAL,defPendulum,guiContainer.getLabelByLang(guiContainer.handlers.toPendulumToggle));
    gui_tgl_pndlm.onChange=function(_id,_v){
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","pendulum",p.b2i(_v)]);
      if(maxIsDetected) window.max.outlet("kamtytura","pendulum",p.b2i(_v));
      p.safeSendMidiCC(midi.ccmap.out.pendulum,p.b2i(_v),midi.channels.out);
    };
    guiContainer.handlers.toPendulumToggle.id=guiContainer.gui.addItem(gui_tgl_pndlm);
    let gui_tgl_loop = new SimpleToggle(230,30,90,30,GUI.ORIENTATION_HORIZONTAL,defLoop,guiContainer.getLabelByLang(guiContainer.handlers.toLoopToggle));
    gui_tgl_loop.onChange=function(_id,_v){
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","loop",p.b2i(_v)]);
      if(maxIsDetected) window.max.outlet("kamtytura",'loop',p.b2i(_v));
      p.safeSendMidiCC(midi.ccmap.out.loop,p.b2i(_v),midi.channels.out);
    };
    guiContainer.handlers.toLoopToggle.id=guiContainer.gui.addItem(gui_tgl_loop);
    let gui_sld_sns = new SimpleSlider(30,110,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,defSensitivity,guiContainer.getLabelByLang(guiContainer.handlers.toSensSlider));
    gui_sld_sns.onChange=function(_id,_v){
      visualScoreInterpreter.processor.shaderColorProcessor.threshold=1.0-_v;
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","sensitivity",_v]);
      if(maxIsDetected) window.max.outlet("kamtytura",'sensitivity',_v);
      p.safeSendMidiCC(midi.ccmap.out.sensitivity,Math.floor(_v*127.0),midi.channels.out);
    };
    guiContainer.handlers.toSensSlider.id=guiContainer.gui.addItem(gui_sld_sns);
    let gui_sld_dur = new SimpleSlider(30,150,360,30,GUI.ORIENTATION_HORIZONTAL,true,7.0,30.0,defDur,guiContainer.getLabelByLang(guiContainer.handlers.toDurSlider));
    gui_sld_dur.onChange=function(_id,_v){
      midi.clock.seqdur=_v;
      if(!guiContainer.gui.items[guiContainer.handlers.toPlayToggle.id].getValue()){midi.clock.pos=0.0;midi.clock.rawpos=0.0;return;}
      //let tempRawPos=midi.clock.rawpos; let tempPos=midi.clock.pos;
      let tempRawPos=(p.getTime(midi.clock.sync)%(midi.clock.seqdur*1000.0*2.0))/(midi.clock.seqdur*1000.0*2.0);
      midi.clock.timeOffset=(midi.clock.rawpos-tempRawPos)*(midi.clock.seqdur*1000.0*2.0);
      p.updateClock(true);
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","dur",_v]);
      if(maxIsDetected) window.max.outlet("kamtytura",'dur',_v);
      p.safeSendMidiCC(midi.ccmap.out.dur,Math.floor(guiContainer.gui.items[guiContainer.handlers.toDurSlider.id].calcNormValue()*127.0),midi.channels.out);
    };
    guiContainer.handlers.toDurSlider.id=guiContainer.gui.addItem(gui_sld_dur);
    let gui_mns_tng = new SimpleMidiNotesSelector(30,190,30,30,GUI.ORIENTATION_HORIZONTAL,36,12);
    gui_mns_tng.onChange=function(_id,_key,_status){
      let arr=guiContainer.gui.items[_id].getAllValuesAsArray();
      visualScoreInterpreter.processor.setTuningWithOctave(arr);
      synth.tune(visualScoreInterpreter.processor.playhead.status);
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","tuning",p.b2i(arr[0]),p.b2i(arr[1]),p.b2i(arr[2]),p.b2i(arr[3]),p.b2i(arr[4]),p.b2i(arr[5]),p.b2i(arr[6]),p.b2i(arr[7]),p.b2i(arr[8]),p.b2i(arr[9]),p.b2i(arr[10]),p.b2i(arr[11])]);
      if(maxIsDetected) window.max.outlet('"kamtytura",tuning',p.b2i(arr[0]),p.b2i(arr[1]),p.b2i(arr[2]),p.b2i(arr[3]),p.b2i(arr[4]),p.b2i(arr[5]),p.b2i(arr[6]),p.b2i(arr[7]),p.b2i(arr[8]),p.b2i(arr[9]),p.b2i(arr[10]),p.b2i(arr[11]));
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_0,p.b2i(arr[0]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_1,p.b2i(arr[1]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_2,p.b2i(arr[2]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_3,p.b2i(arr[3]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_4,p.b2i(arr[4]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_5,p.b2i(arr[5]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_6,p.b2i(arr[6]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_7,p.b2i(arr[7]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_8,p.b2i(arr[8]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_9,p.b2i(arr[9]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_10,p.b2i(arr[10]),midi.channels.out);
      p.safeSendMidiCC(midi.ccmap.out.tuning_oct_11,p.b2i(arr[11]),midi.channels.out);
    };
    gui_mns_tng.setKeyAccessedByIndex(0,true);
    gui_mns_tng.setKeyAccessedByIndex(2,true);
    gui_mns_tng.setKeyAccessedByIndex(4,true);
    gui_mns_tng.setKeyAccessedByIndex(5,true);
    gui_mns_tng.setKeyAccessedByIndex(7,true);
    gui_mns_tng.setKeyAccessedByIndex(9,true);
    gui_mns_tng.setKeyAccessedByIndex(11,true);
    guiContainer.handlers.toMidiNoteSelector.id=guiContainer.gui.addItem(gui_mns_tng);
    let gui_tgl_dns = new SimpleToggle(30,230,90,30,GUI.ORIENTATION_HORIZONTAL,defDense,guiContainer.getLabelByLang(guiContainer.handlers.toDenseTuningToggle));
    gui_tgl_dns.onChange=function(_id,_v){
      if(_v) visualScoreInterpreter.processor.tuningMode=VisualScore.TUNING_MODE_DENSE; else visualScoreInterpreter.processor.tuningMode=VisualScore.TUNING_MODE_EXCLUSIVE;
      if(guiContainer.handlers.toMidiNoteSelector.id>=0){
        guiContainer.gui.items[guiContainer.handlers.toMidiNoteSelector.id].broadcast();
      }
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","dense",p.b2i(_v)]);
      if(maxIsDetected) window.max.outlet("kamtytura",'dense',p.b2i(_v));
      p.safeSendMidiCC(midi.ccmap.out.dense,p.b2i(_v),midi.channels.out);
    };
    guiContainer.handlers.toInvertToggle.id=guiContainer.gui.addItem(gui_tgl_dns);
    let gui_sld_vol = new SimpleSlider(30,270,360,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,defVol,guiContainer.getLabelByLang(guiContainer.handlers.toVolSlider));
    gui_sld_vol.onChange=function(_id,_v){
      synth.globalAmpFactor=Math.pow(_v,2);
      if(webSocket.isActive) webSocket.processor.safeSend(["kamtytura","vol",_v]);
      if(maxIsDetected) window.max.outlet("kamtytura",'vol',_v);
      p.safeSendMidiCC(midi.ccmap.out.vol,Math.floor(_v*127.0),midi.channels.out);
    };
    guiContainer.handlers.toVolSlider.id=guiContainer.gui.addItem(gui_sld_vol);
    if(guiContainer.isActive){
        guiContainer.gui.enableAllItems(); p.cursor();
        guiContainer.gui.setBackgroundPanelVisibility(true);
    }else{
      guiContainer.gui.disableAllItems();
      guiContainer.gui.setBackgroundPanelVisibility(false);
      if(!guiContainer.pointer) p.noCursor();
    }
    //guiContainer.gui.forceBroadcast();
  };
  p.handleUrlParams=function(){
    try{
      let urlparams = p.getURLParams();
      if(urlparams){
        if("gui" in urlparams){let v=parseInt(urlparams.gui); if(!isNaN(v)){guiContainer.isActive=(v>0);}console.log("[p.handleUrlParams] gui: "+guiContainer.isActive);}
        if("mirror" in urlparams){let v=parseInt(urlparams.mirror); if(!isNaN(v)){visualScoreInterpreter.capture.flip=(v>0);} console.log("[p.handleUrlParams] mirror: "+(v>0));}
        if("famo" in urlparams){
          visualScoreInterpreter.capture.facingMode=decodeURIComponent(urlparams.famo);
          visualScoreInterpreter.capture.facingMode=visualScoreInterpreter.capture.facingMode.toLowerCase();
          if(visualScoreInterpreter.capture.facingMode==="env") visualScoreInterpreter.capture.facingMode="environment";
          console.log("[p.handleUrlParams] camera facing mode: "+visualScoreInterpreter.capture.facingMode);}
        if("pointer" in urlparams){
          let v=parseInt(urlparams.pointer); if(!isNaN(v)){if(v>0) p.cursor(); else p.noCursor(); theme.pointer=(v>0);}
          console.log("[p.handleUrlParams] pointer: "+theme.pointer);
        }
        if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0);} console.log("[p.handleUrlParams] worker: "+useWorker);}
        if("lang" in urlparams){guiContainer.lang=decodeURIComponent(urlparams.lang);console.log("[p.handleUrlParams] lang: "+guiContainer.lang);}
        if("ws" in urlparams){webSocket.address="ws://"+decodeURIComponent(urlparams.ws)+"/"; webSocket.isActive=true; console.log("[p.handleUrlParams] (ws) webSocket.address: "+webSocket.address);}
        if("xws" in urlparams){webSocket.address=decodeURIComponent(urlparams.xws); webSocket.isActive=true; console.log("[p.handleUrlParams] (xws) webSocket.address: "+webSocket.address);}
        if("midiinport" in urlparams){let v=parseInt(urlparams.midiinport); if(!isNaN(v)){midi.inputPortIndex=v; console.log("[p.handleUrlParams] MIDI input port index: "+v);}}
        //if("midiinchn" in urlparams){if(!isNaN(urlparams.midiinchn)){midi.channels.in=(Math.abs(Math.floor(urlparams.midiinchn))%16); console.log("[p.handleUrlParams] MIDI input channel index: "+v);}}
        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.channels.out=(Math.abs(Math.floor(urlparams.midioutchn))%16);; console.log("[p.handleUrlParams] MIDI output channel index for interface data: "+v);}}
        if("midioutbarschn" in urlparams){if(!isNaN(urlparams.midioutbarschn)){midi.channels.outBars=(Math.abs(Math.floor(urlparams.midioutbarschn))%16);; console.log("[p.handleUrlParams] MIDI output channel index for bars data: "+v);}}
        if("synth" in urlparams){let v=parseInt(urlparams.synth); if(!isNaN(v)){synth.isActive=(v>0);} console.log("[p.handleUrlParams] synth: "+synth.isActive);}
        //if("tps" in urlparams){let v=parseInt(urlparams.tps); if(!isNaN(v)){v=Math.floor(v); if(v>=1) midi.ticksperframe=v;} console.log("[p.handleUrlParams] ticks per frame: "+v);}
        if("clock" in urlparams){let v=parseInt(urlparams.clock); if(!isNaN(v)){v=(v>0); midi.clock.auto=v;} console.log("[p.handleUrlParams] clock: "+v);}
        if("scratch" in urlparams){let v=parseInt(urlparams.scratch); if(!isNaN(v)){if((v>=0)&&(v<=2)) midi.clock.scratchMode=v;} console.log("[p.handleUrlParams] scratch mode: "+v);}
        if("play" in urlparams){let v=parseInt(urlparams.play); if(!isNaN(v)){defPlay=(v>0);} console.log("[p.handleUrlParams] play: "+v);}
        if("loop" in urlparams){let v=parseInt(urlparams.loop); if(!isNaN(v)){defLoop=(v>0);} console.log("[p.handleUrlParams] loop: "+v);}
        if("pendulum" in urlparams){let v=parseInt(urlparams.pendulum); if(!isNaN(v)){defPendulum=(v>0);} console.log("[p.handleUrlParams] pendulum: "+v);}
        if("dark" in urlparams){let v=parseInt(urlparams.dark); if(!isNaN(v)){defDark=(v>0);} console.log("[p.handleUrlParams] dark: "+v);}
        if("invert" in urlparams){let v=parseInt(urlparams.invert); if(!isNaN(v)){defInvert=(v>0);} console.log("[p.handleUrlParams] invert: "+v);}
        if("camera" in urlparams){let v=parseInt(urlparams.camera); if(!isNaN(v)){defCamera=(v>0);} console.log("[p.handleUrlParams] camera: "+v);}
        if("dense" in urlparams){let v=parseInt(urlparams.dense); if(!isNaN(v)){defDense=(v>0);} console.log("[p.handleUrlParams] dense: "+v);}
        if("dur" in urlparams){let v=parseFloat(urlparams.dur); if(!isNaN(v)){if(v<0.0) v=0.0; defDur=v;} console.log("[p.handleUrlParams] dur: "+v);}
        if("sens" in urlparams){let v=parseFloat(urlparams.sens); if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; defSensitivity=v;} console.log("[p.handleUrlParams] sens: "+v);}
        if("vol" in urlparams){let v=parseFloat(urlparams.vol); if(!isNaN(v)){if(v<0.0) v=0.0; if(v>1.0) v=1.0; defVol=v;} console.log("[p.handleUrlParams] vol: "+v);}        
        if("w" in urlparams){let v=parseInt(urlparams.w); if(!isNaN(v)){if(v>0) visualScoreInterpreter.capture.w=v; console.log("[p.handleUrlParams] visualScoreInterpreter.capture.w: "+v);}}
        if("h" in urlparams){let v=parseInt(urlparams.h); if(!isNaN(v)){if(v>0) visualScoreInterpreter.capture.h=v; console.log("[p.handleUrlParams] visualScoreInterpreter.capture.h: "+v);}}
        if("resolution" in urlparams){let v=parseInt(urlparams.resolution); if(!isNaN(v)){if(v>1) visualScoreInterpreter.processor.playhead.resolution=v; console.log("[p.handleUrlParams] resolution: "+v);}}
        if("tuning" in urlparams){
          let v=parseInt(urlparams.tuning);
          if(!isNaN(v)){
            let s=""+v; for(let i=0;i<guiContainer.storedTuning.length;i++) guiContainer.storedTuning[i]=false;
            for(let i=0;i<s.length();i++){let n=s.length()-i-1; if((n>=0)&&(n<s.length())){if(s.charAt(n)!=='0')guiContainer.storedTuning[n]=true;}else{break;}}
            let b=true; for(let i=0;i<guiContainer.storedTuning.length;i++) if(guiContainer.storedTuning[i]){b=false;break;}
            if(b) for(let i=0;i<guiContainer.storedTuning.length;i++) guiContainer.storedTuning[i]=true;
          }
        }
      }
    }catch(_e){console.log("[setup] _e: "+_e);}
  };
  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>0) return 1; return 0;};
  p.b2int=function(_v){return p.b2i(_v)};
  p.getTime=function(_sync){
    let result = 0.0;
    if(_sync){
      let d = new Date(); result = d.getTime();
    }else{result = p.millis();}
    return result;
  };
};
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.);
								

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

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

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

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

									colorprocessor.frag
									#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vTexCoord; // grab texcoords from vert shader

uniform sampler2D tex0;
uniform float thresh;
uniform float inv;

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

void main() {
  vec4 tex = texture2D(tex0, vec2(vTexCoord.s,1.0-vTexCoord.t));
  //float br = 1.0 - ( tex.r + tex.g + tex.b ) * 0.3333;
  float br = (tex.r + tex.g + tex.b) * 0.33333;
  if(inv>0.0) br=1.0-br;
  if(br>thresh) br=1.0; else br=0.0;
  gl_FragColor = vec4(br,br,br,br);
}
								

									visualscore.js
									class VisualScore{
  static get TUNING_MODE_DENSE(){return 1;}
  static get TUNING_MODE_EXCLUSIVE(){return 2;}
  constructor(_p){
    this.p=_p; this.gfx=null; this.tuningMode=VisualScore.TUNING_MODE_EXCLUSIVE;
    this.noteRange={min:24,max:108};
     this.shaderColorProcessor={
      shader:null,
      threshold:0.7, invert:false
    };
    this.playhead={
      pos:0.0, step:0.0001, prevUpdateTimetag:0,
      resolution:22,
      status:[], storedStatus:[] // {isEnabled:b, fill:normf, midiNote:i[-1 if isEnabled is false];}
    };
  }
  huskFreshDataToSend(){
    let result=[];
    for(let i=0;i<this.playhead.resolution;i++){
      if(
        (this.playhead.storedStatus[i].isEnabled!==this.playhead.status[i].isEnabled)||
        (this.playhead.storedStatus[i].fill!==this.playhead.status[i].fill)||
        (this.playhead.storedStatus[i].midiNote!==this.playhead.status[i].midiNote)
      ){
        result[result.length]={
          id:(this.playhead.resolution-i-1),
          isEnabled:this.playhead.status[i].isEnabled,
          fill:this.playhead.status[i].fill,
          midiNote:this.playhead.status[i].midiNote
        };
      }
    }
    this.storeStatus(); return result;
  }
  storeStatus(){
    for(let i=0;i<this.playhead.resolution;i++){
      this.playhead.storedStatus[i].isEnabled=this.playhead.status[i].isEnabled;
      this.playhead.storedStatus[i].fill=this.playhead.status[i].fill;
      this.playhead.storedStatus[i].midiNote=this.playhead.status[i].midiNote;
    }
  }
  setNote(_noteIndex,_val){
    if(isNaN(_noteIndex)) return; _noteIndex=Math.floor(_noteIndex); if((_noteIndex<0)||(_noteIndex>127)) return;
    for(let i=0;i<this.playhead.resolution;i++){
      if(this.playhead.status[i].midiNote===_noteIndex){
        if(_val>0){
          if(this.playhead.status[i].midiNote>=0) this.playhead.status[i].isEnabled=true;
        }else{
          this.playhead.status[i].isEnabled=false;
        }
      }
    }
  }
  setSegment(_segmentIndex,_val){
    if(isNaN(_segmentIndex)) return; _segmentIndex=Math.floor(_segmentIndex); if(_segmentIndex<0) _segmentIndex=0; if(_segmentIndex>=this.playhead.resolution) _segmentIndex=this.playhead.resolution-1;
    this.playhead.status[this.playhead.resolution-_segmentIndex-1].isEnabled=(_val>0);
  }
  setPitchRange(_lowestNote,_highestNote){
    if(isNaN(_lowestNote)){console.log("[VisualScore, tuneWithOctave] _lowestNote is NaN: "+_lowestNote); return;}
    if(isNaN(_highestNote)){console.log("[VisualScore, tuneWithOctave] _highestNote is NaN: "+_highestNote); return;}
    _lowestNote=Math.abs(Math.floor(_lowestNote));_highestNote=Math.abs(Math.floor(_highestNote));
    let n=_lowestNote; if(_lowestNote>_highestNote){_lowestNote=_highestNote;_highestNote=n;n=_lowestNote;}
    this.noteRange.min=_lowestNote; this.noteRange.max=_highestNote;
  }
  setTuningWithOctave(_octArr){
    if(!Array.isArray(_octArr)){console.log("[VisualScore, tuneWithOctave] _octArr is not an array: "+_octArr); return;}
    if(_octArr.length!==12){console.log("[VisualScore, tuneWithOctave] _octArr.length!==12, _octArr.length = "+_octArr); return;}
    for(let i=0;i<this.playhead.resolution;i++){this.playhead.status[i].isEnabled=false;this.playhead.status[i].fill=0.0;this.playhead.status[i].midiNote=-1;}
    let activeNotes=0; for(let i=0;i<_octArr.length;i++){if(_octArr[i]) activeNotes+=1;} if(activeNotes===0) return;
    let incdec=1; let n=this.noteRange.min; let maxSafetyIterations=512;
    switch(this.tuningMode){
      case VisualScore.TUNING_MODE_DENSE:
        for(let i=this.playhead.resolution-1;i>=0;i--){
          this.playhead.status[i].isEnabled=true;this.playhead.status[i].midiNote=n;
          if(_octArr[n%12]){
            //console.log("[VisualScore, tuneWithOctave] tuning (layer/note): "+i+"/"+this.playhead.status[i].midiNote);
            if(((n+incdec)>this.noteRange.max)||((n+incdec)<this.noteRange.min)) incdec*=-1;
            n+=incdec;
          }else{
            for(let j=0;j<maxSafetyIterations;j++){
              if(((n+incdec)>this.noteRange.max)||((n+incdec)<this.noteRange.min)) incdec*=-1;
              n+=incdec; this.playhead.status[i].midiNote=n;
              if(_octArr[n%12]){
                //console.log("[VisualScore, tuneWithOctave] tuning (layer/note): "+i+"/"+this.playhead.status[i].midiNote);
                if(((n+incdec)>this.noteRange.max)||((n+incdec)<this.noteRange.min)) incdec*=-1;
                n+=incdec;
                break;
              }
            }
          }
        }
      break;
      case VisualScore.TUNING_MODE_EXCLUSIVE:
        for(let i=this.playhead.resolution-1;i>=0;i--){
          this.playhead.status[i].midiNote=n;
          if(_octArr[n%12]){
            this.playhead.status[i].isEnabled=true;
          }else{
            this.playhead.status[i].isEnabled=false;this.playhead.status[i].midiNote=-1;
          }
          if(((n+incdec)>this.noteRange.max)||((n+incdec)<this.noteRange.min)) incdec*=-1;
          n+=incdec; //console.log("[VisualScore, tuneWithOctave] tuning (layer/note): "+i+"/"+this.playhead.status[i].midiNote);
        }
      break;
      default: console.log("[VisualScore, tune] unhandled tuningMode: "+this.tuningMode);
    }
  }
  preload(){
    this.shaderColorProcessor.shader=this.p.loadShader('colorprocessor.vert', 'colorprocessor.frag');
  }
  init(_w,_h){
    this.gfx = this.p.createGraphics(_w,_h,this.p.WEBGL);
    this.gfx.pixelDensity(1);
    for(let i=0;i<this.playhead.resolution;i++){
      this.playhead.status[i]={isEnabled:true,fill:0.0,midiNote:i};
      this.playhead.storedStatus[i]={isEnabled:true,fill:0.0,midiNote:i};
    }
  }
  updateWithRoi(_srcImg,_roi,_normPlayheadPos,_theme){
    this.playhead.pos=_normPlayheadPos;
    this.playhead.prevUpdateTimetag=this.p.millis();
    if(!_srcImg) return; if(!_srcImg.width||!_srcImg.height) return;
    this.gfx.clear();
    this.gfx.shader(this.shaderColorProcessor.shader);
    if(_theme==="dark") this.shaderColorProcessor.shader.setUniform('inv',1.0); else this.shaderColorProcessor.shader.setUniform('inv',0.0);
    this.shaderColorProcessor.shader.setUniform('thresh',this.shaderColorProcessor.threshold);
    this.shaderColorProcessor.shader.setUniform('tex0',_srcImg);
    this.gfx.rect(0,0,this.gfx.width,this.gfx.height);
    if(this.shaderColorProcessor.invert){
      if(_theme==="dark"){
        this.huskCurrentStatus(_roi,false);
      }else{
        this.huskCurrentStatus(_roi,true);
      }
    }else{
      if(_theme==="dark"){
        this.huskCurrentStatus(_roi,true);
      }else{
        this.huskCurrentStatus(_roi,false);
      }
    }
  }
  drawBarsWithRoi(_roi){
    let segh=this.p.height/this.playhead.resolution; // to finish!
    for(let i=0;i<this.playhead.resolution;i++){
      if(i%2===0){
        this.p.noStroke(); this.p.fill(128,40);
        this.p.rect(0,i*segh,this.p.width,segh);
      }
    }
  }
  calcContrastNormVal(_v){
    let v1=1.0-_v; let v2=Math.abs(_v-0.5)*2;
    if(Math.abs(v1-_v)>Math.abs(v2-_v)) return v1;
    return v2;
  }
  drawPlayheadWithRoi(_roi,_w,_r,_theme,_invert){
    if(_theme==="dark"){
      if(_invert)
        this.drawPlayheadWithRoiAndDarkThemeInverted(_roi,_w,_r);
      else
        this.drawPlayheadWithRoiAndDarkThemeNormal(_roi,_w,_r);
    }else{
      if(_theme==="light"){
        if(_invert)
          this.drawPlayheadWithRoiAndLightThemeInverted(_roi,_w,_r);
        else
          this.drawPlayheadWithRoiAndLightThemeNormal(_roi,_w,_r);
      }
    }
  }
  drawPlayheadWithRoiAndLightThemeNormal(_roi,_w,_r){
    let segh=this.p.height/this.playhead.resolution; // to finish!
    let x=this.playhead.pos*this.p.width; // to finish!
    this.p.noStroke();
    for(let i=0;i<this.playhead.resolution;i++){
      if((this.playhead.status[i].midiNote>=0)&&this.playhead.status[i].isEnabled){
        this.p.fill(this.calcContrastNormVal(this.playhead.status[i].fill)*255);
        this.p.rect(x-_w*0.5,i*segh,_w,segh,_r,_r,_r,_r);
        this.p.fill(this.playhead.status[i].fill*255);
        this.p.rect(x-_w*0.5+1,i*segh+1,_w-2,segh-2,_r,_r,_r,_r);
      }else{
        this.p.fill(this.calcContrastNormVal(this.playhead.status[i].fill)*255);
        this.p.rect(x-2,i*segh,4,segh);
        this.p.fill(this.playhead.status[i].fill*255);
        this.p.rect(x-1,i*segh+1,2,segh-2);
      }
    }
  }
  drawPlayheadWithRoiAndLightThemeInverted(_roi,_w,_r){
    let segh=this.p.height/this.playhead.resolution; // to finish!
    let x=this.playhead.pos*this.p.width; // to finish!
    this.p.noStroke();
    for(let i=0;i<this.playhead.resolution;i++){
      if((this.playhead.status[i].midiNote>=0)&&this.playhead.status[i].isEnabled){
        this.p.fill(this.calcContrastNormVal(1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-_w*0.5,i*segh,_w,segh,_r,_r,_r,_r);
        this.p.fill((1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-_w*0.5+1,i*segh+1,_w-2,segh-2,_r,_r,_r,_r);
      }else{
        this.p.fill(this.calcContrastNormVal(1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-2,i*segh,4,segh);
        this.p.fill((1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-1,i*segh+1,2,segh-2);
      }
    }
  }
  drawPlayheadWithRoiAndDarkThemeNormal(_roi,_w,_r){
    let segh=this.p.height/this.playhead.resolution; // to finish!
    let x=this.playhead.pos*this.p.width; // to finish!
    this.p.noStroke();
    for(let i=0;i<this.playhead.resolution;i++){
      if((this.playhead.status[i].midiNote>=0)&&this.playhead.status[i].isEnabled){
        this.p.fill(this.calcContrastNormVal(1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-_w*0.5,i*segh,_w,segh,_r,_r,_r,_r);
        this.p.fill((1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-_w*0.5+1,i*segh+1,_w-2,segh-2,_r,_r,_r,_r);
      }else{
        this.p.fill(this.calcContrastNormVal(1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-2,i*segh,4,segh);
        this.p.fill((1.0-this.playhead.status[i].fill)*255);
        this.p.rect(x-1,i*segh+1,2,segh-2);
      }
    }
  }
  drawPlayheadWithRoiAndDarkThemeInverted(_roi,_w,_r){
    let segh=this.p.height/this.playhead.resolution; // to finish!
    let x=this.playhead.pos*this.p.width; // to finish!
    this.p.noStroke();
    for(let i=0;i<this.playhead.resolution;i++){
      if((this.playhead.status[i].midiNote>=0)&&this.playhead.status[i].isEnabled){
        this.p.fill(this.calcContrastNormVal(this.playhead.status[i].fill)*255);
        this.p.rect(x-_w*0.5,i*segh,_w,segh,_r,_r,_r,_r);
        this.p.fill(this.playhead.status[i].fill*255);
        this.p.rect(x-_w*0.5+1,i*segh+1,_w-2,segh-2,_r,_r,_r,_r);
      }else{
        this.p.fill(this.calcContrastNormVal(this.playhead.status[i].fill)*255);
        this.p.rect(x-2,i*segh,4,segh);
        this.p.fill(this.playhead.status[i].fill*255);
        this.p.rect(x-1,i*segh+1,2,segh-2);
      }
    }
  }
  drawWithRoi(_roi,_isPlaying,_theme){
    //this.drawBarsWithRoi(_roi);
    if(_isPlaying)
      this.drawPlayheadWithRoi(
        _roi,
        this.p.width*0.035,
        5,
        _theme,
        this.shaderColorProcessor.invert
      );
  }
  huskCurrentStatus(_roi,_invert){
    this.gfx.loadPixels();
    if(_invert) this.huskCurrentStatusInvert(_roi); else this.huskCurrentStatusNormal(_roi);
  }
  huskCurrentStatusNormal(_roi){
    for(let i=0;i<this.playhead.resolution;i++) this.playhead.status[i].fill=0.0;
    let segh=_roi.h/this.playhead.resolution;
    let x=Math.floor(_roi.x+_roi.w*this.playhead.pos);
    let ymin,ymax,p;
    for(let i=0;i<this.playhead.resolution;i++){
      if(this.playhead.status[i].midiNote<0) continue;
      ymin=Math.floor(_roi.y+i*segh); ymax=Math.floor(ymin+segh);
      if(ymin<0) ymin=0; if(ymin>=this.gfx.height) ymin=this.gfx.height-1;
      if(ymax<0) ymax=0; if(ymax>=this.gfx.height) ymax=this.gfx.height-1;
      for(let j=ymin;j<=ymax;j++){
        p=(j*this.gfx.width+x)*4;
        if(this.gfx.pixels[p+1]>0) this.playhead.status[i].fill+=1.0;
      }
      this.playhead.status[i].fill/=(ymax-ymin+1);
    }
    //for(let i=0;i<this.playhead.resolution;i++) this.playhead.status[i].fill/=segh;
  }
  huskCurrentStatusInvert(_roi){
    for(let i=0;i<this.playhead.resolution;i++) this.playhead.status[i].fill=0.0;
    let segh=_roi.h/this.playhead.resolution;
    let x=Math.floor(_roi.x+_roi.w*this.playhead.pos);
    let ymin,ymax,p;
    for(let i=0;i<this.playhead.resolution;i++){
      if(this.playhead.status[i].midiNote<0) continue;
      ymin=Math.floor(_roi.y+i*segh); ymax=Math.floor(ymin+segh);
      if(ymin<0) ymin=0; if(ymin>=this.gfx.height) ymin=this.gfx.height-1;
      if(ymax<0) ymax=0; if(ymax>=this.gfx.height) ymax=this.gfx.height-1;
      for(let j=ymin;j<=ymax;j++){
        p=(j*this.gfx.width+x)*4;
        if(this.gfx.pixels[p+1]===0) this.playhead.status[i].fill+=1.0;
      }
      this.playhead.status[i].fill/=(ymax-ymin+1);
    }
    //for(let i=0;i<this.playhead.resolution;i++) this.playhead.status[i].fill/=segh;
  }
}
								

									roi.js
									class Roi{
  static get MIRROR_NONE(){return 0;}
  static get MIRROR_HORIZONTAL(){return 1;}
  static get MIRROR_VERTICAL(){return 2;}
  static get MIRROR_BOTH(){return 3;}
  constructor(){}
  imageWithRoi=function(_ctx,_gfx,_roiRect,_mirror){
    let fx=_ctx.width/_roiRect.w; let fy=_ctx.height/_roiRect.h;
    switch(_mirror){
      case Roi.MIRROR_NONE: _ctx.image(_gfx,-fx*_roiRect.x,-fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height); break;
      case  Roi.MIRROR_HORIZONTAL:
        _ctx.push();
          _ctx.scale(-1,1); _ctx.translate(-fx*capture.width,0);
          _ctx.image(_gfx,fx*_roiRect.x,-fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      case  Roi.MIRROR_VERTICAL:
        _ctx.push();
          _ctx.scale(1,-1); _ctx.translate(0,-fy*_gfx.height);
          _ctx.image(_gfx,-fx*_roiRect.x,fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      case  Roi.MIRROR_BOTH:
        _ctx.push();
          _ctx.scale(-1,-1); _ctx.translate(-fx*_gfx.width,-fy*_gfx.height);
          _ctx.image(_gfx,fx*_roiRect.x,fy*_roiRect.y,fx*_gfx.width,fy*_gfx.height);
        _ctx.pop();
      break;
      default: console.log("[Roi, imageWithRoi] unhandled _mirror: "+_mirror);
    }
  };
  calcRoi=function(_ctx,_gfx,_roiRect){
    if(_gfx        === null)      return false;
    if(_gfx        === undefined) return false;
    if(_gfx.width  === null)      return false;
    if(_gfx.width  === undefined) return false;
    if(_gfx.height === null)      return false;
    if(_gfx.height === undefined) return false;
    let ratio_a=_ctx.width/_ctx.height; let ratio_b=_gfx.width/_gfx.height;
    if(ratio_a>ratio_b){
      _roiRect.w=_gfx.width; _roiRect.h=Math.floor(_roiRect.w*_ctx.height/_ctx.width);
    }else{
      _roiRect.h=_gfx.height; _roiRect.w=Math.floor(_roiRect.h*(_ctx.width/_ctx.height));
    }
    _roiRect.x=Math.floor((_gfx.width-_roiRect.w)/2);
    _roiRect.y=Math.floor((_gfx.height-_roiRect.h)/2);
    return true;
  };
}
								

									synth.js
									class Synth{
  constructor(_p){
    this.p=_p; this.audioEnabled=false; this.isActive=true;
    this.oscBank=[]; this.globalAmpFactor=1.0; this.defaultOscilAmp=0.75; this.amp=[];
  }
  init(_numOfOscils){
    if(this.audioEnabled||(!this.isActive)) return;
    this.defaultOscilAmp=1.0/_numOfOscils;
    for(let i=0;i<_numOfOscils;i++){
      this.amp[i]=0.0;
      this.oscBank[i] = new p5.Oscillator('triangle'), // square, sine, triangle, sawtooth
      this.oscBank[i].amp(0.0);
      this.oscBank[i].freq(this.mtof(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;
  }
  tune(_status){ // status:[] // {isEnabled:b, fill:normf, midiNote:i[-1 if isEnabled is false];}
    if((!this.audioEnabled)||(!this.isActive)) return;
    if(_status===null) return; if(_status===undefined) return; if(!Array.isArray(_status)) return; if(_status.length!==this.oscBank.length) return;
    for(let i=0;i<this.oscBank.length;i++) this.oscBank[i].amp(0.0,0.1);
    for(let i=0;i<this.oscBank.length;i++){
      if((_status[i].midiNote>=0)&&_status[i].isEnabled) this.oscBank[i].freq(this.mtof(_status[i].midiNote));
    }
  }
  update(_status, _isPlaying){ // status:[] // {isEnabled:b, fill:normf, midiNote:i[-1 if isEnabled is false];}
    if((!this.audioEnabled)||(!this.isActive)) return;
    if(_status===null) return; if(_status===undefined) return; if(!Array.isArray(_status)) return; if(_status.length!==this.oscBank.length) return;
    if(_isPlaying) _isPlaying=1.0; else _isPlaying=0.0;
    for(let i=0;i<this.oscBank.length;i++){
      if(_status[i].isEnabled&&(_status[i].midiNote>=0)){
        this.oscBank[i].amp(_status[i].fill*this.globalAmpFactor*_isPlaying,0.1);
      }else{this.oscBank[i].amp(0.0,0.1);}
    }
  }
  mtof(_m){return (440.0*Math.pow(2.0,(_m-69.0)/12.0));};
}
								

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

camera		hides or shows the camera image (the "camera" toggle)
clock		disables/enables the internal clock controlling playback
dark		disables/enables dark color mode (the "dark" toggle)
dense		disables or enables "dense" tuning mode (the "dense" toggle)
dur		sets the duration for the head to traverse the score (the "duration" slider)
gui		hides/shows the graphical user interface panel
invert		inverts the response to dark and light colors (the "invert" toggle)
lang		sets the interface language (additional languages can be added)
loop		disables/enables playback looping (the "loop" toggle)
mirror		mirorr the camera image
pendulum		disables/enables pendulum mode for head movement (the "pendulum" toggle)
play		wyłącza/włącza przesuw głowicy (przełącznik "play" lub klawisz spacji)
pointer		hides/shows the mouse cursor
scratch		disables/enables "scratch" mode (external or cursor-based control of the head position)
sens		sets the initial normalized sensitivity of the motion detector (the "sensitivity" slider)
synth		disables/enables the internal sound synthesizer
vol		sets the initial instrument volume level (global "vol" slider)