Kamtytura

obraz z kamery jako partytura graficzna

Podgląd: Domyślna kamera Podgląd: Tylna kamera

Parametry

Opis

”Kamtytura” bada możliwości współczesnej partytury graficznej – takiej, którą można odczytać nie tylko okiem i uchem, ale też przez maszynę. Każdy obraz rejestrowany przez kamerę staje się zapisem dźwięku, a jego struktura wyznacza przebieg kompozycji. Praca nawiązuje do eksperymentów Iannisa Xenakisa i jego systemu UPIC, łącząc ideę graficznej dosłowności z otwartością algorytmicznej interpretacji. Łączy tym samym trzy przełomowe momenty w historii muzyki – notację, elektryczność i włączenie w jej obręb szumu – pokazując, że współczesna kompozycja może powstawać z obrazu, gestu i przypadku.

Czytaj więcej

Encyklopedyczna publikacja „Sound Art. Sound as a Medium of Art” pod redakcją Petera Weibela wskazuje 3 wydarzenia, które zmieniły kurs muzyki: wynalezienie notacji, zastosowanie elektryczności i włączenie w obręb myzyki szumu/hałasu. Miniatura „Kamtytura” w jakiejś mierze mierzy się ze wszystkimi tymi zjawiskami, choć najmocniej z notacją, a szczególnie graficzną.Istnieje wiele definicji partytur graficznych i wydaje się, że obecnie najczęściej kładzie się nacisk na swobodę, z jaką takie partytury mogą być traktowane przez osoby wykonawcze lub na reprezentację muzyki za pomocą symboli spoza zakresu tradycyjnej notacji muzycznej (takie rozumienie partytur graficznych zwykle odwołuje się do muzyki lat 50 XX wieku i charakterystycznego dla niej poszerzenia zakresu stosowanych symboli notacyjnych i zarazem wprowadzenia symboli o nieostrym znaczeniu). „Kamtytura” podchodzi do tematu od nieco innej strony, zakładając że partytury graficzne mogą być interpretowane bardzo precyzyjnie, wręcz maszynowo (co zarazem nie pozbawia nas możliwości wprowadzania do odtwarzania elementów losowych lub decyzji interpretacyjnych) oraz, że mogą być w ogóle pozbawione elementów symbolicznych (zamiast mnożenia ich ilości i znaczeń). „Kamtytura” operuje dźwiękiem elektronicznym (a więc elektrycznością) i, choć wbudowany w nią syntezator korzysta z tradycyjnego stroju równomiernie temperowanego, to można tą Miniaturą sterować (przez interfejs MIDI, WebSocket lub wczytując Miniaturę do środowiska MaxMSP) także dowolnymi zewnętrznymi urządzeniami lub programami wytwarzającymi dźwięki (lub operujących w dowolnym innym medium).

Szczególnym przypadkiem aparatury do tworzenia i odgrywania partytur graficznych w kontekście muzyki elektronicznej jest oczywiście system UPIC (Unité Polyagogique Informatique CEMAMu) rozwijany przez Iannisa Xenakisa w paryskim Centre d’Etudes de Mathématique et Automatique Musicales (CEMAMu) i który doczekał się pierwszych funkcjonujących wersji w 1977 roku. Na końcu ścieżki sygnałowej UPICa znajdowała się australijska muzyczna stacja robocza Fairlight CMI, łącząca syntezator, sampler, sequencer i szereg innych komponentów, z których część do dziś budzi podziw koncepcyjnym i technicznym zaawansowaniem. Niemniej jeszcze ciekawsze elementy, koncepcyjne innowacje Xenakisa, znajdowały się „przed” Fairlightem. Xenakis używał tabletu sterowanego specjalnym pisakiem do ręcznego kreślenia przebiegów muzycznych, kształtów fal oscylatorów i obwiedni – wprowadzając do praktyki kompozytorskiej specyficzny rodzaj graficznej dosłowności. Posługiwał się też mechanizmami algorytmicznych i stochastycznych przekształceń materiału (całością systemu zarządzał komputer podłączony do wektorowego wyświetlacza CRT), sekwencjonował zarówno materiał syntetyzowany, jak i uzyskiwany na drodze samplingu. Szybko odkrył też edukacyjny potencjał systemu i jego otwartość i łatwość obsługi zapraszając do eksperymentowania z UPIC m.in. dzieci.

„Urządzeniem wejściowym” „Kamtytury” jest kamera – dowolny obraz może być potraktowany jako partytura graficzna i przekształcony przez oprogramowanie na dźwięk i komunikaty dla zewnętrznych urządzeń. Miniatura dzieli obraz na pewną ilość pasm, które odpowiadają stanowi wirtualnych „strun” lub „klawiszy” – ich ilość można zmienić i tym samym eksperymentować z czytelnością „partytur” o różnej rozdzielczości.

Dokumentacja techniczna

Parametry przekazywane przez adres URL

- camera 0 lub 1; domyślnie 0; ukrywa lub wyświetla obraz z kamery (przełącznik „camera”)
- clock 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny zegar sterujący odtwarzaniem
- dark 0 lub 1; domyślnie 0; wyłącza/włącza ciemny tryb kolorystyczny (przełącznik „dark”)
- dense 0 lub 1; domyślnie 0; wyłącza lub włącza tryb „gęstego” strojenia (przełącznik „dense”)
- dur 7.0 – 30.0; domyślnie 10.0; ustala czas przejścia głowicy przez partyturę (suwak „duration”)
- famo user | environment (lub env); domyślnie user; [facingMode] pozwala wymusić użycie przedniej (user) lub tylnej (environment) kamery na urządzeniach, które są wyposażone w podwójne kamery/aparaty (większość współczesnych urządzeń mobilnych)
- gui 0 lub 1; domyślnie 1; chowa/pokazuje panel z interfejsem graficznym
- h pionowa rozdzielczość kamery
- invert 0 lub 1; domyślnie 0; odwraca reakcję na ciemne i jasne kolory (przełącznik „invert”)
- lang en lub pl; domyślnie en; ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
- loop 0 lub 1; domyślnie 1; wyłącza/włącza zapętlenie odtwarzania (przełącznik „loop”)
- midiinchn numer kanału MIDI do zewnętrznego sterowania Miniaturą (przyjmowanei komunikatów)
- midiinport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (przyjmowanei komunikatów)
- midioutbarschn numer kanału MIDI użytego do emisji danych o stanie „pasm”, na które podzielona jest partytura (domyślnie 3)
- midioutchn numer kanału MIDI użytego do emisji komunikatów o stanie interfejsu (domyślnie 2)
- midioutport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (nadawanie komunikatów)
- mirror 0 lub 1; domyślnie 1; wyłącza/włącza lustrzane odbicie obrazu z urządzenia przechwytującego (zwykle kamery)
- pendulum 0 lub 1; domyślnie 0; wyłącza/włącza wahadłowy tryb przesuwu głowicy (przełącznik „pendulum”)
- play 0 lub 1; domyślnie 1; wyłącza/włącza przesuw głowicy (przełącznik „play” lub klawisz spacji)
- pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
- resolution pozioma rozdzielczość partytury (minimum 2)
- scratch 0 lub 1; domyślnie 0; wyłącza/włącza tryb „scratch” (zewnętrzna lub wykorzystująca kursor kontrola pozycji głowicy)
- sens 0.0 … 1.0; ustala inicjalną zormalizowaną czułość detektora ruchu (suwak „sensitivity”)
- synth 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny generator dźwięku
- tuning C c# D d# E F f# G g# A a# B; sekwencja binarna złożona z 12 liczb (0 lub 1), z których każda określa, czy odpowiadający jej pozycją dźwięk w oktawie jest włączony
- vol 0.0 … 1.0; ustala inicjalny poziom głośności instrumentu (globalny suwak „vol”)
- w pozioma rozdzielczość kamery
- worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
- ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
- xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)

/* */

Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura

camera 0 lub 1; domyślnie 0; ukrywa lub wyświetla obraz z kamery (przełącznik „camera”)
dark 0 lub 1; domyślnie 0; wyłącza/włącza ciemny tryb kolorystyczny (przełącznik „dark”)
dense 0 lub 1; domyślnie 0; wyłącza lub włącza tryb „gęstego” strojenia (przełącznik „dense”)
dur 7.0 – 30.0; domyślnie 10.0; ustala czas przejścia głowicy przez partyturę (suwak „duration”)
invert 0 lub 1; domyślnie 0; odwraca reakcję na ciemne i jasne kolory (przełącznik „invert”)
loop 0 lub 1; domyślnie 1; wyłącza/włącza zapętlenie odtwarzania (przełącznik „loop”)
note MIDI key (pitch), status (0=wyłączone, >0=aktywne); wymuszenie wyłączenia/włączenia wskazanego „klawisza” MIDI
pendulum 0 lub 1; domyślnie 0; wyłącza/włącza wahadłowy tryb przesuwu głowicy (przełącznik „pendulum”)
play 0 lub 1; domyślnie 0; wyłącza/włącza przesuw głowicy (przełącznik „play” lub klawisz spacji)
pos 0.0 … 1.0; pozycja głowicy odtwarzającej
scratchmode 0 lub 1; domyślnie 0; wyłącza/włącza tryb swobodnego manewrowania głowicą odtwarzającą (za pomocą myszy lub komunikatów z zewnątrz)
segment index (numer „pasma”), status (0=wyłączone, 1=aktywne); wymuszenie wyłączenia/włączenia wskazanego „pasma”
sensitivity 0.0 … 1.0; ustala zormalizowaną czułość detektora ruchu (suwak „sensitivity”)
tuning C c# D d# E F f# G g# A a# B; sekwencja binarna złożona z 12 liczb (0 lub 1), z których każda określa, czy odpowiadający jej pozycją dźwięk w oktawie jest włączony
vol 0.0 … 1.0; ustala poziom głośności instrumentu (globalny suwak „vol”)

Komunikaty wysyłane przez Miniaturę

kamtytura camera 0 lub 1; wyłączenie lub włączenie widoczności kamery
kamtytura dark 0 lub 1; wyłączenie lub włączenie widoczności trybu ciemnego
kamtytura dense 0 lub 1; zmiana trybu strojenia
kamtytura dur 7.0 – 30.0; raport zmiany czasu przejścia głowicy przez partyturę
kamtytura invert 0 lub 1; wyłączenie lub włączenie trybu odwrócenia jasności
kamtytura loop 0 lub 1; wyłączenie lub włączenie odtwarzania w pętli
kamtytura pendulum 0 lub 1; wyłączenie lub włączenie wahadłowego trybu odtwarzania
kamtytura play 0 lub 1; wyłączenie lub włączenie odtwarzania
kamtytura pos 0.0 … 1.0; pozycja głowicy odtwarzającej
kamtytura scratchmode zmiana stanu trybu manewrowania głowicą odtwarzającą (normalne odtwarzanie / „scratch”)
kamtytura segment index (numer „pasma”), status (0=wyłączone, 1=aktywne), MIDI note (0-127), wypełnienie (0.0 … 1.0); raport stanu pasma
kamtytura sensitivity 0.0 … 1.0; raportuje zormalizowaną czułość detektora ruchu (suwak „sensitivity”)
kamtytura tuning C c# D d# E F f# G g# A a# B; sekwencja binarna złożona z 12 liczb (0 lub 1), z których każda określa, czy odpowiadający jej pozycją dźwięk w oktawie jest włączony; raport zmiany stroju
kamtytura vol 0.0 … 1.0; raport zmiany poziomu głośności

MIDI

Komunikaty, na które reaguje Miniatura

CC 010 na dowolnym kanale 0 lub >0; wyłącza/włącza przesuw głowicy (przełącznik „play” lub klawisz spacji)
CC 011 na dowolnym kanale 0 lub >0; odwraca reakcję na ciemne i jasne kolory (przełącznik „invert”)
CC 012 na dowolnym kanale 0 lub >0; wyłącza/włącza zapętlenie odtwarzania (przełącznik „loop”)
CC 013 na dowolnym kanale ustala czas przejścia głowicy przez partyturę (suwak „duration”) – wartości kontrolera (0-127) są skalowane do zakresu 7.0-30.0 sekund
CC 014 na dowolnym kanale ustala poziom głośności instrumentu (globalny suwak „vol”)
CC 015 na dowolnym kanale 0 lub >0; wyłącza/włącza wahadłowy tryb przesuwu głowicy (przełącznik „pendulum”)
CC 016 na dowolnym kanale 0 lub >0; wyłącza/włącza ciemny tryb kolorystyczny (przełącznik „dark”)
CC 017 na dowolnym kanale 0 lub >0; ukrywa lub wyświetla obraz z kamery (przełącznik „camera”)
CC 018 na dowolnym kanale 0 lub >0; wyłącza lub włącza tryb „gęstego” strojenia (przełącznik „dense”)
CC 019 na dowolnym kanale ustala zormalizowaną czułość detektora ruchu (suwak „sensitivity”)
CC 020 na dowolnym kanale 0 lub >0; wyłącza/włącza tryb swobodnego manewrowania głowicą odtwarzającą (za pomocą myszy lub komunikatów z zewnątrz)
CC 021 na dowolnym kanale pozycja głowicy odtwarzającej
CC 030 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk C
CC 031 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk c#
CC 032 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk D
CC 033 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk d#
CC 034 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk E
CC 035 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk F
CC 036 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk f#
CC 037 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk G
CC 038 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk g#
CC 039 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk A
CC 040 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk a#
CC 041 na dowolnym kanale 0 lub >0; wyłącza/włącza dźwięk B
Note Off na dowolnym kanale wyłącza pasmo korespondujące z parametrem „pitch” (numerem klawisza MIDI)
Note On na dowolnym kanale włącza pasmo korespondujące z parametrem „pitch” (numerem klawisza MIDI)
RT Clock continue wznowienie odtwarzania
RT Clock start rozpoczęcie odtwarzania
RT Clock stop zatrzymanie odtwarzania

Komunikaty wysyłane przez Miniaturę

CC 070 na kanale 2 raport wyłączenia/włączenia przesuwu głowicy (przełącznik „play” lub klawisz spacji)
CC 071 na kanale 2 raport zmiany odwrócenia mechanizmu reakcji na ciemne i jasne kolory (przełącznik „invert”)
CC 072 na kanale 2 raport zmaiany stanu wyłączenia/włączenia zapętlenia odtwarzania (przełącznik „loop”)
CC 073 na kanale 2 raport zmiany czasu przejścia głowicy przez partyturę (suwak „duration”) – wartości kontrolera (0-127) są skalowane do zakresu 7.0-30.0 sekund
CC 074 na kanale 2 raport zmiany poziomu głośności instrumentu (globalny suwak „vol”)
CC 075 na kanale 2 raport wyłączenia/włączenia wahadłowego trybu przesuwu głowicy (przełącznik „pendulum”)
CC 076 na kanale 2 raport zmiany wyłączenia/włączenia ciemnego trybu kolorystyczny (przełącznik „dark”)
CC 077 na kanale 2 raport zmiany parametru ukrywania/pokazywania obrazu z kamery (przełącznik „camera”)
CC 078 na kanale 2 raport zmiany wyłączenia/włączenia trybu „gęstego” strojenia (przełącznik „dense”)
CC 079 na kanale 2 raport zmiany wartości zormalizowanej czułości detektora ruchu (suwak „sensitivity”)
CC 080 na kanale 2 raport zmiany trybu swobodnego manewrowania głowicą odtwarzającą (za pomocą myszy lub komunikatów z zewnątrz)
CC 081 na kanale 2 pozycja głowicy odtwarzającej
CC 090 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku C
CC 091 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku c#
CC 092 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku D
CC 093 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku d#
CC 094 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku E
CC 095 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku F
CC 096 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku f#
CC 097 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku G
CC 098 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku g#
CC 099 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku A
CC 100 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku a#
CC 101 na kanale 2 (strój) raport wyłączenia/włączenia dźwięku B
CC xxx na kanale 3 raport stanu pasma o indeksie korespondującym z indeksem komunikatu CC

Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura

camera 0 lub 1; domyślnie 0; ukrywa lub wyświetla obraz z kamery (przełącznik „camera”)
dark 0 lub 1; domyślnie 0; wyłącza/włącza ciemny tryb kolorystyczny (przełącznik „dark”)
dense 0 lub 1; domyślnie 0; wyłącza lub włącza tryb „gęstego” strojenia (przełącznik „dense”)
dur 7.0 – 30.0; domyślnie 10.0; ustala czas przejścia głowicy przez partyturę (suwak „duration”)
invert 0 lub 1; domyślnie 0; odwraca reakcję na ciemne i jasne kolory (przełącznik „invert”)
loop 0 lub 1; domyślnie 1; wyłącza/włącza zapętlenie odtwarzania (przełącznik „loop”)
note MIDI key (pitch), status (0=wyłączone, >0=aktywne); wymuszenie wyłączenia/włączenia wskazanego „klawisza” MIDI
pendulum 0 lub 1; domyślnie 0; wyłącza/włącza wahadłowy tryb przesuwu głowicy (przełącznik „pendulum”)
play 0 lub 1; domyślnie 0; wyłącza/włącza przesuw głowicy (przełącznik „play” lub klawisz spacji)
pos 0.0 … 1.0; pozycja głowicy odtwarzającej
scratchmode 0 lub 1; domyślnie 0; wyłącza/włącza tryb swobodnego manewrowania głowicą odtwarzającą (za pomocą myszy lub komunikatów z zewnątrz)
segment index (numer „pasma”), status (0=wyłączone, 1=aktywne); wymuszenie wyłączenia/włączenia wskazanego „pasma”
sensitivity 0.0 … 1.0; ustala zormalizowaną czułość detektora ruchu (suwak „sensitivity”)
tuning C c# D d# E F f# G g# A a# B; sekwencja binarna złożona z 12 liczb (0 lub 1), z których każda określa, czy odpowiadający jej pozycją dźwięk w oktawie jest włączony
vol 0.0 … 1.0; ustala poziom głośności instrumentu (globalny suwak „vol”)

Komunikaty wysyłane przez Miniaturę

kamtytura camera 0 lub 1; wyłączenie lub włączenie widoczności kamery
kamtytura dark 0 lub 1; wyłączenie lub włączenie widoczności trybu ciemnego
kamtytura dense 0 lub 1; zmiana trybu strojenia
kamtytura dur 7.0 – 30.0; raport zmiany czasu przejścia głowicy przez partyturę
kamtytura invert 0 lub 1; wyłączenie lub włączenie trybu odwrócenia jasności
kamtytura loop 0 lub 1; wyłączenie lub włączenie odtwarzania w pętli
kamtytura pendulum 0 lub 1; wyłączenie lub włączenie wahadłowego trybu odtwarzania
kamtytura play 0 lub 1; wyłączenie lub włączenie odtwarzania
kamtytura pos 0.0 … 1.0; pozycja głowicy odtwarzającej
kamtytura scratchmode zmiana stanu trybu manewrowania głowicą odtwarzającą (normalne odtwarzanie / „scratch”)
kamtytura segment index (numer „pasma”), status (0=wyłączone, 1=aktywne), MIDI note (0-127), wypełnienie (0.0 … 1.0); raport stanu pasma
kamtytura sensitivity 0.0 … 1.0; raportuje zormalizowaną czułość detektora ruchu (suwak „sensitivity”)
kamtytura tuning C c# D d# E F f# G g# A a# B; sekwencja binarna złożona z 12 liczb (0 lub 1), z których każda określa, czy odpowiadający jej pozycją dźwięk w oktawie jest włączony; raport zmiany stroju
kamtytura vol 0.0 … 1.0; raport zmiany poziomu głośności

Kod źródłowy

									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		ukrywa lub wyświetla obraz z kamery (przełącznik "camera")
clock		wyłącza/włącza wewnętrzny zegar sterujący odtwarzaniem
dark		wyłącza/włącza ciemny tryb kolorystyczny (przełącznik "dark")
dense		wyłącza lub włącza tryb "gęstego" strojenia (przełącznik "dense")
dur		ustala czas przejścia głowicy przez partyturę (suwak "duration")
gui		chowa/pokazuje panel z interfejsem graficznym
invert		odwraca reakcję na ciemne i jasne kolory (przełącznik "invert")
lang		ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
loop		wyłącza/włącza zapętlenie odtwarzania (przełącznik "loop")
mirror		lustrzane odbicie obrazu z kamery
pendulum		wyłącza/włącza wahadłowy tryb przesuwu głowicy (przełącznik "pendulum")
play		wyłącza/włącza przesuw głowicy (przełącznik "play" lub klawisz spacji)
pointer		chowa/pokazuje kursor myszy
scratch		wyłącza/włącza tryb "scratch" (zewnętrzna lub wykorzystująca kursor kontrola pozycji głowicy)
sens		ustala inicjalną zormalizowaną czułość detektora ruchu (suwak "sensitivity")
synth		wyłącza/włącza wewnętrzny generator dźwięku
vol		ustala inicjalny poziom głośności instrumentu (globalny suwak "vol")