Ogród Mechaniczny wg Tytusa Czyżewskiego

natura syntetyczna oraz relacja sztuki, natury i technologii
Podgląd: domyślna kamera Podgląd: tylna kamera
Parametry
splash		wyłącza lub włącza wyświatlanie splash screen-u po starcie Miniatury
gui		chowa / pokazuje panel z interfejsem graficznym
mirror		lustrzane odbicie obrazu z kamery
motion		wyłącza/włącza detektor ruchu
dark		przełącza schematy kolorystyczne pomiędzy jasnym i ciemnym (przełącznik "dark")
ilang		ustawia język interfejsu
lang		ustawia język zawartości instalacji
sens		ustala inicjalną zormalizowaną czułość detektora ruchu (suwak "sensitivity")
pointer		chowa / pokazuje kursor myszy
growingspeed		ustala prędkość wzrostu "kwiatów"
synth		wyłącza/włącza wewnętrzny generator dźwięku
cntextmsg		wyłącza/włącza konwersję ilości zbuforowanych zewnętrznych komunikatów sterujących wzrostem "kwiatów" na prędkość wzrostu
Opis
”Ogród Mechaniczny” Tytusa Czyżewskiego z 1920 roku to wczesny przykład poezji wizualnej, w której słowo i obraz tworzą wspólną strukturę znaczeń. W wersji Pawła Janickiego dzieło ożywa w cyfrowym medium – litery i znaki reagują na obecność i ruch odbiorcy, przekształcając się w dynamiczny układ form. Miniatura rozwija futurystyczną wizję relacji między sztuką, naturą i technologią, badając, jak dawne idee można przetwarzać w języku współczesnych mediów.
Czytaj więcej
Tytus Czyżewski (28 grudnia 1880 – maj 1945) był polskim malarzem, teoretykiem sztuki, poetą futurystą, dramaturgiem, członkiem formistów polskich i kolorystą. Jego dzieło ”Ogród Mechaniczny” z 1920 roku jest doskonałym przykładem poezji konkretnej (lub poezji wizualnej), ”pisanej” jednocześnie słowem i obrazem. Elementy typograficzne (tutaj ramki, klamry i układ tekstu) nabierają własnego znaczenia, mówią w wierszu równie wyraźnie, jak słowa.
”Ogród Mechaniczny wg Tytusa Czyżewskiego” to interaktywne dzieło sztuki oparte na oryginalnej koncepcji Czyżewskiego, odtworzone we współczesnym medium (oprogramowaniu). Dzieło porusza kwestie sztuk warunkowych, natury syntetycznej oraz relacji sztuki, natury i technologii w ogóle.
”Ogród mechaniczny wg Tytusa Czyżewskiego” autorstwa Pawła Janickiego istnieje również jako wczesna (2011) wersja stworzona w formie samodzielnego oprogramowania na zamówienie Towarzystwa Zachęty Sztuk Pięknych (Lublin/Polska).
Dokumentacja techniczna
Parametry przekazywane przez adres URL

splash 0 lub 1; domyślnie 1; wyłącza lub włącza wyświatlanie splash screen-u po starcie Miniatury
gui 0 lub 1; domyślnie 1; chowa/pokazuje panel z interfejsem graficznym
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)
mirror 0 lub 1; domyślnie 1; wyłącza/włącza tryb lustrzanego odwracania obrazu
motion 0 lub 1; domyślnie 1; wyłącza/włącza detektor ruchu
dark 0 lub 1; domyślnie 0; przełącza schematy kolorystyczne pomiędzy jasnym i ciemnym (przełącznik „dark”)
ilang en lub pl; domyślnie en; ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
lang en lub pl; domyślnie pl; ustawia język zawartości instalacji (istnieje możliwość dodania kolejnych języków)
sens 0.0 … 1.0; ustala inicjalną zormalizowaną czułość detektora ruchu (suwak „sensitivity”)
pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
growingspeed domyślnie 1.0; ustala prędkość wzrostu „kwiatów”
butterflies wymusza stałą, wskazaną ilość „motyli”, niezależną od wielkości obrazu
flowers wymusza stałą, wskazaną ilość „kwiatów”, niezależną od wielkości obrazu
butterflysize wymusza stałą, wskazaną wielkość „motyli”, niezależną od wielkości obrazu
flowersize wymusza stałą, wskazaną wielkość „kwiatów”, niezależną od wielkości obrazu
butterflystroke wymusza stałą, wskazaną grubość obrysu „motyli”, niezależną od wielkości obrazu
flowerstroke wymusza stałą, wskazaną grubość obrysu „kwiatów”, niezależną od wielkości obrazu
butterflyfont nazwa czcionki użytej do wyświetlania nazw „motyli”
flowerfont nazwa czcionki użytej do wyświetlania nazw „kwiatów”
butterflytextsize wielkość czcionki użytej do wyświetlania nazw „motyli”
flowertextsize wielkość czcionki użytej do wyświetlania nazw „kwiatów”
synth 0 lub 1; domyślnie 1; wyłącza/włącza wewnętrzny generator dźwięku
cntextmsg 0 lub 1; domyślnie 1; wyłącza/włącza konwersję ilości zbuforowanych zewnętrznych komunikatów sterujących wzrostem „kwiatów” na prędkość wzrostu
ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
midiinport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (przyjmowanei komunikatów)
midioutport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (nadawanie komunikatów)
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
index status (dwie liczby, brak prefiksu) index (indeks kwiatu liczony od 0) status (jeśli parametr jest większy od 0.0 kwiat rośnie, w przeciwnym razie opada)
Komunikaty wysyłane przez Miniaturę
ogrod collision indeks kwiatu, indeks motyla
ogrod flower indeks kwiatu, znormalizowana pozycja pionowa kwiatu
ogrod butterfly indeks motyla, znormalizowana pozycja pozioma motyla, znormalizowana pozycja pionowa motyla
MIDI

Komunikaty, na które reaguje Miniatura
Note Off na kanale 1 wyłącza wzrost kwiatu o indeksie odpowiadającym indeksowi nuty (pitch)
Note On na kanale 1 włącza wzrost kwiatu o indeksie odpowiadającym indeksowi nuty (pitch)
Komunikaty wysyłane przez Miniaturę
CC indeks_kwiatu na_kanale_5 wartość kontrolera to indeks motyla, z którym zderza się kwiat
CC indeks_motyla na_kanale_8 wartość kontrolera to indeks kwiatu, z którym zderza się motyl
CC indeks_motyla na_kanale_6 wartość kontrolera odpowiada poziomej pozycji motyla
CC indeks_motyla na_kanale_7 wartość kontrolera odpowiada pionowej pozycji motyla
CC indeks_kwiatu na_kanale_4 wartość kontrolera odpowiada wysokości kwiatu
Note Off na kanale 2 oznacza, że kwiat o indeksie odpowiadającym parametrowi MIDI pitch nuty zakończył wzrost
Note On na kanale 2 oznacza, że kwiat o indeksie odpowiadającym parametrowi MIDI pitch nuty rozpoczął wzrost
Note Off na kanale 3 oznacza, że kwiat o indeksie odpowiadającym parametrowi MIDI pitch nuty kontynuuje swój rozwój po inicjalizacji (inicjalizacja następuje po zderzeniu z motylem)
Note On na kanale 3 oznacza, że kwiat o indeksie odpowiadającym parametrowi MIDI pitch nuty rozpoczął nowy cykl życia (został ponownie zainicjalizowany po zderzeniu z motylem)
Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
nie dotyczy
Kod źródłowy
									index.html
									<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--<meta name="apple-mobile-web-app-title" content="Tetoki!" />
    <meta name="apple-mobile-web-app-capable" content="yes" />-->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Mechanical Garden after Tytus Czyżewski | Ogród Mechaniczny według Tytusa Czyżewskiego by Pawel Janicki, 2011-2025 (https://paweljanicki.jp)</title>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js" type="text/javascript"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js" type="text/javascript"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js" type="text/javascript"></script>-->
    <!--<script src="https://tetoki.eu/vida/vida/p5.vida.min.js" type="text/javascript"></script>-->

    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/p5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.8/lib/addons/p5.sound.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
    <script src="soundtrack.js"></script>
    <script src="capturepainter.js"></script>
    <script src="garden.js"></script>
    <script src="anim.js"></script>
    <script src="midi.js"></script>
    <script src="p5.vida.min.js"></script>
    <script src="gui.js"></script>
    <script src="ws.js"></script>
    <script src="sketch.js" type="text/javascript"></script>
    <style>
      body {padding: 0; margin: 0; background-color:#444444; overflow: hidden;}
      ::webkit-scrollbar{display:none}
      /*canvas {vertical-align: top;}*/
    </style>
  </head>
  <body>
  </body>
</html>
								

									sketch.js
									/************** | https://tetoki.eu || https://paweljanicki.jp | *************\

  "Mechanical Garden after Tytus Czyżewski" [v. 3]
  (orig. "Ogród Mechaniczny według Tytusa Czyżewskiego")
  by Paweł Janicki (https://paweljanicki.jp), 2011-2025

  Tytus Czyżewski (28 December 1880 – May 1945) was a Polish painter, art
  theoretician, Futurist poet, playwright, member of the Polish Formists, and
  Colorist. His work "Mechanical Garden" (orig. "Ogród Mechaniczny") from 1920
  is a great example of "concrete poetry" (or "visual poetry") that is
  "written" simultaneously with words and images. Typographic elements (here
  frames, braces and text layout) gain their own meaning, "they say" in the
  poem as clearly as words.

  Tytus Czyżewski @ Wikipedia: https://en.wikipedia.org/wiki/Tytus_Czyżewski

  original "Mechanical Garden" by Tytus Czyżewski: https://bit.ly/2B10Dmf

  "Mechanical Garden after Tytus Czyżewski" is an interactive artwork based on
  the original concept by Czyżewski, re-created in a contemporary medium
  (software). The work touch issues of conditional arts, synthetic nature and
  the relation of art, nature and technology in general.

  "Mechanical Garden after Tytus Czyżewski" is a part of the "Tetoki!" project
  (https://tetoki.eu) by Paweł Janicki premiere presented during the "Signals"
  exhibition at the WRO Art Center (https://wrocenter.pl/en/sygnaly/).
  "Tetoki!" is a collection of interactive installations that serve as
  reproductions of or variations on the existing media works and important
  techniques used (or created) by artists working with electronic media. It is
  also a reference to works and ways of working of the historical “analog” and
  contemporary artists who anticipated concepts and strategies relevant to
  media and technology-oriented arts.

  "Mechanical Garden after Tytus Czyżewski" by Paweł Janicki exists also as an
  early (2011) version created in form of the stand-alone software commisioned
  by the Society for the Encouragement of Fine Arts (Lublin/Poland).

\*****************************************************************************/

// just a short info displayed on start
var infoString_en =
  '\n     Mechanical Garden after Tytus Czyżewski      ' +
'\n\n"Mechanical Garden after Tytus Czyżewski\" [v. 3]' +
  '\n(orig. "Ogród Mechaniczny według Tytusa' +
  '\nCzyżewskiego") by Paweł Janicki' +
  '\n(https://paweljanicki.jp), 2011-2022' + 
'\n\nAn interactive artwork based on the original' +
  '\nconcept by Czyżewski, re-created in a contemporary' +
  '\nmedium (software). The work touch issues of ' +
  '\nconditional arts, synthetic nature and the' +
  '\nrelation of art, nature and technology in general.' +
'\n\n*  *  *  *   click (or tap) to start   *  *  *  *';

var infoString_gr =
  '\n     Mechanical Garden after Tytus Czyżewski      ' +
'\n\n"Mechanical Garden after Tytus Czyżewski\" [v. 3]' +
  '\n(orig. "Ogród Mechaniczny według Tytusa' +
  '\nCzyżewskiego") by Paweł Janicki' +
  '\n(https://paweljanicki.jp), 2011-2022' + 
'\n\nAn interactive artwork based on the original' +
  '\nconcept by Czyżewski, re-created in a contemporary' +
  '\nmedium (software). The work touch issues of ' +
  '\nconditional arts, synthetic nature and the' +
  '\nrelation of art, nature and technology in general.' +
'\n\n*  *  *  *   click (or tap) to start   *  *  *  *';

var infoString_srb =
  '\n     Mechanical Garden after Tytus Czyżewski      ' +
'\n\n"Mechanical Garden after Tytus Czyżewski\" [v. 3]' +
  '\n(orig. "Ogród Mechaniczny według Tytusa' +
  '\nCzyżewskiego") by Paweł Janicki' +
  '\n(https://paweljanicki.jp), 2011-2022' + 
'\n\nAn interactive artwork based on the original' +
  '\nconcept by Czyżewski, re-created in a contemporary' +
  '\nmedium (software). The work touch issues of ' +
  '\nconditional arts, synthetic nature and the' +
  '\nrelation of art, nature and technology in general.' +
'\n\n*  *  *  *   click (or tap) to start   *  *  *  *';

var infoString_ro =
  '\n     Mechanical Garden after Tytus Czyżewski      ' +
'\n\n"Mechanical Garden after Tytus Czyżewski\" [v. 3]' +
  '\n(orig. "Ogród Mechaniczny według Tytusa' +
  '\nCzyżewskiego") by Paweł Janicki' +
  '\n(https://paweljanicki.jp), 2011-2022' + 
'\n\nAn interactive artwork based on the original' +
  '\nconcept by Czyżewski, re-created in a contemporary' +
  '\nmedium (software). The work touch issues of ' +
  '\nconditional arts, synthetic nature and the' +
  '\nrelation of art, nature and technology in general.' +
'\n\n*  *  *  *   click (or tap) to start   *  *  *  *';

var infoString_pl =
  '\nOgród Mechaniczny według Tytusa Czyżewskiego [v.3]' +
'\n\n"Paweł Janicki (https://paweljanicki.jp), 2011-22 ' +
'\n\nInteraktywna miniatura sieciowa bazująca na' +
  '\noryginalnym koncepcie Czyzewskiego, wykonana we' +
  '\nwspółczesnej technice (software). Praca dotyka' +
  '\ntematyki conditional arts, syntetycznej natury i' +
  '\nrelacji pomiędzy naturą sztuką i technologią.' +
'\n\n*  *  *  kliknij (tapnij) aby rozpocząć  *  *  *';

var infoString_ur =
  '\n   Механічний Cад за Титусом Чижевським [v.3]' +
  '\n"Paweł Janicki (https://paweljanicki.jp), 2011-22 ' +
'\n\nІнтерактивний веб-ескіз на основі оригінальної' +
  '\nконцепції Чижевського, виготовлені за сучасними' +
  '\nтехнологіями (компютерна програма). Робота' +
  '\nприсвячена тематиці conditional arts, синтетичній' +
  '\nприроді та відносинам між природою, мистецтвом' +
  '\nі технікою.' +
'\n\n*  *  *  *    натисніть, щоб почати    *  *  *  *';

/*
  I decided to use the resolution of the LED screen located on the facade del
  Medialab-Prado en Madrid as a minimum accaptable dimentions.
*/
var MINIMUM_SKETCH_WIDTH = 192; var MINIMUM_SKETCH_HEIGHT = 157;

/*
  In addition to the standard mechanisms of detection of mobile platforms built
  into p5js, we will use additional ones.
*/
var touchScreenDeviceFlag = false;

/*
  This flag will be set to true when we detect the camera and the user clicks /
  taps the screen. We need this, because ome web browsers cut off access to the
  camera and/or webaudio API before the user does not perform a "manual"
  action.
*/
var is_playing_flag = false;

/*
  The speed of flower growth will be later calculated in proportion to the
  height of the project.
*/
var flower_growing_speed = 1.0; var forced_flower_growing_speed_factor=-1.0;

var bg_r = 0; var bg_g = 0; var bg_b = 0; // base background color
var blink_r = 0; var blink_g = 0; var blink_b = 111; // blink color

// variables to handle blinking on collision
var collision_lag = 2000; var last_collision = -collision_lag;
var background_luma_factor;

/*
  Pseudo-constans and variable used to manage the color theme.
*/
var COLOR_COMPOSITION_DARK  = 0, COLOR_COMPOSITION_LIGHT = 1;
var color_composition = COLOR_COMPOSITION_LIGHT;

/*
  Pseudo-constans and variable used to manage the capture device.
*/
var PREFERRED_CAPTURE_WIDTH = 320; var PREFERRED_CAPTURE_HEIGHT = 240;
var is_capture_available_flag = false;
var my_capture; // camera
let cameraFacingMode="default";
let cameraFlip=false; // it's complicated, but actually false means mirrored!

/*
  The project uses the Vida library to handle the motion detection system.
  So you have to remember to attach the library to the project. Vida is
  available here: https://tetoki.eu/vida
*/
var my_vida;

/*
  These varialbles will be used to control sensitivity of the Vida's motion
  detector. 
*/
var image_filter_threshold = 0.10;
var max_image_filter_threshold = 0.20;
var min_image_filter_threshold = 0.033;

/*
  That's the (mechanical) garden.
*/
var my_garden = new Garden();

/*
  The object of the CapturePainterclass responsible for drawing the stylized
  image from the motion detection system.
*/
var my_capturePainter;

/*
  The project uses sound (it is handled by this object), so you need to
  remember to attach the p5.dom and p5.sound libraries to the project.
*/
var my_soundtrack; var enableInnerSynth=true;

var guiContainer={
  splash:true,
  gui:null, isActive:true, lock:-1, lang:'en',
  // -- Mechanical Garden specific ---
  drawStatusFlag:false,
  isPointerVisibleAndInteractive:true,
  useMotionAsInterface:true, 
  forcedNumOfFlowers:-1,
  forcedNumOfButterflies:-1,
  forcedfFlowerGrowingSpeed:-1.0,
  forcedFlowerSize:-1,
  forcedButterflySize:-1,
  forcedFlowerStrokeWeight:-1,
  forcedButterflyStrokeWeight:-1,
  forcedFlowerTextFont:"",
  forcedButterflyTextFont:"",
  forcedFlowerTextSize:-1,
  forcedButterflyTextSize:-1,
  // ----------------------------------
  handlers:{
    toSensitivitySlider:{id:-1,label:{en:'sensitivity',pl:'czułość'}},
    toColorThemeToggle:{id:-1,label:{en:'dark mode',pl:'tryb ciemny'}},
    toLangSelector:{id:-1,label:{en:'lang',pl:'język'}}
  },
  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;
  }
};

function initGui(){
  guiContainer.gui = new GUI(this,true,400,200,false);
  guiContainer.gui.setBackgroundPanelRect(20,20,310,180,5);
  var gui_sld_sens = new SimpleSlider(40,100,270,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,0.5,guiContainer.getLabelByLang(guiContainer.handlers.toSensitivitySlider));
  gui_sld_sens.onChange=function(_id,_v){setMotionDetectorSensitivity(_v);};
  guiContainer.handlers.toSensitivitySlider.id=guiContainer.gui.addItem(gui_sld_sens);
  var gui_tgl_thm = new SimpleToggle(40,150,90,30,GUI.ORIENTATION_HORIZONTAL,false,guiContainer.getLabelByLang(guiContainer.handlers.toColorThemeToggle));
  gui_tgl_thm.onChange=function(_id,_v){
    if(_v>0.0) color_composition = COLOR_COMPOSITION_DARK; else color_composition = COLOR_COMPOSITION_LIGHT;
    applyColorComposition(color_composition);
    switch(color_composition){
      case COLOR_COMPOSITION_DARK: guiContainer.gui.setBackgroundPanelColor(255,255,255,64); break;
      case COLOR_COMPOSITION_LIGHT: guiContainer.gui.setBackgroundPanelColor(0,0,0,64); break;
      default: console.log("[initGui] unhandled color_composition: "+color_composition);
    }
  };
  guiContainer.handlers.toColorThemeToggle.id=guiContainer.gui.addItem(gui_tgl_thm);
  var gui_sls_lang = new SimpleLangSelector(40,40,45,40,GUI.ORIENTATION_HORIZONTAL,0,guiContainer.getLabelByLang(guiContainer.handlers.toLangSelector));
  gui_sls_lang.setItems([
    {label:"PL",iconAsUnicode:"🇵🇱"},
    {label:"EN",iconAsUnicode:"🇬🇧"},
    {label:"RO",iconAsUnicode:"🇷🇴"},
    {label:"GR",iconAsUnicode:"🇬🇷"},
    {label:"UR",iconAsUnicode:"🇺🇦"},
    {label:"SRB",iconAsUnicode:"🇷🇸"}
  ]);
  gui_sls_lang.onChange=function(_id,_v){
    let langCode=guiContainer.gui.items[_id].items[_v].label.toLowerCase();
    my_garden.setLang(langCode);
  };
  guiContainer.handlers.toLangSelector.id=guiContainer.gui.addItem(gui_sls_lang);
}

var useWorker=false;
function handleWorker(){redraw();}
function initWorker(){
  if(useWorker){
    noLoop();
    var intervalWorker = new Worker('worker.js');
    intervalWorker.onmessage = function(_e){handleWorker();}
    console.log("[initWorker] Worker set as clock source.");
  }else{
    frameRate(60);
    console.log("[initWorker] Standard clock source is selected.");
  }
}

var webSocket={
  isActive:false,
  processor:(new WS()),address:"ws://localhost:9001/",
  receivedMessages:[],
};
function initWebSocket(){
  for(var i=0;i<128;i++) webSocket.receivedMessages[i]=false; // let's use the same range as MIDI
  if(webSocket.isActive){
    console.log("[initWebSocket] starting websocket connection, address: "+webSocket.address);
    webSocket.processor.init(webSocket.address,handleIncomingWebSocketMessages);
  }
}
function handleIncomingWebSocketMessages(_msg){
  if(!_msg||_msg===null) return; if(_msg===undefined) return;
  if(!_msg.data||_msg.data===null) return; if(_msg.data===undefined) return;
  var arr = _msg.data.split(" ");
  if(!arr||arr===null) return; if(arr===undefined) return;
  if(arr.length!==2) return; if(isNaN(arr[0])||isNaN(arr[1])) return;
  arr[0]=parseInt(arr[0]);arr[1]=(parseFloat(arr[1])>0); // flower, status
  if((arr[0]<0)||arr[0]>127){console.log("[handleIncomingWebSocketMessages] flower index (arr[0]) out of range: "+arr[0]);return;}
  webSocket.receivedMessages[arr[0]]=arr[1];
}
function updateWebSocketIn(){
  for(var i=0;i<128;i++){if(webSocket.receivedMessages[i]){my_garden.addMessageFromExternalInterface(i);}}
}
function updateWebSocketOut(){
  var collidingFlowerIndex=-1; var collidingButterflyIndex=-1;
  for(var i=0;i<my_garden.status.collisions.length;i++){
    collidingFlowerIndex=my_garden.status.collisions[i].flowerIndex;
    collidingButterflyIndex=my_garden.status.collisions[i].butterflyIndex;
    if(collidingFlowerIndex>127){console.log("[updateWebSocketOut] collidingFlowerIndex out of range: "+collidingFlowerIndex);return;}
    if(collidingButterflyIndex>127){console.log("[updateWebSocketOut] collidingButterflyIndex out of range: "+collidingButterflyIndex);return;}
    webSocket.processor.safeSend(["ogrod","collision",collidingFlowerIndex,collidingButterflyIndex]);
  }
  for(var i=0;i<my_garden.status.flowers.length;i++){
    webSocket.processor.safeSend(["ogrod","flower",i,my_garden.status.flowers[i].normLocalY]);
  }
  for(var i=0;i<my_garden.status.butterflies.length;i++){
    webSocket.processor.safeSend(["ogrod","butterfly",i,my_garden.status.butterflies[i].normLocalX,my_garden.status.butterflies[i].normLocalY]);
  }
}
var midi={
  isActive:false,
  processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1,
  chnin:1, receivednotes:[], sentflowerheightccs:[], sentbutterflyxccs:[], sentbutterflyyccs:[],
  chnoutflowergrowing:2,chnoutfloweryoung:3,chnoutflowerheight:4,chnoutflowercollision:5,
  chnoutbutterflyx:6,chnoutbutterflyy:7,chnoutbutterflycollision:8,
};
function initMidi(){
  for(var i=0;i<128;i++){midi.receivednotes[i]=-1;midi.sentflowerheightccs[i]=-1;midi.sentbutterflyxccs[i]=-1;midi.sentbutterflyyccs[i]=-1;}
  if(isNaN(midi.inputPortIndex)) midi.inputPortIndex=-1;
  midi.inputPortIndex=Math.floor(midi.inputPortIndex);
  if(isNaN(midi.outputPortIndex)) midi.outputPortIndex=-1;
  midi.outputPortIndex=Math.floor(midi.outputPortIndex);
  midi.processor.init(midi.inputPortIndex,midi.outputPortIndex);
  if((midi.inputPortIndex>=0)||(midi.outputPortIndex>=0)) midi.isActive=true;
  if(midi.inputPortIndex>=0){
    midi.processor.onNoteOff = function(_midiEvent){handleIncomingMidiNoteOffMessages(_midiEvent);}
    midi.processor.onNoteOn = function(_midiEvent){handleIncomingMidiNoteOnMessages(_midiEvent);}
  }
}
function setReceivedNote(_note,_val){
  if(_note>127){console.log("[setReceivedNote] _note out of range: "+_note);return}
  midi.receivednotes[_note]=_val;
}
function sendFlowerHeightCc(_flowerIndex,_normHeight){
  if(_flowerIndex>127){console.log("[sendFlowerHeightCc] _flowerIndex out of range: "+_flowerIndex);return}
  _normHeight=int(map(_normHeight,0.0,1.0,0,127)); if(_normHeight<0) _normHeight=0; if(_normHeight>127) _normHeight=127;
  if(_normHeight===midi.sentflowerheightccs[_flowerIndex]) return;
  midi.processor.sendCC(_flowerIndex,_normHeight,midi.chnoutflowerheight);
  midi.sentflowerheightccs[_flowerIndex]=_normHeight;
}
function sendButterflyXCc(_butterflyIndex,_normX){
  if(_butterflyIndex>127){console.log("[sendButterflyXCc] _butterflyIndex out of range: "+_butterflyIndex);return}
  _normX=int(map(_normX,0.0,1.0,0,127)); if(_normX<0) _normX=0; if(_normX>127) _normX=127;
  if(_normX===midi.sentbutterflyxccs[_butterflyIndex]) return;
  midi.processor.sendCC(_butterflyIndex,_normX,midi.chnoutbutterflyx);
  midi.sentbutterflyxccs[_butterflyIndex]=_normX;
}
function sendButterflyYCc(_butterflyIndex,_normY){
  if(_butterflyIndex>127){console.log("[sendButterflyYCc] _butterflyIndex out of range: "+_butterflyIndex);return}
  _normY=int(map(_normY,0.0,1.0,0,127)); if(_normY<0) _normY=0; if(_normY>127) _normY=127;
  if(_normY===midi.sentbutterflyyccs[_butterflyIndex]) return;
  midi.processor.sendCC(_butterflyIndex,_normY,midi.chnoutbutterflyy);
  midi.sentbutterflyyccs[_butterflyIndex]=_normY;
}
function handleIncomingMidiNoteOffMessages(_midiEvent){if(_midiEvent.message.channel===midi.chnin) setReceivedNote(_midiEvent.note.number,-1);}
function handleIncomingMidiNoteOnMessages(_midiEvent){if(_midiEvent.message.channel===midi.chnin) if(_midiEvent.note.attack>0.0) setReceivedNote(_midiEvent.note.number,millis()); else setReceivedNote(_midiEvent.note.number,-1);}
function updateMidiIn(){
  for(var i=0;i<128;i++){if(midi.receivednotes[i]>0){my_garden.addMessageFromExternalInterface(i);}}
}
function updateMidiOut(){
  var collidingFlowerIndex=-1; var collidingButterflyIndex=-1;
  for(var i=0;i<my_garden.status.collisions.length;i++){
    collidingFlowerIndex=my_garden.status.collisions[i].flowerIndex;
    collidingButterflyIndex=my_garden.status.collisions[i].butterflyIndex;
    if(collidingFlowerIndex>127){console.log("[updateMidiOut] collidingFlowerIndex out of range: "+collidingFlowerIndex);return;}
    if(collidingButterflyIndex>127){console.log("[updateMidiOut] collidingButterflyIndex out of range: "+collidingButterflyIndex);return;}
    midi.processor.sendCC(collidingFlowerIndex,collidingButterflyIndex,midi.chnoutflowercollision);
    midi.processor.sendCC(collidingButterflyIndex,collidingFlowerIndex,midi.chnoutbutterflycollision);
  }
  for(var i=0;i<my_garden.status.flowers.length;i++){
    if(my_garden.status.flowers[i].growingChanged){midi.processor.sendMidiNote(i,float(int(my_garden.status.flowers[i].growing)),midi.chnoutflowergrowing);}
    if(my_garden.status.flowers[i].youngChanged){midi.processor.sendMidiNote(i,float(int(my_garden.status.flowers[i].young)),midi.chnoutfloweryoung);}
    sendFlowerHeightCc(i,my_garden.status.flowers[i].normLocalY);
  }
  for(var i=0;i<my_garden.status.butterflies.length;i++){
    sendButterflyXCc(i,my_garden.status.butterflies[i].normLocalX);
    sendButterflyYCc(i,my_garden.status.butterflies[i].normLocalY);
  }
}

var txtSize=10;

// a simple touch screen detection mechanism
function detectTouchScreen() {
  return !!('ontouchstart' in window) || (!!('onmsgesturechange' in window) &&
  !!window.navigator.maxTouchPoints);
}

/*
  This function performs a simple operation on an array containing (implicitly)
  data of taps - the function shifts vertical and horizontal coordinates of the
  taps by given values.
*/
function offsetTouches(_touches, _offset_x, _offset_y) {
  var result = [];
  if(_touches === null) {
    console.log('[offsetTouches] _touches === null');
    return result;
  }
  if(_touches === undefined) {
    console.log('[offsetTouches] _touches === undefined');
    return result;
  }
  if(isNaN(_offset_x)) {
    console.log('[offsetTouches] NaN: _offset_x = ' + _offset_x);
    _offset_x = 0;
  }
  if(isNaN(_offset_y)) {
    console.log('[offsetTouches] NaN: _offset_y = ' + _offset_y);
    _offset_y = 0;
  }
  for(var i = 0; i < _touches.length; i++)
    result[i] = {
      x: (_touches.x + _offset_x),
      y: (_touches.y + _offset_y)
    };
  return result;
}

/*
  Here we are trying to get access to the camera.
*/
/*
// old version
function initCaptureDevice() {
  is_capture_available_flag = false;
  try {
    my_capture = createCapture(VIDEO);
    my_capture.size(PREFERRED_CAPTURE_WIDTH, PREFERRED_CAPTURE_HEIGHT);
    my_capture.elt.setAttribute('playsinline', '');
    my_capture.hide();
    console.log(
      '[initCaptureDevice] capture ready. Resolution: ' +
      my_capture.width + ' ' + my_capture.height
    );
    is_capture_available_flag = true;
  } catch(_err) {
    console.log('[initCaptureDevice] capture error: ' + _err);
  }
}
*/
function initCaptureDevice(){
  let b=_initCaptureDevice(PREFERRED_CAPTURE_WIDTH, PREFERRED_CAPTURE_HEIGHT);
  if((!b)&&(cameraFacingMode!=="default")){
    console.log("[initCaptureDevice] can't access capture device against current facing mode ("+cameraFacingMode+"), trying to access default mode instead...");
    cameraFacingMode="default"; b=_initCaptureDevice(PREFERRED_CAPTURE_WIDTH, PREFERRED_CAPTURE_HEIGHT);
  };
  is_capture_available_flag = b;
}
function _initCaptureDevice(_w,_h){
  let result=false;
    switch(cameraFacingMode){
    case "default":
      try{
        my_capture=createCapture(VIDEO,{flipped:cameraFlip});
        my_capture.size(_w,_h);
        my_capture.elt.setAttribute('playsinline', '');
        my_capture.hide();
        console.log('[_initCaptureDevice] capture ready: '+my_capture.width+' '+my_capture.height);
        result=true;
      }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
    break;
    case "user":
      try{
        my_capture=createCapture(VIDEO,{video:{facingMode:{exact:"user"}},flipped:cameraFlip});
        //my_capture=createCapture({audio:false,video:{flipped:cameraFlip,facingMode:{exact:"user"}}});
        my_capture.size(_w,_h);
        my_capture.elt.setAttribute('playsinline', '');
        my_capture.hide();
        console.log('[_initCaptureDevice] capture ready: '+my_capture.width+' '+my_capture.height);
        result=true;
      }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
    break;
    case "environment":
      try{
        my_capture=createCapture(VIDEO,{video:{facingMode:{exact:"environment"}},flipped:cameraFlip});
        //my_capture=createCapture({audio:false,video:{flipped:cameraFlip,facingMode:{exact:"environment"}}});
        my_capture.size(_w,_h);
        my_capture.elt.setAttribute('playsinline', '');
        my_capture.hide();
        console.log('[initCaptureDevice] capture ready: '+my_capture.width+' '+my_capture.height);
        result=true;
      }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
    break;
    default: console.log("[_initCaptureDevice] unhandled cameraFacingMode: "+cameraFacingMode);
  }
  return result;
}

/*
  VIDA stuff - check https://tetoki.eu/vida for detailed info
*/
function initVida() {
  my_vida = new Vida(this); // create the object
  /*
    Turn on the progressive background mode.
  */
  my_vida.progressiveBackgroundFlag = true;
  /*
    The value of the feedback for the procedure that calculates the background
    image in progressive mode. The value should be in the range from 0.0 to 1.0
    (float). Typical values of this variable are in the range between ~0.9 and
    ~0.98.
  */
  my_vida.imageFilterFeedback = 0.925;
  /*
    The value of the threshold for the procedure that calculates the threshold
    image. The value should be in the range from 0.0 to 1.0 (float).
  */
  my_vida.imageFilterThreshold = image_filter_threshold;
  /*
    You may need a horizontal image flip when working with the video camera.
    If you need a different kind of mirror, here are the possibilities:
      [your vida object].MIRROR_NONE
      [your vida object].MIRROR_VERTICAL
      [your vida object].MIRROR_HORIZONTAL
      [your vida object].MIRROR_BOTH
    The default value is MIRROR_NONE.
  */
  my_vida.mirror = my_vida.MIRROR_HORIZONTAL;
  /*
    In order for VIDA to handle active zones (it doesn't by default), we set
    this flag.
  */
  my_vida.handleActiveZonesFlag = true;
  /*
    If you want to change the default sensitivity of active zones, use this
    function. The value (floating point number in the range from 0.0 to 1.0)
    passed to the function determines the movement intensity threshold which
    must be exceeded to trigger the zone (so, higher the parameter value =
    lower the zone sensitivity).
  */
  my_vida.setActiveZonesNormFillThreshold(0.02);
}

/*
  This function synchronizes the position and size of active zones (responding
  to motion occurrence) to the location and size of flowers and butterflies.
*/
function syncVidaActiveZones(_temp_scaled_capture_w, _temp_scaled_capture_h) {
  // no flowers, no butterflies... garden is not ready yet
  if(my_garden.flowers.length === 0 || my_garden.butterflies.length === 0)
    return;
  var temp_n = my_garden.number_of_butterflies + my_garden.number_of_flowers;
  var temp_offset_x = (_temp_scaled_capture_w - width) * 0.5;
  var temp_offset_y = (_temp_scaled_capture_h - height) * 0.5;
  var temp_norm_flower_w = my_garden.flower_size / _temp_scaled_capture_w;
  var temp_norm_flower_h = my_garden.flower_size / _temp_scaled_capture_h;
  var temp_norm_butterfly_w =
    my_garden.butterfly_size / _temp_scaled_capture_w * 2.0;
  var temp_norm_butterfly_h =
    my_garden.butterfly_size / _temp_scaled_capture_h;
  if(my_vida.activeZones.length !== temp_n) {
    /*
      Let's create several active zones. VIDA uses normalized (in the range
      from 0.0 to 1.0) instead of pixel-based. Thanks to this, the position and
      size of the zones are independent of any eventual changes in the captured
      image resolution.
      AddActiveZone function (which, of course, adds active zones to the VIDA
      object) comes in two versions:
        [your vida object].addActiveZone(
          _id, // zone's identifier (integer or string)
          _normX, _normY, _normW, _normH, // normalized (!) rectangle
          _onChangeCallbackFunction // callback function (triggered on change)
        );
      and
        [your vida object].addActiveZone(
          _id, // zone's identifier (integer or string)
          _normX, _normY, _normW, _normH, // normalized (!) rectangle
        );
      If we use the first version, we should define the function that will be
      called after the zone status changes. E.g.
        function onActiveZoneChange(_vidaActiveZone) {
          console.log(
            'zone: ' + _vidaActiveZone.id +
            ' status: ' + _vidaActiveZone.isMovementDetectedFlag
          );
        }
      Then the addActiveZone call can look like this:
        [your vida object].addActiveZone(
          'an_id', // id
          0.33, 0.33, 0.33, 0.33, // big square on the center of the image
          onActiveZoneChange // callback function
        );
      Note: It is also worth mentioning here that if you want, you can delete a
            zone (or zones) with a specific identifier (id) at any time. To do
            this, use the removeActiveZone function:
              [your vida object].removeActiveZone(id);
      But this time we just want to create our own function drawing the zones
      and we will check their statuses manually, so we can opt out of defining
      the callback function, and we will use the second, simpler version of the
      addActiveZone function.
    */
    my_vida.activeZones.splice(0, my_vida.activeZones.length);
    for(var i = 0; i < temp_n; i++)
      my_vida.addActiveZone(i, 0.0, 0.0, 0.05, 0.05);
    console.log('[syncVidaActiveZones] number of active zones: ' + temp_n);
  }
  for(var i = 0; i < my_garden.number_of_flowers; i++) {
    my_vida.activeZones[i].normX =
      (temp_offset_x + my_garden.flowers[i].x) / _temp_scaled_capture_w;
    my_vida.activeZones[i].normY =
      (temp_offset_y + my_garden.flowers[i].y) / _temp_scaled_capture_h;
    my_vida.activeZones[i].normW = temp_norm_flower_w;
    my_vida.activeZones[i].normH = temp_norm_flower_h;
  }
  for(var i = my_garden.number_of_flowers; i < temp_n; i++) {
    my_vida.activeZones[i].normX =
      (temp_offset_x + my_garden.butterflies[i - my_garden.number_of_flowers].x) /
        _temp_scaled_capture_w;
    my_vida.activeZones[i].normY =
      (temp_offset_y + my_garden.butterflies[i - my_garden.number_of_flowers].y) /
        _temp_scaled_capture_h;
    my_vida.activeZones[i].normW = temp_norm_butterfly_w;
    my_vida.activeZones[i].normH = temp_norm_butterfly_h;
  }
}

/*
  Function that calculates and sets Vida's motion detector threshold. Typically
  called from the parent (or even parent-of-the-parent - eg. if sketch is
  nested inside iframe) html file.
*/
function setMotionDetectorSensitivity(_sensitivity) {
  if(_sensitivity === null) {
    console.log('[setSensitivity] _sensitivity === null');
    return;
  }
  if(_sensitivity === undefined) {
    console.log('[setSensitivity] _sensitivity === undefined');
    return;
  }
  if(isNaN(_sensitivity)) {
    console.log('[setSensitivity] _sensitivity isNaN');
    return;
  }
  if(_sensitivity < 0.0) {
    console.log('[setSensitivity] _sensitivity < 0.0, set to 0.0');
    _sensitivity = 0.0;
  }
  if(_sensitivity > 1.0) {
    console.log('[setSensitivity] _sensitivity > 1.0, set to 1.0');
    _sensitivity = 1.0;
  }
  // remap _sensitivity value into more useful range
  image_filter_threshold = (1.0 - _sensitivity) *
    (max_image_filter_threshold - min_image_filter_threshold) +
      min_image_filter_threshold;
  my_vida.imageFilterThreshold = image_filter_threshold;
}

/*
  Function that changes the size and location of graphic elements in response
  to a change in the size of the project. It reacts to both the size of the
  browser window and the flip of the mobile device.
*/
function setDimentions() {
  // calc new sketch size
  var temp_w = MINIMUM_SKETCH_WIDTH; var temp_h = MINIMUM_SKETCH_HEIGHT;
  if(innerWidth > temp_w) temp_w = innerWidth;
  if(innerHeight > temp_h) temp_h = innerHeight;
  temp_w = innerWidth;
  temp_h = innerHeight;
  // calc new growing speed
  if(forced_flower_growing_speed_factor>0.0){
    flower_growing_speed = temp_h * forced_flower_growing_speed_factor;
  }else{
    flower_growing_speed = Math.ceil(temp_h * 0.003);
  }
  // clear the garden
  my_garden.flowers.splice(0, my_garden.flowers.length);
  my_garden.butterflies.splice(0, my_garden.butterflies.length);
  // resize canvas
  resizeCanvas(temp_w, temp_h); // window.scroll(0, 0);
  // calc new amount and sizes of all graphical elements and texts
  var temp_canvas_proportion = width / height;
  var temp_number_of_flowers = Math.floor(temp_canvas_proportion * 5.0);
  var temp_unit_size = Math.floor(width / temp_number_of_flowers * 0.9);
  my_garden.stroke_weight = Math.floor(Math.sqrt(width * height * 0.000006)) + 1;
  my_garden.flower_size           = temp_unit_size;
  my_garden.butterfly_size        = temp_unit_size;
  my_garden.number_of_flowers     = temp_number_of_flowers;
  my_garden.number_of_butterflies = Math.floor(width / height * 3.0) + 2;
  txtSize=Math.floor(temp_unit_size * 0.2);
  textSize(txtSize);
  if(guiContainer.forcedNumOfFlowers>0) my_garden.number_of_flowers = guiContainer.forcedNumOfFlowers;
  if(guiContainer.forcedNumOfButterflies>0) my_garden.number_of_butterflies = guiContainer.forcedNumOfButterflies;
  if(guiContainer.forcedfFlowerGrowingSpeed>0.0) flower_growing_speed = guiContainer.forcedfFlowerGrowingSpeed;
  if(guiContainer.forcedFlowerSize>0) my_garden.flower_size = guiContainer.forcedFlowerSize;
  if(guiContainer.forcedButterflySize>0) my_garden.butterfly_size = guiContainer.forcedButterflySize;
  if(guiContainer.forcedFlowerStrokeWeight>0) my_garden.forcedThemeElements.flowerStrokeWeight = guiContainer.forcedFlowerStrokeWeight;
  if(guiContainer.forcedButterflyStrokeWeight>0) my_garden.forcedThemeElements.butterflyStrokeWeight = guiContainer.forcedButterflyStrokeWeight;
  if(guiContainer.forcedFlowerTextFont.length>0) my_garden.forcedThemeElements.flowerTextFont = guiContainer.forcedFlowerTextFont;
  if(guiContainer.forcedButterflyTextFont.length>0) my_garden.forcedThemeElements.butterflyTextFont = guiContainer.forcedButterflyTextFont;
  if(guiContainer.forcedFlowerTextSize>0) my_garden.forcedThemeElements.flowerTextSize = guiContainer.forcedFlowerTextSize;
  if(guiContainer.forcedButterflyTextSize>0) my_garden.forcedThemeElements.butterflyTextSize = guiContainer.forcedButterflyTextSize;
  initFlowersAndButterflies(); initNames();
}

// just a wrapper for external access to the lang var
function getLangAsString(){return my_garden.getLangAsString();}


function initNames() {
  for(var i = 0; i < my_garden.flowers.length; i++)
    my_garden.flowers[i].name_index = my_garden.getRandomUniqueFlowerIndex();
  for(var i = 0; i < my_garden.butterflies.length; i++)
    my_garden.butterflies[i].name_index = my_garden.getRandomUniqueButterflyIndex();
}

function initFlowersAndButterflies() {
  // plant the flowers
  for(var i = 0; i < my_garden.number_of_flowers; i++)
    my_garden.flowers[i] = {
      name_index:
        0,
      x:
        (1.0 / my_garden.number_of_flowers * width - my_garden.flower_size) *
          0.5 + width * (i / my_garden.number_of_flowers),
      y:
        height,
      young:true,
      growing:false
    };
  // free the butterflies
  for(var i = 0; i < my_garden.number_of_butterflies; i++)
    my_garden.butterflies[i] = {
      name_index:
        0,
      x:
        -1.0,
      y:
        -1.0,
      animation_phase_shift:
        i / my_garden.number_of_butterflies * TWO_PI,
      creation_time:
        millis()
    };
}

/*
  A function that sets one of the available color schemes.
*/
function applyColorComposition(_color_composition) {
  color_composition = _color_composition;
  switch(color_composition) {
    case COLOR_COMPOSITION_DARK:
      bg_r = 0; bg_g = 0; bg_b = 0;
      blink_r = 0; blink_g = 0; blink_b = 111;
      my_garden.setStrokeColor(255, 255, 255);
      my_garden.setTextColor(255, 255, 255);
      my_garden.setFillColor(bg_r, bg_g, bg_b);
    break;
    case COLOR_COMPOSITION_LIGHT:
      bg_r = 255; bg_g = 255; bg_b = 255;
      blink_r = 200; blink_g = 200; blink_b = 255;
      my_garden.setStrokeColor(0, 0, 0);
      my_garden.setTextColor(0, 0, 0);
      my_garden.setFillColor(bg_r, bg_g, bg_b);
    break;
    default:
      console.log(
        '[applyColorComposition] unhandled color_composition: ' +
        color_composition
      );
  }
}

/*
  A function that displays the initial information about the project before the
  user clicks/taps.
*/
function typeInfoString() {
  var temp_leading = 26; var temp_top_padding = 150;
  push();
    textSize(20); textStyle(BOLD);
    textFont('monospace');
    textLeading(temp_leading);
    noStroke();
    switch(color_composition) {
      case COLOR_COMPOSITION_DARK: fill(0, 160); break;
      case COLOR_COMPOSITION_LIGHT: fill(255, 196); break;
      default: console.log('[typeInfoString] unhandled color_composition value: ' + color_composition);
    }
    rect(0, 0, width, height);
    switch(color_composition) {
      case COLOR_COMPOSITION_DARK:
        fill(255, (Math.sin(millis() * 0.0031) + 1.0) * 0.5 * 22.0 + 200);
      break;
      case COLOR_COMPOSITION_LIGHT:
        fill(0, (Math.sin(millis() * 0.0031) + 1.0) * 0.5 * 100.0 + 155);
      break;
      default: console.log('[typeInfoString] unhandled color_composition value: ' + color_composition);
    }
    textAlign(LEFT, CENTER);
    switch(my_garden.lang){
      case my_garden.LANG_EN:  text(infoString_en,  width/2 - 310 + 10, height/2); break;
      case my_garden.LANG_PL:  text(infoString_pl,  width/2 - 310 + 10, height/2); break;
      case my_garden.LANG_UR:  text(infoString_ur,  width/2 - 310 + 10, height/2); break;
      case my_garden.LANG_SRB: text(infoString_srb, width/2 - 310 + 10, height/2); break;
      case my_garden.LANG_RO:  text(infoString_ro,  width/2 - 310 + 10, height/2); break;
      case my_garden.LANG_GR:  text(infoString_gr,  width/2 - 310 + 10, height/2); break;
      default: console.log('[typeInfoString] unhandled my_garden.lang value: ' + my_garden.lang);
    }
  pop();
}

/*
  Calling this function should allow the web browser on the mobile device to go
  to full-screen mode if the device has been set in a horizontal orientation.
*/
function mobileLandscapeFullscreen() {
  setDimentions();
  window.scroll(0, 0);
}

/*
  Detection of parameters passed in the form of a URL address.
*/
function processUrlParams() {
  var urlparams = getURLParams(); if(urlparams===null) return; if(urlparams===undefined) return;
  if("splash" in urlparams){
    let v=parseInt(urlparams.splash); if(!isNaN(v)){guiContainer.splash=(v>0);}
    console.log("[processUrlParams] splash: "+guiContainer.splash);
  }
  if("gui" in urlparams){
    let v=parseInt(urlparams.gui); if(!isNaN(v)){guiContainer.isActive=(v>0);}
    console.log("[processUrlParams] gui: "+guiContainer.isActive);
  }
  if("famo" in urlparams){
    cameraFacingMode=decodeURIComponent(urlparams.famo);
    cameraFacingMode=cameraFacingMode.toLowerCase();
    if(cameraFacingMode==="env") cameraFacingMode="environment";
    console.log("[processUrlParams] camera facing mode: "+cameraFacingMode);
  }
  if("mirror" in urlparams){let v=parseInt(urlparams.mirror); if(!isNaN(v)){cameraFlip=!(v>0);} console.log("[processUrlParams] mirror: "+(!cameraFlip));}
  if("dark" in urlparams){if(urlparams.darkmode>0){guiContainer.gui.items[guiContainer.handlers.toColorThemeToggle.id].setValue(true);}}
  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;
      guiContainer.gui.items[guiContainer.handlers.toSensitivitySlider.id].setNormValue(v);
      console.log("[processUrlParams] sensitivity: "+v);
    }
  }
  if("lang" in urlparams){guiContainer.gui.items[guiContainer.handlers.toLangSelector.id].setValueFromLanguageCode(decodeURIComponent(urlparams.lang)); console.log("[processUrlParams] lang: "+decodeURIComponent(urlparams.lang));}
  if("ilang" in urlparams){guiContainer.gui.setLangFromHandlers(decodeURIComponent(urlparams.ilang),guiContainer.handlers); console.log("[processUrlParams] interface lang: "+decodeURIComponent(urlparams.ilang));}
  if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0); console.log("[processUrlParams] worker: "+useWorker);}}
  if("pointer" in urlparams){let v=parseInt(urlparams.pointer); if(!isNaN(v)){guiContainer.isPointerVisibleAndInteractive=(v>0); console.log("[processUrlParams] pointer: "+guiContainer.isPointerVisibleAndInteractive);}}
  if("motion" in urlparams){let v=parseInt(urlparams.motion); if(!isNaN(v)){guiContainer.useMotionAsInterface=(v>0); console.log("[processUrlParams] motion: "+guiContainer.useMotionAsInterface);}}
  if("growingspeed" in urlparams){let v=parseFloat(urlparams.growingspeed); if(!isNaN(v)){forced_flower_growing_speed_factor=v; console.log("[processUrlParams] forced flower growing speed: "+forced_flower_growing_speed_factor);}}
  if("flowers" in urlparams){let v=parseInt(urlparams.flowers); if(!isNaN(v)){urlparams.flowers=Math.floor(v); if(v<1) v=1; guiContainer.forcedNumOfFlowers=v; console.log("[processUrlParams] forced number of flowers: "+v);}}
  if("butterflies" in urlparams){let v=parseInt(urlparams.butterflies); if(!isNaN(v)){v=Math.floor(v); if(v<1) v=1; guiContainer.forcedNumOfButterflies=v; console.log("[processUrlParams] forced number of butterflies: "+v);}}
  if("flowersize" in urlparams){let v=parseInt(urlparams.flowersize); if(!isNaN(v)){guiContainer.forcedFlowerSize=v; console.log("[processUrlParams] forced flower size: "+v);}}
  if("butterflysize" in urlparams){let v=parseInt(urlparams.butterflysize); if(!isNaN(v)){guiContainer.forcedButterflySize=v; console.log("[processUrlParams] forced butterfly size: "+v);}}
  if("flowerstroke" in urlparams){let v=parseFloat(urlparams.flowerstroke); if(!isNaN(v)){guiContainer.forcedFlowerStrokeWeight=v; console.log("[processUrlParams] forced flower stroke: "+v);}}
  if("butterflystroke" in urlparams){let v=parseFloat(urlparams.butterflystroke); if(!isNaN(v)){guiContainer.forcedButterflyStrokeWeight=v; console.log("[processUrlParams] forced butterfly stroke: "+v);}}
  if("flowerfont" in urlparams){guiContainer.forcedFlowerTextFont=decodeURIComponent(urlparams.flowerfont); console.log("[processUrlParams] forced flower font name: "+guiContainer.forcedFlowerTextFont);}
  if("butterflyfont" in urlparams){guiContainer.forcedButterflyTextFont=decodeURIComponent(urlparams.butterfly); console.log("[processUrlParams] forced butterfly font name: "+guiContainer.forcedButterflyTextFont);}
  if("flowertextsize" in urlparams){let v=parseInt(urlparams.flowertextsize); if(!isNaN(v)){guiContainer.forcedFlowerTextSize=v; console.log("[processUrlParams] forced flower text size: "+v);}}
  if("butterflytextsize" in urlparams){let v=parseInt(urlparams.butterflytextsize); if(!isNaN(v)){guiContainer.forcedButterflyTextSize=v; console.log("[processUrlParams] forced butterfly text size: "+v);}}
  if("synth" in urlparams){let v=parseInt(urlparams.synth); if(!isNaN(v)){enableInnerSynth=(v>0); console.log("[processUrlParams] inner synth: "+enableInnerSynth);}}
  if("cntextmsg" in urlparams){let v=parseInt(urlparams.cntextmsg); if(!isNaN(v)){my_garden.setUseNumOfExternalMessagesPerIndex(v>0); console.log("[processUrlParams] detect number of external messages per flower index: "+(v>0));}}
  if("midiinport" in urlparams){let v=parseInt(urlparams.midiinport); if(!isNaN(v)){midi.inputPortIndex=v; console.log("[processUrlParams] MIDI input port index: "+v);}}
  //if("midiinchn" in urlparams){if(!isNaN(urlparams.midiinchn)){midi.chnin=1+(Math.abs(Math.floor(urlparams.midiinchn)-1)%16);}} // 1 ... 16
  if("midioutport" in urlparams){let v=parseInt(urlparams.midioutport); if(!isNaN(v)){midi.outputPortIndex=v; console.log("[processUrlParams] MIDI output port index: "+v);}}
  //if("midioutchn" in urlparams){if(!isNaN(urlparams.midioutchn)){midi.chnout=1+(Math.abs(Math.floor(urlparams.midioutchn)-1)%16);}} // 1 ... 16
  if("ws" in urlparams){webSocket.address="ws://"+decodeURIComponent(urlparams.ws)+"/"; webSocket.isActive=true; console.log("[processUrlParams] (ws) webSocket.address: "+webSocket.address);}
  if("xws" in urlparams){webSocket.address=decodeURIComponent(urlparams.xws); webSocket.isActive=true; console.log("[processUrlParams] (xws) webSocket.address: "+webSocket.address);}
}

/*
  Here we block default browser'a touch-handling mechanisms.
*/
function touchStarted(){handlePointerStart(mouseX,mouseY); return false;}
function touchEnded(){handlePointerRelease(mouseX,mouseY); return false;}
function touchMoved(){handlePointerDragged(mouseX,mouseY); return false;}
//function doubleClicked(){return false;};
//function mouseClicked(){return false;}
//function mouseDragged(){return false;};
function mouseMoved(){handlePointerMoved(mouseX,mouseY); return false;};
//function mousePressed(){return false;};
//function mouseReleased(){return false;};
//function mouseWheel(){return false;};

function handlePointerMoved(_x,_y){guiContainer.gui.moveIdlePointer(_x,_y);}
function handlePointerStart(_x,_y){guiContainer.lock=guiContainer.gui.lockPointer(_x,_y);}
function handlePointerDragged(_x,_y){guiContainer.gui.dragPointer(_x,_y);}
function handlePointerRelease(_x,_y){
  if(is_playing_flag){
    if(guiContainer.isActive){
      if(guiContainer.lock<0){
        if(guiContainer.gui.hitTestAllItems(_x,_y)<0){
          guiContainer.gui.disableAllItems(); guiContainer.isActive=false;
          guiContainer.gui.setBackgroundPanelVisibility(false); //guiContainer.gui.setBackgroundPanelColor(_r,_g,_b,_a) guiContainer.gui.setBackgroundPanelRect(_x,_y,_w,_h,_r)
          if(!guiContainer.isPointerVisibleAndInteractive) noCursor();
        }
      }
    }else{
      guiContainer.gui.enableAllItems(); guiContainer.isActive=true; cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true); //guiContainer.gui.setBackgroundPanelColor(_r,_g,_b,_a) guiContainer.gui.setBackgroundPanelRect(_x,_y,_w,_h,_r)
    }
    guiContainer.gui.unlockPointer(mouseX,mouseY);
    if(!guiContainer.isPointerVisibleAndInteractive&&!is_playing_flag) noCursor();
  }else{
    my_soundtrack.start(); is_playing_flag = true;
  }
}

// let's setup everything...
function setup(){
  /*
    First, let's check if the sketch can use some parameters passed through the
    URL.
  */
  createCanvas(2, 2); // ugly, but works...
  touchScreenDeviceFlag = detectTouchScreen();
  my_capturePainter = new CapturePainter();
  // set text font, align and framerate
  textFont('Georgia');
  applyColorComposition(color_composition); // just to be sure...
  setDimentions();
  initVida();
  initGui();
  processUrlParams();
  if(guiContainer.isActive){
    guiContainer.gui.enableAllItems(); cursor(); guiContainer.gui.setBackgroundPanelVisibility(true);
  }else{
    guiContainer.gui.disableAllItems(); noCursor(); guiContainer.gui.setBackgroundPanelVisibility(false);
  }
  guiContainer.gui.forceBroadcast();
  setDimentions();
  initMidi(); initWebSocket();
  my_soundtrack = new Soundtrack(enableInnerSynth);
  if(guiContainer.useMotionAsInterface) initCaptureDevice();
  console.log('[setup] capture device status = ' + is_capture_available_flag);
  /*
    When changing the orientation of the device, we try to go into full-screen
    mode. When using mobile devices, this should provide the opportunity to
    work in full-screen mode at the horizontal orientation of the device.
  */ 
  window.addEventListener(
    "orientationchange",
    function() {setTimeout(mobileLandscapeFullscreen, 3);}
  );
  initWorker();
}

// ... and to draw it...
function draw() {
  var temp_capture_scale_ratio_hor, temp_capture_scale_ratio_ver,
      temp_scaled_capture_w, temp_scaled_capture_h;
  if(
    // check if we have to rescale graphic elements
    (innerWidth !== width || innerHeight !== height) //&&
    //!mouseIsPressed // resizing in progress? wait...
  ) setDimentions();
  if(
    is_capture_available_flag && my_capture.width > 0 && my_capture.height > 0
  ) {
    temp_capture_scale_ratio_hor = Math.max(width / my_capture.width, height / my_capture.height);
    temp_capture_scale_ratio_ver = temp_capture_scale_ratio_hor;
    temp_scaled_capture_w = temp_capture_scale_ratio_hor * my_capture.width;
    temp_scaled_capture_h = temp_capture_scale_ratio_ver * my_capture.height;
    if(is_capture_available_flag){
      syncVidaActiveZones(temp_scaled_capture_w, temp_scaled_capture_h);
      my_vida.update(my_capture);
    }
  }
  if(webSocket.isActive&&webSocket.processor.isEnabled) updateWebSocketIn();
  if(midi.isActive&&midi.processor.isEnabled&&(midi.inputPortIndex>=0)) updateMidiIn();
  my_garden.update(); // keep an eye on the garden
  if(webSocket.isActive&&webSocket.processor.isEnabled) updateWebSocketOut();
  if(midi.isActive&&midi.processor.isEnabled&&(midi.outputPortIndex>=0)) updateMidiOut();
  // blink on collisions between flower and butterfly
  background_luma_factor = (millis() - last_collision) / collision_lag;
  if(background_luma_factor > 1.0) background_luma_factor = 1.0;
  background_luma_factor = 1.0 - background_luma_factor;
  var temp_color = lerpColor(
    color(bg_r, bg_g, bg_b), color(blink_r, blink_g, blink_b),
    background_luma_factor
  );
  my_garden.setFillColor(red(temp_color), green(temp_color), blue(temp_color));
  background(temp_color);
  document.body.style.background = 'rgb(' + int(red(temp_color)) + ', ' + int(green(temp_color)) + ', ' + int(blue(temp_color)) + ')';
  if(
    is_capture_available_flag && my_capture.width > 0 && my_capture.height > 0
  ) {
    my_capturePainter.draw(
      my_vida.thresholdImage, temp_scaled_capture_w, temp_scaled_capture_h
    );
    // some stuff useful for tests
    /*
    image(
      my_vida.thresholdImage,
      -0.5 * (temp_scaled_capture_w - width),
      -0.5 * (temp_scaled_capture_h - height),
      temp_scaled_capture_w, temp_scaled_capture_h
    );
    my_vida.drawActiveZones(
      -0.5 * (temp_scaled_capture_w - width),
      -0.5 * (temp_scaled_capture_h - height),
      temp_scaled_capture_w, temp_scaled_capture_h
    );
    */
  }
  textFont('Georgia'); textAlign(CENTER, CENTER); textStyle(NORMAL); textSize(txtSize); // default common garden font
  my_garden.draw(); // draw the garden
  my_soundtrack.update();
  guiContainer.gui.draw();
  if((!is_playing_flag)&&(guiContainer.splash)){typeInfoString();}else{if(guiContainer.drawStatusFlag) my_garden.drawStatus(20,20);}
  //noStroke();fill(0);textAlign(LEFT); text(my_garden.status.butterflies[0].normLocalY, 20,20);
}
								

									anim.js
									/*
  PSEUDO-CLASS AnimRotatingSegment

  Flower animation after contact with a butterfly.
*/

function AnimRotatingSegment(
  _x1, _y1, _x2, _y2, _anchor_x, _anchor_y, _begin_stroke, _rotation_factor,
  _r, _g, _b
) {
  this.x1              = _x1;
  this.y1              = _y1;
  this.x2              = _x2;
  this.y2              = _y2;
  this.anchor_x        = _anchor_x;
  this.anchor_y        = _anchor_y;
  this.begin_stroke    = _begin_stroke;
  this.rotation_factor = _rotation_factor;
  this.creation_time   = millis();
  this.ttl             = 1000 + random(700);
  this.stroke_r        = _r;
  this.stroke_g        = _g;
  this.stroke_b        = _b;
}

AnimRotatingSegment.prototype.draw = function() {
  var temp_phase, temp_scale, temp_x1, temp_y1, temp_x2, temp_y2,
      temp_center_x, temp_center_y, temp_release_scale, temp_delta_t,
      temp_release_time_offset;
  temp_release_time_offset = 0.9 * this.ttl;
  temp_delta_t = millis() - this.creation_time;
  temp_phase = temp_delta_t / this.ttl;
  temp_scale = 1.0 + temp_phase * 5.0;
  temp_x1 = (this.x1 - this.anchor_x) * temp_scale + this.anchor_x;
  temp_y1 = (this.y1 - this.anchor_y) * temp_scale + this.anchor_y;
  temp_x2 = (this.x2 - this.anchor_x) * temp_scale + this.anchor_x;
  temp_y2 = (this.y2 - this.anchor_y) * temp_scale + this.anchor_y;
  temp_center_x = temp_x1 + (temp_x2 - temp_x1) * 0.5;
  temp_center_y = temp_y1 + (temp_y2 - temp_y1) * 0.5;
  temp_x1 -= temp_center_x; temp_y1 -= temp_center_y;
  temp_x2 -= temp_center_x; temp_y2 -= temp_center_y;
  push();
    translate(temp_center_x, temp_center_y);
    rotate(
      (millis() - this.creation_time) * this.rotation_factor
    );
    noFill();
    stroke(this.stroke_r, this.stroke_g, this.stroke_b);
    strokeWeight(this.begin_stroke);
    if(temp_delta_t > temp_release_time_offset) {
      temp_release_scale = 1.0 - (temp_delta_t - temp_release_time_offset) /
        (this.ttl - temp_release_time_offset);
      temp_x1 *= temp_release_scale; temp_y1 *= temp_release_scale;
      temp_x2 *= temp_release_scale; temp_y2 *= temp_release_scale;
    }
    line(temp_x1, temp_y1, temp_x2, temp_y2);
  pop();
}

/*
  PSEUDO-CLASS AnimRotatingRect

  Butterfly animation after contact with a flower.
*/

function AnimRotatingRect(
  _center_x, _center_y, _w, _h, _begin_stroke, _rotation_factor, _r, _g, _b
) {
  this.center_x        = _center_x;
  this.center_y        = _center_y;
  this.w               = _w;
  this.h               = _h;
  this.begin_stroke    = _begin_stroke;
  this.rotation_factor = _rotation_factor;
  this.creation_time   = millis();
  this.ttl             = 1500;
  this.stroke_r        = _r;
  this.stroke_g        = _g;
  this.stroke_b        = _b;
}

AnimRotatingRect.prototype.draw = function() {
  var temp_phase, temp_scale;
  temp_phase = (millis() - this.creation_time) / this.ttl;
  push();
    noFill();
    stroke(
      this.stroke_r, this.stroke_g, this.stroke_b, (1.0 - temp_phase) * 255.0)
    ;
    strokeWeight(this.begin_stroke * (1.0 + temp_phase));
    translate(this.center_x, this.center_y - height * temp_phase * 0.5);
    rotate(
      (millis() - this.creation_time) * this.rotation_factor
    );
    temp_scale = 1.0 + temp_phase;
    rect(
      -this.w * 0.5 * temp_scale, -this.h * 0.5 * temp_scale,
      this.w * temp_scale, this.h * temp_scale
    );
  pop();
}

/*
  PSEUDO-CLASS Animations

  A class that deals with animations that remain after the collisions of
  flowers and butterflies.
*/

function Animations() {
  this.animations = [];
}

Animations.prototype.update = function() {
  for(var i = this.animations.length - 1; i >= 0; i--)
    if(millis() - this.animations[i].creation_time > this.animations[i].ttl)
      this.animations.splice(i, 1);
}

Animations.prototype.draw = function() {
  for(var i = 0; i < this.animations.length; i++) this.animations[i].draw();
}

Animations.prototype.addAnimation = function(_animation) {
  this.animations[this.animations.length] = _animation;
}

Animations.prototype.setStrokeColor = function(_r, _g, _b) {
  for(var i = 0; i < this.animations.length; i++) {
    this.animations[i].stroke_r = _r;
    this.animations[i].stroke_g = _g;
    this.animations[i].stroke_b = _b;
  }
}

								

									capturepainter.js
									/*
  PSEUDO-CLASS CapturePainter responsible for drawing the stylized image from
  the motion detection system.
*/

function CapturePainter() {
  this.stripes = createGraphics(10, 10);
  this.result = createGraphics(10, 10);
}

// p5js bug (?) workaround
CapturePainter.prototype.resizeGraphicsWorkaround = function(_g, _w, _h) {
  if(_g === null){_g = createGraphics(_w, _h); _g.pixelDensity(1);}
  if((_g.width===null)||(_g.height===null)){_g = createGraphics(_w, _h); _g.pixelDensity(1);}
  if(_g.width<1||_g.height<1){_g = createGraphics(_w, _h); _g.pixelDensity(1);}

  //_g.remove(); _g = createGraphics(_w, _h);
  _g.width = _w; _g.height = _h;
  //_g.size(_w, _h);
  _g.elt.setAttribute('style', 'width:' + _w + 'px; height:' + _h + 'px');
  _g.elt.style.width = _w +'px'; _g.elt.style.height = _h + 'px';
  _g.elt.setAttribute('style', 'display: none');
  _g.pixelDensity(1);

  _g.updatePixels();
  _g.background(0);
  _g.loadPixels();
  if(_w * _h !== _g.pixels.length / 4) {
    console.log(
      '[CapturePainter, resizeGraphicsWorkaround] _w * _h !==' +
      ' _g.pixels.length / 4:' +
      '\n_w = ' + _w + ' _h = ' + _h +
      '\n_g.width = ' + _g.width + ' _g.height = ' + _g.height +
      '\n_w * _h = ' + (_w * _h) +
      '\n_g.pixels.length / 4 = ' + (_g.pixels.length / 4)
    );
  }
}

CapturePainter.prototype.draw = function(_image, _scaled_w, _scaled_h) {
  var temp_offset_x, temp_offset_y, temp_w, temp_h, temp_stroke_weight;
  if(this.stripes.width !== width || this.stripes.height !== height) {
    this.resizeGraphicsWorkaround(this.stripes, width, height);
    this.resizeGraphicsWorkaround(this.result, width, height);
    //this.stripes.resizeCanvas(width, height);
    //this.result.resizeCanvas(width, height);
    this.stripes.clear();
    switch(color_composition) {
      case COLOR_COMPOSITION_DARK: this.stripes.stroke(200); break;
      case COLOR_COMPOSITION_LIGHT: this.stripes.stroke(127); break;
      default:
        console.log(
          '[CapturePainter, draw] unhandled color_composition value: ' +
            color_composition
        );
    }
    temp_stroke_weight = Math.floor(my_garden.stroke_weight); // floor to be sure
    if(temp_stroke_weight < 2) temp_stroke_weight = 2;
    this.stripes.strokeWeight(temp_stroke_weight);
    for(var i = 0; i < this.stripes.height; i += temp_stroke_weight)
    this.stripes.line(
      0, i * temp_stroke_weight, this.stripes.width, i * temp_stroke_weight
    );
    this.stripes.noStroke(); // also overkill, I think
  }
  this.result.copy(
    this.stripes,
    0, 0, this.stripes.width, this.stripes.height,
    0, 0, this.result.width, this.result.height
  );
  temp_offset_x = (_scaled_w - width) * 0.5;
  temp_offset_y = (_scaled_h - height) * 0.5;
  temp_w = width; temp_h = height;
  temp_offset_x *= (_image.width / _scaled_w);
  temp_offset_y *= (_image.height / _scaled_h);
  temp_w *= (_image.width / _scaled_w);
  temp_h *= (_image.height / _scaled_h);
  this.result.blend(
    _image,
    Math.floor(temp_offset_x), Math.floor(temp_offset_y),
    Math.floor(temp_w), Math.floor(temp_h),
    0, 0, this.result.width, this.result.height,
    MULTIPLY
  );
  push();
  switch(color_composition) {
    case COLOR_COMPOSITION_DARK:
      blendMode(ADD);
      //image(this.result, -0.5 * (_w - width), -0.5 * (_h - height), _w, _h);
    break;
    case COLOR_COMPOSITION_LIGHT:
      //this.result.filter(OPAQUE);
      blendMode(DIFFERENCE);
      //image(this.result, -0.5 * (_w - width), -0.5 * (_h - height), _w, _h);
    break;
    default:
      console.log(
        '[CapturePainter, draw] unhandled color_composition value: ' +
          color_composition
      );
  }
  image(this.result, 0, 0);
  pop();
}
								

									garden.js
									/*
  PSEUDO-CLASS Garden

  The main class, managing what is happening in the garden.
*/

function Garden() {
  this.LANG_EN    = 0;
  this.LANG_PL    = 1;
  this.LANG_UR    = 2;
  this.LANG_SRB   = 3;
  this.LANG_RO    = 4;
  this.LANG_GR    = 5;
  this.lang       = this.LANG_EN;
  this.animations = new Animations();
  /*
    You can name the flowers and butterflies for what you want (eg in your
    language and appearing where you live).
  */
  this.names_of_flowers_gr = [
    'Ακρόπο\nλης',
    'Παιωνία',
    'Θυμάρι',
    'Κρόκος',
    'Μυριό\nnφυλλο',
    'Δίκταμο',
    'Ρόζα',
    'Φλαμο\nυριά',
    'Μαργα\nρίτα',
    'Νάρκι\nnσσος',
    'Υάκινθος'
  ];
  this.names_of_butterflies_gr = [
    ['Χελμός', 'Μπλε'],
    ['Ταΰγ\nετος', 'Μπλε'],
    ['Ανατο\nλικό', 'πρασι\nνωπό'],
    ['Πορτο\nκαλί', 'χτέν\nισμα'],
    ['πλοί\nαρχος', 'μολό\nχας'],
    ['φασκό\nμηλο', 'καπετ\nάνιο'],
    ['μικρός', 'χαλκός'],
    ['Χελμός', 'Μπλε'], // x2 - ugly ...
    ['Ταΰγ\nετος', 'Μπλε'],
    ['Ανατο\nλικό', 'πρασι\nνωπό'],
    ['Πορτο\nκαλί', 'χτέν\nισμα'],
    ['πλοί\nαρχος', 'μολό\nχας'],
    ['φασκό\nμηλο', 'καπετ\nάνιο'],
    ['μικρός', 'χαλκός']
  ];
  this.names_of_flowers_ro = [
    'Slăbă\nnogul',
    'Năpraznic',
    'Sună\ntoare',
    'Sânzi\nene',
    'Coada\nȘoricelului',
    'Talpa\nGâștei',
    'Menta',
    'Lupoaie',
    'Izma',
    'Poja\nrnita',
    'Cânepa\nCodrului'
  ];
  this.names_of_butterflies_ro = [
    ['Coada', 'rândunicii'],
    ['Arginie\nmare', 'de camp'],
    ['Ochi\nde paun', 'de zi'],
    ['Fluturele', 'Apollo\nnegru'],
    ['Fluturele', 'cu\nirizații'],
    ['Fluturele', 'punctat'],
    ['Apatura', 'Iris'],
    ['Fluturii\ncu', 'picioare\nperie'],
    ['Amiral', 'Roșu']
  ];
  this.names_of_flowers_srb = [
    'Роза',
    'Биаłа\nРоза',
    'Братек',
    'Иеллов\nРосе',
    'Божур',
    'Примросе',
    'бела Рада',
    'Маслачак',
    'Кацзен\nиец',
    'Азалеа'
  ];
  this.names_of_butterflies_srb = [
    ['Свалло\nвтаил', 'лептир'],
    ['Аполо', 'лептир'],
    ['Оцт', 'Саилор'],
    ['Русалка', 'Адмирал'],
    ['Русалка', 'Oжало\nшћена'],
    ['Миениак', 'Раинбов'],
    ['Цзер\nвонцзик', 'Дукацик']
  ];
  this.names_of_flowers_pl = [
    'Róża',
    'Róża\nbiała',
    'Bratek',
    'Róża\nżółta',
    'Lewkonja',
    'Piwonja',
    'Pierwio\nsnek\nkwiatek',
    'Stokrotka',
    'Dmucha\nwiec',
    'Kacze\nniec',
    'Azalia',
    'Begonia'
  ];
  this.names_of_butterflies_pl = [
    ['Paź', 'królowej'],
    ['Niepylak', 'Apollo'],
    ['Paź', 'żeglarz'],
    ['Rusałka', 'admirał'],
    ['Rusałka', 'żało\nbnik'],
    ['Mieniak', 'tęczo\nwiec'],
    ['Czerwoń\nczyk', 'dukacik'],
    ['Modra\nszek', 'Arion'],
    ['Przepla\ntka', 'maturna'],
    ['Skalnik', 'Bryzei\nda'],
    ['Listko\nwiec', 'cytry\nnek'],
    ['Przestroj\nnik', 'trawnik']
  ];
  this.names_of_flowers_en = [
    'Rosa',
    'White\nRose',
    'Pansy',
    'Gilly\nFlower',
    'Yellow\nRose',
    'Primrose',
    'Peony',
    'Anemone',
    'Shion',
    'Amaryllis',
    'Aster',
    'Azalea',
    'Begonia'
  ];
  this.names_of_butterflies_en = [
    ['Dingy', 'Skipper'],
    ['Grizzled', 'Skipper'],
    ['Common', 'Brim\nstone'],
    ['Brown', 'Hair\nstreak'],
    ['Brown', 'Argus'],
    ['Small', 'White'],
    ['Purple', 'Hair\nstreak'],
    ['Blue', 'Morpho'],
    ['Leopard', 'Lacewing'],
    ['Peacock', 'Butterfly'],
    ['Painted', 'Lady'],
    ['Monarch', 'Butterfly']
  ];
  this.names_of_flowers_ur = [
    'Троянда',
    'Троянда\nБіла',
    'Братки',
    'Левконя',
    'Троянда\nЖовта',
    'Півонія',
    'Примула',
    'Ромашка',
    'Кульбаба',
    'Чорно\nбривці',
    'Азалия',
    'Бегония'
  ];
  this.names_of_butterflies_ur = [
    ['Метелик', 'Ластівка'],
    ['Сівий', 'Шкипер'],
    ['Сірка', 'Звичайна'],
    ['Кашта\nнове', 'Волосся'],
    ['Кори\nчневий', 'Аргус'],
    ['Блаки\nтний', 'Морфо'],
    ['Леопар\nдовий', 'Шнурок'],
    ['Павич', 'Метелик'],
    ['Метелик', 'Монарх']
  ];
  this.is_growing_flag       = false;
  this.flower_size           =  80;
  this.butterfly_size        =  80;
  this.number_of_flowers     =   7;
  this.number_of_butterflies =   7;
  this.stroke_weight         =   2;
  this.flowers               =  [];
  this.butterflies           =  [];
  this.butterfly_intro_time  = 500;
  this.stroke_r              = 255;
  this.stroke_g              = 255;
  this.stroke_b              = 255;
  this.text_r                = 255;
  this.text_g                = 255;
  this.text_b                = 255;
  this.fill_r                =   0;
  this.fill_g                =   0;
  this.fill_b                =   0;
  this.flowersVerticalBufferPosFactor = 1.5;
  this.butterflyMainVerticaFactor = 0.2;
  this.butterflySinusoidalVerticaFactor = 0.2;
  this.forcedThemeElements={
    flowerStrokeWeight:-1,
    butterflyStrokeWeight:-1,
    flowerTextFont:"",
    butterflyTextFont:"",
    flowerTextSize:-1,
    butterflyTextSize:-1,
  };
  // MIDI, WS, keyboard, etc.
  this.messagesFromExternalInterfaces=[]; // format: just int representing flower index
  this.useNumOfExternalMessagesPerIndex=false;
  this.status={
    flowers:[], //{isGrowing:b, isGrowingChanged:b, isNew:b, norm:f, normY:f}
    butterflies:[], //{isNew:b, normX:f, normY:f}
    collisions:[], //{flowerIndex:i, butterflyIndex:i, normX:f, normY:f}
    globalGrowing:false
  };
}
Garden.prototype.addMessageFromExternalInterface=function(_flowerIndex){
  if(isNaN(_flowerIndex)) return;
  _flowerIndex=Math.floor(_flowerIndex);
  if((_flowerIndex<0)||(_flowerIndex>=this.flowers.length)) return;
  this.messagesFromExternalInterfaces[this.messagesFromExternalInterfaces.length]=_flowerIndex;
}
Garden.prototype.setUseNumOfExternalMessagesPerIndex=function(_b){
  this.useNumOfExternalMessagesPerIndex=(_b>0);
}
Garden.prototype.countAndExtractIndexFromMessagesFromExternalInterfaces=function(_idx){
  var result=0;
  for(var i=this.messagesFromExternalInterfaces.length-1;i>=0;i--){
    if(this.messagesFromExternalInterfaces[i]===_idx){
      result+=1; this.messagesFromExternalInterfaces.splice(i,1);
    }
  }
  return result
}
Garden.prototype.getLangAsString = function() {
  var result='en'; // default (very colonial)
  switch(this.lang) {
    case this.LANG_EN: result='en'; break;
    case this.LANG_PL: result='pl'; break;
    case this.LANG_UR: result='ur'; break;
    case this.LANG_SRB: result='srb'; break;
    case this.LANG_RO: result='ro'; break;
    case this.LANG_GR: result='gr'; break;
    default: console.log('[getLangAsString] unhandled lang = ' + this.lang);
  }
  return result;
}
Garden.prototype.setLang = function(_lang) {
  if(_lang.length < 1) return;
  _lang = _lang.toLowerCase();
  switch(_lang) {
    case 'en':
      if(this.lang != this.LANG_EN) {
        this.lang = this.LANG_EN;
        initNames();
      }
    break;
    case 'pl':
      if(this.lang != this.LANG_PL) {
        this.lang = this.LANG_PL;
        initNames();
      }
    break;
    case 'ur':
      if(this.lang != this.LANG_UR) {
        this.lang = this.LANG_UR;
        initNames();
      }
    break;
    case 'srb':
      if(this.lang != this.LANG_SRB) {
        this.lang = this.LANG_SRB;
        initNames();
      }
    break;
    case 'ro':
      if(this.lang != this.LANG_RO) {
        this.lang = this.LANG_RO;
        initNames();
      }
    break;
    case 'gr':
      if(this.lang != this.LANG_GR) {
        this.lang = this.LANG_GR;
        initNames();
      }
    break;
    default: console.log('[setLang] unhandled _lang = ' + _lang);
  }
}

Garden.prototype.setStrokeColor = function(_r, _g, _b) {
  this.stroke_r = _r;
  this.stroke_g = _g;
  this.stroke_b = _b;
  this.animations.setStrokeColor(_r, _g, _b);
}

Garden.prototype.setTextColor = function(_r, _g, _b) {
  this.text_r = _r;
  this.text_g = _g;
  this.text_b = _b;
}

Garden.prototype.setFillColor = function(_r, _g, _b) {
  this.fill_r = _r;
  this.fill_g = _g;
  this.fill_b = _b;
}

Garden.prototype.isButterflyNameIndexInUse = function(_name_index) {
  for(var i = 0; i < this.butterflies.length; i++)
    if(_name_index === this.butterflies[i].name_index) return true;
  return false;
}

Garden.prototype.isFlowerNameIndexInUse = function(_name_index) {
  for(var i = 0; i < this.flowers.length; i++)
    if(_name_index === this.flowers[i].name_index) return true;
  return false;
}

/*
Garden.prototype.getRandomUniqueButterflyIndex = function() {
  var result = 0;
  switch(this.lang) {
    case this.LANG_EN: result = this.getRandomUniqueButterflyIndex_en(); break;
    case this.LANG_PL: result = this.getRandomUniqueButterflyIndex_pl(); break;
    default: console.log('[getRandomUniqueButterflyIndex] unhandled (or incorrect) this.lang = ' + this.lang);
  }
  return result;
}

Garden.prototype.getRandomUniqueButterflyIndex_en = function() {
  var n = floor(random(this.names_of_butterflies_en.length));
  while(
    this.isButterflyNameIndexInUse(n) &&
    this.names_of_butterflies_en.length >= this.number_of_butterflies
  )
    n = (n + 1) % this.names_of_butterflies_en.length;
  return n;
}
*/

Garden.prototype.getRandomUniqueButterflyIndex = function() {
  var n = 0;
  switch(this.lang) {
    case this.LANG_EN:
      n = floor(random(this.names_of_butterflies_en.length));
      while(
        this.isButterflyNameIndexInUse(n) &&
        this.names_of_butterflies_en.length >= this.number_of_butterflies
      )
        n = (n + 1) % this.names_of_butterflies_en.length;
    break;
    case this.LANG_PL:
      n = floor(random(this.names_of_butterflies_pl.length));
      while(
        this.isButterflyNameIndexInUse(n) &&
        this.names_of_butterflies_pl.length >= this.number_of_butterflies
      )
        n = (n + 1) % this.names_of_butterflies_pl.length;
    break;
    case this.LANG_UR:
      n = floor(random(this.names_of_butterflies_ur.length));
      while(
        this.isButterflyNameIndexInUse(n) &&
        this.names_of_butterflies_ur.length >= this.number_of_butterflies
      )
        n = (n + 1) % this.names_of_butterflies_ur.length;
    break;
    case this.LANG_SRB:
      n = floor(random(this.names_of_butterflies_srb.length));
      while(
        this.isButterflyNameIndexInUse(n) &&
        this.names_of_butterflies_srb.length >= this.number_of_butterflies
      )
        n = (n + 1) % this.names_of_butterflies_srb.length;
    break;
    case this.LANG_RO:
      n = floor(random(this.names_of_butterflies_ro.length));
      while(
        this.isButterflyNameIndexInUse(n) &&
        this.names_of_butterflies_ro.length >= this.number_of_butterflies
      )
        n = (n + 1) % this.names_of_butterflies_ro.length;
    break;
    case this.LANG_GR:
      n = floor(random(this.names_of_butterflies_gr.length));
      while(
        this.isButterflyNameIndexInUse(n) &&
        this.names_of_butterflies_gr.length >= this.number_of_butterflies
      )
        n = (n + 1) % this.names_of_butterflies_gr.length;
    break;
    default: console.log('[getRandomUniqueButterflyIndex] unhandled lang = ' + this.lang);
  }
  return n;
}

Garden.prototype.getRandomUniqueFlowerIndex = function() {
  var n = 0;
  switch(this.lang) {
    case this.LANG_EN:
      n = floor(random(this.names_of_flowers_en.length));
      while(
        this.isFlowerNameIndexInUse(n) &&
        this.names_of_flowers_en.length >= this.number_of_flowers
      )
        n = (n + 1) % this.names_of_flowers_en.length;
    break;
    case this.LANG_PL:
      n = floor(random(this.names_of_flowers_pl.length));
      while(
        this.isFlowerNameIndexInUse(n) &&
        this.names_of_flowers_pl.length >= this.number_of_flowers
      )
        n = (n + 1) % this.names_of_flowers_pl.length;
    break;
    case this.LANG_UR:
      n = floor(random(this.names_of_flowers_ur.length));
      while(
        this.isFlowerNameIndexInUse(n) &&
        this.names_of_flowers_ur.length >= this.number_of_flowers
      )
        n = (n + 1) % this.names_of_flowers_ur.length;
    break;
    case this.LANG_SRB:
      n = floor(random(this.names_of_flowers_srb.length));
      while(
        this.isFlowerNameIndexInUse(n) &&
        this.names_of_flowers_srb.length >= this.number_of_flowers
      )
        n = (n + 1) % this.names_of_flowers_srb.length;
    break;
    case this.LANG_RO:
      n = floor(random(this.names_of_flowers_ro.length));
      while(
        this.isFlowerNameIndexInUse(n) &&
        this.names_of_flowers_ro.length >= this.number_of_flowers
      )
        n = (n + 1) % this.names_of_flowers_ro.length;
    break;
    case this.LANG_GR:
      n = floor(random(this.names_of_flowers_gr.length));
      while(
        this.isFlowerNameIndexInUse(n) &&
        this.names_of_flowers_gr.length >= this.number_of_flowers
      )
        n = (n + 1) % this.names_of_flowers_gr.length;
    break;
    default: console.log('[getRandomUniqueFlowerIndex] unhandled lang = ' + this.lang);
  }
  return n;
}

Garden.prototype.hitTestButterfly = function(_index, _arrayOfTouches) {
  if(_arrayOfTouches === null) return false;
  if(_arrayOfTouches === undefined) return false;
  for(var i = 0; i < _arrayOfTouches.length; i++) {
    if(
      this.butterflies[_index].x                           <=
        _arrayOfTouches[i].x &&
      this.butterflies[_index].y                           <=
        _arrayOfTouches[i].y &&
      this.butterflies[_index].x + this.butterfly_size * 2 >=
        _arrayOfTouches[i].x &&
      this.butterflies[_index].y + this.butterfly_size     >=
        _arrayOfTouches[i].y
    ) return true;
  }
  return false;
}

Garden.prototype.hitTestFlower = function(_index, _arrayOfTouches) {
  if(_arrayOfTouches === null) return false;
  if(_arrayOfTouches === undefined) return false;
  for(var i = 0; i < _arrayOfTouches.length; i++) {
    if(
      this.flowers[_index].x                    <= _arrayOfTouches[i].x &&
      this.flowers[_index].y                    <= _arrayOfTouches[i].y &&
      this.flowers[_index].x + this.flower_size >= _arrayOfTouches[i].x &&
      this.flowers[_index].y + this.flower_size >= _arrayOfTouches[i].y
    ) return true;
  }
  return false;
}

Garden.prototype.hitTestRectAndButterfly = function(
  _x, _y, _w, _h, _butterfly_index
) {
  if(
    millis() - this.butterflies[_butterfly_index].creation_time <=
    this.butterfly_intro_time
  ) return false;
  if(
    _x + _w < this.butterflies[_butterfly_index].x
  ) return false;
  if(
    _y + _h < this.butterflies[_butterfly_index].y
  ) return false;
  if(
    this.butterflies[_butterfly_index].x + this.butterfly_size * 2 <
    _x
  ) return false;
  if(
    this.butterflies[_butterfly_index].y + this.butterfly_size <
    _y
  ) return false;
  return true;
}

Garden.prototype.hitTestFlowerAndButterfly = function(
  _flower_index, _butterfly_index
) {
  if(
    this.flowers[_flower_index].x + this.flower_size <
    this.butterflies[_butterfly_index].x
  ) return false;
  if(
    this.flowers[_flower_index].y + this.flower_size <
    this.butterflies[_butterfly_index].y
  ) return false;
  if(
    this.butterflies[_butterfly_index].x + this.butterfly_size * 2 <
    this.flowers[_flower_index].x
  ) return false;
  if(
    this.butterflies[_butterfly_index].y + this.butterfly_size <
    this.flowers[_flower_index].y
  ) return false;
  return true;
}

Garden.prototype.splitAnimatedSegment = function(
  _x1, _y1, _x2, _y2, _center_x, center_y, _split
) {
  var temp_dx = _x2 - _x1; var temp_dy = _y2 - _y1;
  var temp_f1, temp_f2;
  for(var i = 0; i < _split; i++) {
    temp_f1 = i / _split; temp_f2 = (i + 1.0) / _split;
    this.animations.addAnimation(new AnimRotatingSegment(
      _x1 + temp_dx * temp_f1, _y1 + temp_dy * temp_f1,
      _x1 + temp_dx * temp_f2, _y1 + temp_dy * temp_f2,
      _center_x * random(0.5, 1.5), center_y * random(0.5, 1.5),
      this.stroke_weight,
      (
        (pow(1.0 - _y1 / height, 4) + 0.16) *
          ((this.animations.animations.length % 2) * 2 - 1) *
          random(0.5, 1.5)
      ) * 0.01,
      this.stroke_r, this.stroke_g, this.stroke_b
    ));
  }
}

Garden.prototype.convertRectToAnimatedSegments = function(_x, _y, _w, _h) {
  var temp_center_x = _x + _w * 0.5; var temp_center_y = _y + _h * 0.5;
  var temp_split = floor((1.0 - temp_center_y / height) * 4.0) + 1
  this.splitAnimatedSegment(
    _x, _y, _x + _w, _y, temp_center_x, temp_center_y, temp_split
  );
  this.splitAnimatedSegment(
    _x + _w, _y, _x + _w, _y + _h, temp_center_x, temp_center_y, temp_split
  );
  this.splitAnimatedSegment(
    _x + _w, _y + _h, _x, _y + _h, temp_center_x, temp_center_y, temp_split
  );
  this.splitAnimatedSegment(
    _x, _y, _x, _y + _h, temp_center_x, temp_center_y, temp_split
  );
}

Garden.prototype.detectFirstCollision = function() {
  var temp_w = this.butterfly_size * 2; var temp_h = this.butterfly_size;
  var temp_phase, temp_coords, temp_x, temp_y, temp_b, temp_n;
  for(var i = 0; i < this.flowers.length; i++) {
    for(var j = 0; j < this.butterflies.length; j++) {
      if(this.hitTestFlowerAndButterfly(i, j)) {
        // update status
        this.addCollisionToStatusData(
          i, this.calcFlowerNormLocalX(i), this.calcFlowerNormLocalY(i),
          j, this.calcButterflyNormLocalX(j), this.calcButterflyNormLocalY(j)
        );
        // play some sound on collision
        my_soundtrack.triggerCollision(
          (
            this.butterflies[j].x + this.butterfly_size + this.flowers[i].x +
              this.flower_size * 0.5
          ) / (width * 2.0),
          (
            this.butterflies[j].y + this.butterfly_size * 0.5 +
              this.flowers[i].y + this.flower_size * 0.5
          ) / (height * 2.0)
        );
        /*
          If we detect collision between the flower and the butterfly, we
          have to add "on-crash" animations to this.animations object and
          to reset colliding flower and butterfly.
        */
        this.animations.addAnimation(new AnimRotatingRect(
          this.butterflies[j].x + this.butterfly_size,
          this.butterflies[j].y + this.butterfly_size * 0.5,
          this.butterfly_size * 2,
          this.butterfly_size,
          this.stroke_weight,
          (pow(1.0 - this.butterflies[j].y / height, 4) + 0.16) *
            (((i + j) % 2) * 2 - 1) * 0.01,
          this.stroke_r, this.stroke_g, this.stroke_b
        ));
        this.convertRectToAnimatedSegments(
          this.flowers[i].x, this.flowers[i].y,
          this.flower_size, this.flower_size
        );
        temp_n = 0;
        while(temp_n < 100) { // safety first
          temp_phase = random(TWO_PI); temp_n += 1;
          temp_coords = this.calcButterflyCoords(j, temp_phase);
          temp_x = temp_coords.x; temp_y = temp_coords.y;
          temp_b = false;
          for(var k = 0; k < this.butterflies.length; k++) {
            if(j === k) continue; // the same butterfly
            if(
              this.hitTestRectAndButterfly(temp_x, temp_y, temp_w, temp_h, k)
            ) {
              temp_b = true; break;
            }
          }
          if(!temp_b) break;
        }
        this.butterflies[j].animation_phase_shift = temp_phase;
        this.butterflies[j].x = temp_x;
        this.butterflies[j].y = temp_y;
        this.butterflies[j].name_index = this.getRandomUniqueButterflyIndex();
        this.butterflies[j].creation_time = millis();
        this.flowers[i].y = height;
        this.flowers[i].name_index = this.getRandomUniqueFlowerIndex();
        return true;
      }
    }
  }
  return false;
}

// old version
/*
Garden.prototype.calcButterflyCoords = function(
  _index, _animation_phase_shift
) {
  return {
    x:
      (
        width * 0.5 - this.butterfly_size +
        sin(millis() * 0.0003 - _animation_phase_shift) *
        (width * 0.5 + 2.0 * this.butterfly_size)
      ) * ((_index % 2) * 2 - 1),
    y:
      height * this.butterflyMainVerticaFactor +
      sin(millis() * 0.001 - _animation_phase_shift) *
      height * this.butterflySinusoidalVerticaFactor
  }
}
*/
Garden.prototype.calcButterflyCoords = function(
  _index, _animation_phase_shift
) {
  return {
    x: (
      Math.sin(millis()*0.0003-_animation_phase_shift)*
      Math.sin(_index*11.0+millis()*0.00037-_animation_phase_shift)*
      ((_index%2)*2-1)*0.5*(width+6*this.butterfly_size)+
      0.5*width
    ),
    y: (
      Math.sin(millis()*0.001-_animation_phase_shift) *
      height * this.butterflySinusoidalVerticaFactor +
      height * this.butterflyMainVerticaFactor
    )
  }
}

Garden.prototype.calcFlowerNormLocalX = function(_flowerIndex) {
  if(this.flowers.length<2) return 0.0; // prevend div by 0
  var xa=this.flowers[0].x; var xb=this.flowers[this.flowers.length-1].x;
  return ((this.flowers[_flowerIndex].x-xa)/(xb-xa));
}
Garden.prototype.calcFlowerNormLocalY = function(_flowerIndex) {
  var maxY = height;// - this.flowersVerticalBufferPosFactor * this.flower_size;
  var minY = flower_growing_speed;
  var result = (this.flowers[_flowerIndex].y-minY)/(maxY-minY);
  return (1.0-result);
}
Garden.prototype.calcButterflyNormLocalX = function(_butterflyIndex) {
  // everything out of screen will be < 0.1 or > 0.9
  var range = width+6*this.butterfly_size;
  var centerX = this.butterflies[_butterflyIndex].x+this.butterfly_size;
  var norm = (3*this.butterfly_size+centerX)/range;
  var lthresh = this.butterfly_size*2/range; var hthresh = 1.0-lthresh;
  if(norm<lthresh){ // left to the screen
    norm = map(norm,0.0,lthresh,0.0,0.25);
  }else{
    if(norm>hthresh){ // right to the screen
      norm = map(norm,hthresh,1.0,0.75,1.0);
    }else{ // on the screen
      norm = map(norm,lthresh,hthresh,0.25,0.75);
    }
  }
  return norm;
}
Garden.prototype.calcButterflyNormLocalY = function(_butterflyIndex) {
  var minY = -height*this.butterflySinusoidalVerticaFactor+height*this.butterflyMainVerticaFactor;
  var maxY = height*this.butterflySinusoidalVerticaFactor+height*this.butterflyMainVerticaFactor;
  var centerY = this.butterflies[_butterflyIndex].y;//+this.butterfly_size*0.5;
  var norm=(centerY-minY)/(maxY-minY);
  return (1.0-norm);
}
Garden.prototype.addCollisionToStatusData = function(_flowerIndex,_flowerLocalNormX,_flowerLocalNormY,_butterflyIndex,_butterflyLocalNormX,_butterflyLocalNormY){
  this.status.flowers[_flowerIndex].collision=true;
  this.status.butterflies[_butterflyIndex].collision=true;
  this.status.collisions[this.status.collisions.length]={
    flowerIndex:_flowerIndex,
    flowerLocalNormX:_flowerLocalNormX,
    flowerLocalNormY:_flowerLocalNormY,
    butterflyIndex:_butterflyIndex,
    butterflyLocalNormX:_butterflyLocalNormX,
    butterflyLocalNormY:_butterflyLocalNormY
  };
}
Garden.prototype.isFlowerYoungAndSmall = function(_flowerIndex){
  /*
    Flowers are growing when they are very small... and if mouse cursor is
    over or when intersects with detected motion, or if external messages
    are corresponding with the flower index... Otherwise they decrease.
  */
  if(this.flowers[_flowerIndex].y>height-this.flowersVerticalBufferPosFactor*this.flower_size)
    return true;
  return false;
}
Garden.prototype.detectAndHandleGuiRelatedFlower=function(_flowerIndex){
  var result=false;
  if(touchScreenDeviceFlag){
    if(mouseIsPressed){
      if(this.hitTestFlower(_flowerIndex, touches) && is_playing_flag && (guiContainer.isActive||guiContainer.isPointerVisibleAndInteractive)) {
        result = true;
        if(this.flowers[_flowerIndex].y > flower_growing_speed) this.flowers[_flowerIndex].y -= flower_growing_speed;
        if(this.flowers[_flowerIndex].y <= flower_growing_speed) this.flowers[_flowerIndex].y = 0;
        this.flowers[_flowerIndex].growing=true;
      }else{
        if(
          (this.flowers[_flowerIndex].y + this.flower_size + this.stroke_weight) <
          (height - this.flower_size * 0.5 - flower_growing_speed)
        ){
          if(
            this.hitTestFlower(
              _flowerIndex, offsetTouches(touches, 0, -flower_growing_speed)
            ) && is_playing_flag && (guiContainer.isActive||guiContainer.isPointerVisibleAndInteractive)
          ){
            // stay in place
          }else{
            this.flowers[_flowerIndex].y += flower_growing_speed;
          }
        }else{
          this.flowers[_flowerIndex].y = height - this.flower_size * 0.5 - flower_growing_speed - this.flower_size - this.stroke_weight
        }
      }
    }else{
      if(
        (this.flowers[_flowerIndex].y + this.flower_size + this.stroke_weight) <
        (height - this.flower_size * 0.5 - flower_growing_speed)
      ){
        this.flowers[_flowerIndex].y += flower_growing_speed;
      }else{
        this.flowers[_flowerIndex].y = height - this.flower_size * 0.5 - flower_growing_speed - this.flower_size - this.stroke_weight
      }
    }
  }else{
    if(
      this.hitTestFlower(_flowerIndex, [{x: mouseX, y: mouseY}]) && is_playing_flag && (guiContainer.isActive||guiContainer.isPointerVisibleAndInteractive)
    ){
      result = true;
      if(this.flowers[_flowerIndex].y > flower_growing_speed){
        this.flowers[_flowerIndex].y -= flower_growing_speed;
      }
      if(this.flowers[_flowerIndex].y <= flower_growing_speed) this.flowers[_flowerIndex].y = 0;
      this.flowers[_flowerIndex].growing=true;
    }else{
      if(
        (this.flowers[_flowerIndex].y + this.flower_size + this.stroke_weight) <
        (height - this.flower_size * 0.5 - flower_growing_speed)
      ){
        if(
          this.hitTestFlower(
            _flowerIndex, [{x: mouseX, y: (mouseY - flower_growing_speed)}]
          ) && is_playing_flag && (guiContainer.isActive||guiContainer.isPointerVisibleAndInteractive)
        ){
          // stay in place
        }else{
          this.flowers[_flowerIndex].y += flower_growing_speed;
        }
      }else{
        this.flowers[_flowerIndex].y = height - this.flower_size * 0.5 - flower_growing_speed - this.flower_size - this.stroke_weight
      }
    }
  }
  return result;
}
Garden.prototype.detectAndHandleVidaRelatedFlower=function(_flowerIndex){
  if(is_capture_available_flag){
    if(my_vida.activeZones[_flowerIndex].isMovementDetectedFlag){
      if(this.flowers[_flowerIndex].y>flower_growing_speed) this.flowers[_flowerIndex].y-=flower_growing_speed;
      if(this.flowers[_flowerIndex].y<=flower_growing_speed) this.flowers[_flowerIndex].y = 0;
      this.flowers[_flowerIndex].growing=true;
      return true;
    }
  }
  return false;
}
Garden.prototype.detectAndHandleFlowerRelatedMessagesFromExternalInterfaces=function(_flowerIndex){
  var v=this.countAndExtractIndexFromMessagesFromExternalInterfaces(_flowerIndex);
  if(v>0){
    if(this.flowers[_flowerIndex].y>flower_growing_speed){
      if(this.useNumOfExternalMessagesPerIndex){
        this.flowers[_flowerIndex].y-=(flower_growing_speed*v);
      }else{
        this.flowers[_flowerIndex].y-=flower_growing_speed;
      }
    }
    if(this.flowers[_flowerIndex].y<=flower_growing_speed) this.flowers[_flowerIndex].y = 0;
    this.flowers[_flowerIndex].growing=true;
    return true;
  }
  return false;
}
Garden.prototype.detectAndHandleSmallFlower=function(_flowerIndex){
  if(this.isFlowerYoungAndSmall(_flowerIndex)){
    this.flowers[_flowerIndex].y -= flower_growing_speed;
    this.status.flowers[_flowerIndex].young=true;
    this.flowers[_flowerIndex].growing=true;
    return true;
  }
  this.status.flowers[_flowerIndex].young=false;
  return false;
}
Garden.prototype.update = function(){this.updatea();this.updateb();this.updatec();}
Garden.prototype.updatea = function(){
  this.is_growing_flag = false; this.animations.update();
  for(var i=0;i<this.flowers.length;i++){this.flowers[i].growing=false;this.flowers[i].young=true;}
  // reset status data
  this.status.collisions.splice(0,this.status.collisions.length);
  if(this.status.flowers.length!==this.flowers.length){
    this.status.flowers.splice(0,this.status.flowers.length);
    for(var i=0;i<this.flowers.length;i++){
      this.status.flowers[i]={
        growing:false, growingChanged:false,
        young:true, youngChanged:false,
        collision:false, normLocalX:-1.0, normLocalY:-1.0
      };
    }
  }else{
    for(var i=0;i<this.flowers.length;i++){
      //this.status.flowers[i].growingChanged=false;
      this.status.flowers[i].collision=false;
    }
  }
  if(this.status.butterflies.length!==this.butterflies.length){
    this.status.butterflies.splice(0,this.status.butterflies.length);
    for(var i=0;i<this.butterflies.length;i++){
      this.status.butterflies[i]={collision:false, normLocalX:-1.0, normLocalY:-1.0};
    }
  }else{
    for(var i=0;i<this.butterflies.length;i++) this.status.butterflies[i].collision=false;
  }
}
Garden.prototype.updateb = function() {
  // animate flowers
  for(var i = 0; i < this.flowers.length; i++) {
    // small flowers, growing without any help!
    if(this.detectAndHandleSmallFlower(i)){this.is_growing_flag = true; continue;}
    // external interface
    if(this.detectAndHandleFlowerRelatedMessagesFromExternalInterfaces(i)){this.is_growing_flag = true; continue;}
    // vida
    if(this.detectAndHandleVidaRelatedFlower(i)){this.is_growing_flag = true; continue;}
    // mouse, touchpad, touchscreen
    if(this.detectAndHandleGuiRelatedFlower(i)){this.is_growing_flag = true; /*continue;*/}
  }
  // animate butterflies
  var temp_coords;
  for(var i = 0; i < this.butterflies.length; i++) {
    temp_coords = this.calcButterflyCoords(i, this.butterflies[i].animation_phase_shift);
    this.butterflies[i].x = temp_coords.x; this.butterflies[i].y = temp_coords.y;
  }
  // detect all collisions between butterflies and flowers
  var temp_b = true; var temp_n = 0;
  while(temp_b && temp_n < 100) { // safety first
    temp_b = this.detectFirstCollision();
    if(temp_b) last_collision = millis();
    temp_n +=1;
  }
}
Garden.prototype.updatec = function(){
  this.globalGrowing=this.is_growing_flag;
  for(var i=0;i<this.flowers.length;i++){
    this.status.flowers[i].normLocalX=this.calcFlowerNormLocalX(i);
    this.status.flowers[i].normLocalY=this.calcFlowerNormLocalY(i);
    if(this.status.flowers[i].growing){
      if(this.flowers[i].growing){
        this.status.flowers[i].growingChanged=false;
      }else{
        this.status.flowers[i].growingChanged=true;
        this.status.flowers[i].growing=false;
      }
    }else{
      if(this.flowers[i].growing){
        this.status.flowers[i].growingChanged=true;
        this.status.flowers[i].growing=true;
      }else{
        this.status.flowers[i].growingChanged=false;
      }
    }
    if(this.status.flowers[i].young){
      if(this.flowers[i].young){
        this.status.flowers[i].youngChanged=false;
      }else{
        this.status.flowers[i].youngChanged=true;
        this.status.flowers[i].young=false;
      }
    }else{
      if(this.flowers[i].young){
        this.status.flowers[i].youngChanged=true;
        this.status.flowers[i].young=true;
      }else{
        this.status.flowers[i].youngChanged=false;
      }
    }
  }
  for(var i=0;i<this.butterflies.length;i++){
    this.status.butterflies[i].normLocalX=this.calcButterflyNormLocalX(i);
    this.status.butterflies[i].normLocalY=this.calcButterflyNormLocalY(i);
  }
  this.messagesFromExternalInterfaces.splice(0,this.messagesFromExternalInterfaces.length); // clear array with external messages before next iteration
}

// some ugly testing the same conditions two times here, but ok for now
Garden.prototype.draw = function() {
  var temp_is_butterfly_touched;
  var temp_is_butterfly_active_flag;
  this.animations.draw(); // draw animations (remains after collisions)
  // draw butterflies
  var temp_butterfly_x, temp_butterfly_y, temp_butterfly_size,
      temp_butterfly_center_x, temp_butterfly_center_y,
      temp_butterfly_scale,
      temp_butterfly_x1, temp_butterfly_y1,
      temp_butterfly_x2, temp_butterfly_y2,
      temp_butterfly_x3, temp_butterfly_y3,
      temp_butterfly_x4, temp_butterfly_y4,
      temp_butterfly_x5, temp_butterfly_y5,
      temp_butterfly_x6, temp_butterfly_y6,
      temp_butterfly_warp_factor;
  if(this.forcedThemeElements.butterflyTextFont.length>0) textFont(this.forcedThemeElements.butterflyTextFont); else textFont('Georgia');
  if(this.forcedThemeElements.butterflyTextSize>0) textSize(this.forcedThemeElements.butterflyTextSize); else textSize(txtSize);
  textAlign(CENTER, CENTER); textStyle(NORMAL);
  for(var i = 0; i < this.butterflies.length; i++) {
    if(
      millis() - this.butterflies[i].creation_time > this.butterfly_intro_time
    ) {
      temp_butterfly_x = this.butterflies[i].x; temp_butterfly_y = this.butterflies[i].y;
      temp_butterfly_size = this.butterfly_size; temp_is_butterfly_active_flag = true;
    }
    else {
      temp_butterfly_center_x = this.butterflies[i].x + this.butterfly_size;
      temp_butterfly_center_y = this.butterflies[i].y + this.butterfly_size * 0.5;
      temp_butterfly_scale = (millis() - this.butterflies[i].creation_time) / this.butterfly_intro_time;
      temp_butterfly_size = this.butterfly_size * temp_butterfly_scale;
      temp_butterfly_x = temp_butterfly_center_x - temp_butterfly_size;
      temp_butterfly_y = this.butterflies[i].y;
      temp_is_butterfly_active_flag = false;
    }
    temp_butterfly_x1 = temp_butterfly_x;
    temp_butterfly_y1 = temp_butterfly_y;
    temp_butterfly_x2 = temp_butterfly_x + temp_butterfly_size;
    temp_butterfly_y2 = temp_butterfly_y;
    temp_butterfly_x3 = temp_butterfly_x + temp_butterfly_size * 2;
    temp_butterfly_y3 = temp_butterfly_y;
    temp_butterfly_x4 = temp_butterfly_x + temp_butterfly_size * 2;
    temp_butterfly_y4 = temp_butterfly_y + temp_butterfly_size;
    temp_butterfly_x5 = temp_butterfly_x + temp_butterfly_size;
    temp_butterfly_y5 = temp_butterfly_y + temp_butterfly_size;
    temp_butterfly_x6 = temp_butterfly_x;
    temp_butterfly_y6 = temp_butterfly_y + temp_butterfly_size;
    temp_is_butterfly_touched = false;
    if(is_playing_flag) {
      if(temp_is_butterfly_active_flag) {
        if(touchScreenDeviceFlag) {
          if(mouseIsPressed)
            temp_is_butterfly_touched = this.hitTestButterfly(i, touches);
        }
        else {
          temp_is_butterfly_touched =
            this.hitTestButterfly(i, [{x: mouseX, y: mouseY}]);
        }
        if(!temp_is_butterfly_touched) {
          temp_is_butterfly_touched = false;
          if(is_capture_available_flag) temp_is_butterfly_touched = my_vida.activeZones[this.number_of_flowers + i].isMovementDetectedFlag;
        }
      }
    }
    if(temp_is_butterfly_touched) {
      temp_butterfly_warp_factor = 1.0 + temp_butterfly_size * 0.02;
      temp_butterfly_x1 +=
        (Math.sin(millis() * 0.01 + i + TWO_PI * (0.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_y1 +=
        (Math.cos(millis() * 0.01 + i + TWO_PI * (0.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_x2 +=
        (Math.sin(millis() * 0.01 + i + TWO_PI * (1.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_y2 +=
        (Math.cos(millis() * 0.01 + i + TWO_PI * (1.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_x3 +=
        (Math.sin(millis() * 0.01 + i + TWO_PI * (2.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_y3 +=
        (Math.cos(millis() * 0.01 + i + TWO_PI * (2.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_x4 +=
        (Math.sin(millis() * 0.01 + i + TWO_PI * (3.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_y4 +=
        (Math.cos(millis() * 0.01 + i + TWO_PI * (3.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_x5 +=
        (Math.sin(millis() * 0.01 + i + TWO_PI * (4.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_y5 +=
        (Math.cos(millis() * 0.01 + i + TWO_PI * (4.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_x6 +=
        (Math.sin(millis() * 0.01 + i + TWO_PI * (5.0 / 6.0)) *
          temp_butterfly_warp_factor);
      temp_butterfly_y6 +=
        (Math.cos(millis() * 0.01 + i + TWO_PI * (5.0 / 6.0)) *
          temp_butterfly_warp_factor);
    }
    fill(this.fill_r, this.fill_g, this.fill_b, 127);
    stroke(this.stroke_r, this.stroke_g, this.stroke_b);
    if(this.forcedThemeElements.butterflyStrokeWeight>0) strokeWeight(this.forcedThemeElements.butterflyStrokeWeight); else strokeWeight(this.stroke_weight);
    beginShape();
      vertex(temp_butterfly_x1, temp_butterfly_y1);
      vertex(temp_butterfly_x2, temp_butterfly_y2);
      vertex(temp_butterfly_x3, temp_butterfly_y3);
      vertex(temp_butterfly_x4, temp_butterfly_y4);
      vertex(temp_butterfly_x5, temp_butterfly_y5);
      vertex(temp_butterfly_x6, temp_butterfly_y6);
    endShape(CLOSE);
    line(
      temp_butterfly_x2, temp_butterfly_y2,
      temp_butterfly_x5, temp_butterfly_y5
    );
    if(
      millis() - this.butterflies[i].creation_time > this.butterfly_intro_time
    ) {
      fill(this.text_r, this.text_g, this.text_b); noStroke();
      for(
        var j = 0;
        j < 2; // this.names_of_butterflies_en[this.butterflies[i].name_index].length;
        j++
      )
        text(
          this.extractButterflyNameByLangIndexAndSegment(this.lang, this.butterflies[i].name_index, j), // this.names_of_butterflies_en[this.butterflies[i].name_index][j],
          temp_butterfly_x + temp_butterfly_size * 0.5 + temp_butterfly_size *
            j,
          temp_butterfly_y + temp_butterfly_size * 0.5
        );
    }
  }
  // draw flowers
  if(this.forcedThemeElements.flowerTextFont.length>0) textFont(this.forcedThemeElements.flowerTextFont); else textFont('Georgia');
  if(this.forcedThemeElements.flowerTextSize>0) textSize(this.forcedThemeElements.flowerTextSize); else textSize(txtSize);
  textAlign(CENTER, CENTER); textStyle(NORMAL);
  for(var i = 0; i < this.flowers.length; i++) {
    noFill();
    stroke(this.stroke_r, this.stroke_g, this.stroke_b);
    if(this.forcedThemeElements.flowerStrokeWeight>0) strokeWeight(this.forcedThemeElements.flowerStrokeWeight); else strokeWeight(this.stroke_weight);
    rect(
      this.flowers[i].x, this.flowers[i].y,
      this.flower_size, this.flower_size
    );
    line(
      this.flowers[i].x + this.flower_size * 0.5,
      this.flowers[i].y + this.flower_size,
      this.flowers[i].x + this.flower_size * 0.5,
      height
    );
    fill(this.text_r, this.text_g, this.text_b); noStroke();
    text(
      this.extractFlowerNameByLangAndIndex(this.lang, this.flowers[i].name_index), //this.names_of_flowers_en[this.flowers[i].name_index],
      this.flowers[i].x + this.flower_size * 0.5,
      this.flowers[i].y + this.flower_size * 0.5
    );
  }
}

Garden.prototype.extractButterflyNameByLangIndexAndSegment = function(_lang, _index, _segment) {
  var result = '[extractButterflyNameByLangIndexAndSegment] error?';
  switch(_lang) {
    case this.LANG_EN: result = this.names_of_butterflies_en[_index][_segment]; break;
    case this.LANG_PL: result = this.names_of_butterflies_pl[_index][_segment]; break;
    case this.LANG_UR: result = this.names_of_butterflies_ur[_index][_segment]; break;
    case this.LANG_SRB: result = this.names_of_butterflies_srb[_index][_segment]; break;
    case this.LANG_RO: result = this.names_of_butterflies_ro[_index][_segment]; break;
    case this.LANG_GR: result = this.names_of_butterflies_gr[_index][_segment]; break;
    default: console.log('[extractButterflyNameByLangIndexAndSegment] unhandled _lang = ' + _lang);
  }
  return result;
}

Garden.prototype.extractFlowerNameByLangAndIndex = function(_lang, _index) {
  var result = '[extractFlowerNameByLangAndIndex] error?';
  switch(_lang) {
    case this.LANG_EN: result = this.names_of_flowers_en[_index]; break;
    case this.LANG_PL: result = this.names_of_flowers_pl[_index]; break;
    case this.LANG_UR: result = this.names_of_flowers_ur[_index]; break;
    case this.LANG_SRB: result = this.names_of_flowers_srb[_index]; break;
    case this.LANG_RO: result = this.names_of_flowers_ro[_index]; break;
    case this.LANG_GR: result = this.names_of_flowers_gr[_index]; break;
    default: console.log('[extractFlowerNameByLangAndIndex] unhandled _lang = ' + _lang);
  }
  return result;
}

Garden.prototype.drawStatus=function(_x,_y){
  noStroke(); fill(0,255,128); textAlign(LEFT,TOP); textFont("arial",12);
  var s="global growing: "+this.is_growing_flag+" collisions: "+this.status.collisions.length+" flowers: "+this.status.flowers.length+ " butterflies: "+this.status.butterflies.length;
  for(var i=0;i<this.status.flowers.length;i++)
    s=s+"\n[flower] "+i+" growing: "+this.status.flowers[i].growing+" growingChanged: "+this.status.flowers[i].growingChanged+" young: "+this.status.flowers[i].young+" youngChanged: "+this.status.flowers[i].youngChanged+" collision: "+this.status.flowers[i].collision+" normLocalX: "+this.status.flowers[i].normLocalX+" normLocalY: "+this.status.flowers[i].normLocalY;
  for(var i=0;i<this.status.butterflies.length;i++)
    s=s+"\n[butterfly] "+i+" collision: "+this.status.butterflies[i].collision+" normLocalX: "+this.status.butterflies[i].normLocalX+" normLocalY: "+this.status.butterflies[i].normLocalY;
  for(var i=0;i<this.status.collisions.length;i++)
    s=s+"\n[collision] "+i+" flower: "+this.status.collisions[i].flowerIndex+" "+this.status.collisions[i].flowerLocalNormX+" "+this.status.collisions[i].flowerLocalNormY+" butterfly: "+this.status.collisions[i].butterflyIndex+" "+this.status.collisions[i].butterflyLocalNormX+" "+this.status.collisions[i].butterflyLocalNormY;
  text(s,_x,_y);
}

								

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

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

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

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

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

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

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

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

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

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

									p5.vida.min.js
									p5.prototype.VidaBlob=function(t){this.__sketch=t,this.normRectX=0,this.normRectY=0,this.normRectW=0,this.normRectH=0,this.normMassCenterX=0,this.normMassCenterY=0,this.normMass=0,this.approximatedPolygon=[],this.creationTime=this.__sketch.millis(),this.creationFrameCount=this.__sketch.frameCount,this.id=-1,this.__rawId=-1,this.isNewFlag=!0},p5.prototype.VidaActiveZone=function(t,s,e,o,i,r){this.normX=s,this.normY=e,this.normW=o,this.normH=i,this.isEnabledFlag=!0,this.isMovementDetectedFlag=!1,this.isChangedFlag=!1,this.changedTime=0,this.changedFrameCount=0,this.normFillFactor=0,this.normFillThreshold=.02,this.id=t,this.onChange=r},p5.prototype.Vida=function(t){this.__sketch=t,this.MIRROR_NONE=0,this.MIRROR_VERTICAL=1,this.MIRROR_HORIZONTAL=2,this.MIRROR_BOTH=3,this.mirror=this.MIRROR_NONE,this.progressiveBackgroundFlag=!0,this.currentImage=this.__sketch.createGraphics(10,10),this.backgroundImage=this.__sketch.createImage(10,10),this.differenceImage=this.__sketch.createImage(10,10),this.thresholdImage=this.__sketch.createImage(10,10),this.imageFilterFeedback=.92,this.imageFilterThreshold=.4,this.__automaticPixelsDataTransferFlag=!0,this.lastUpdateTime=0,this.lastUpdateFrameCount=0,this.__activeZonesNormFillThreshold=.02,this.handleActiveZonesFlag=!1,this.activeZones=[],this.__currentBlobsLocation=0,this.__previousBlobsLocation=1,this.__blobs=[[],[]],this.handleBlobsFlag=!1,this.REJECT_NONE_BLOBS=0,this.REJECT_INNER_BLOBS=1,this.REJECT_OUTER_BLOBS=2,this.rejectBlobsMethod=this.REJECT_NONE_BLOBS,this.trackBlobsFlag=!1,this.trackBlobsMaxNormDist=.15,this.normMinBlobMass=2e-4,this.normMaxBlobMass=.5,this.normMinBlobArea=2e-4,this.normMaxBlobArea=.5,this.approximateBlobPolygonsFlag=!1,this.pointsPerApproximatedBlobPolygon=6,this.__blobMapArray=[],this.numberOfDetectedBlobs=0,this.resizeBlobMapArray(this.thresholdImage.width,this.thresholdImage.height)},p5.prototype.Vida.prototype.resizeGraphicsWorkaround=function(t,s,e){null==t?(t=this.__sketch.createGraphics(s,e)).pixelDensity(1):(t.width=s,t.height=e,t.elt.width=s,t.elt.height=e,t.elt.style.width=s+"px",t.elt.style.height=e+"px",t.pixelDensity(1),t.loadPixels(),t.elt.setAttribute("style","display: none")),t.updatePixels(),t.background(0),t.loadPixels(),s*e!=t.pixels.length/4&&console.log("[Vida, resizeGraphicsWorkaround] _w * _h !== _g.pixels.length / 4:\n_w = "+s+" _h = "+e+"\n_g.width = "+t.width+" _g.height = "+t.height+"\n_w * _h = "+s*e+"\n_g.pixels.length / 4 = "+t.pixels.length/4)},p5.prototype.Vida.prototype.getBlobs=function(t){return 0===arguments.length?t=this.__currentBlobsLocation:t!==this.__currentBlobsLocation&&t!==this.__previousBlobsLocation&&(console.log("[Vida, getBlobs] Unhandled _location parameter value: "+t+". The _location value will be change to "+this.__currentBlobsLocation+" ("+this.__currentBlobsLocation+")."),t=this.__currentBlobsLocation),this.__blobs[t]},p5.prototype.Vida.prototype.getCurrentBlobsLocation=function(){return this.__currentBlobsLocation},p5.prototype.Vida.prototype.getPreviousBlobsLocation=function(){return this.__previousBlobsLocation},p5.prototype.Vida.prototype.resizeBlobMapArray=function(t,s){this.__blobMapArray.splice(0,this.__blobMapArray.length);for(var e=0;e<t;e++){for(var o=[],i=0;i<s;i++)o[i]=0;this.__blobMapArray[e]=o}},p5.prototype.Vida.prototype.resetBlobMapArray=function(){for(var t=0;t<this.thresholdImage.height;t++)for(var s=0;s<this.thresholdImage.width;s++)this.__blobMapArray[s][t]=0},p5.prototype.Vida.prototype.hitTestThresholdImage=function(t,s){var e=Math.floor(t*this.thresholdImage.width),o=Math.floor(s*this.thresholdImage.height);if(e<0)return!1;if(o<0)return!1;if(e>=this.thresholdImage.width)return!1;if(o>=this.thresholdImage.height)return!1;var i=4*(o*this.thresholdImage.width+e);return this.thresholdImage.pixels[i]>0},p5.prototype.Vida.prototype.setActiveZonesNormFillThreshold=function(t){t<0&&(t=0),t>1&&(t=1),this.__activeZonesNormFillThreshold=t;for(var s=0;s<this.activeZones.length;s++)this.activeZones[s].normFillThreshold=this.__activeZonesNormFillThreshold},p5.prototype.Vida.prototype.getActiveZonesNormFillThreshold=function(){return this.__activeZonesNormFillThreshold},p5.prototype.Vida.prototype.addActiveZone=function(t,s,e,o,i,r){5===arguments.length&&(r=function(t){});for(var h=0;h<this.activeZones.length;h++)t==this.activeZones[h].id&&console.log("[Vida, addActiveZone] There are already active zones with the same id: "+t);null==r&&(r=function(t){}),this.activeZones[this.activeZones.length]=new this.__sketch.VidaActiveZone(t,s,e,o,i,r)},p5.prototype.Vida.prototype.drawBlobs=function(t,s,e,o){var i,r,h,a,n,_;2===arguments.length&&(e=this.thresholdImage.width,o=this.thresholdImage.height),this.__sketch.push(),this.__sketch.translate(t,s),this.__sketch.textFont("Helvetica",10),this.__sketch.textAlign(this.__sketch.LEFT,this.__sketch.BOTTOM),this.__sketch.textStyle(this.__sketch.NORMAL);for(var l=0;l<this.__blobs[this.__currentBlobsLocation].length;l++){i=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normRectX*e),r=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normRectY*o),h=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normRectW*e),a=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normRectH*o),n=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normMassCenterX*e),_=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normMassCenterY*o),this.__sketch.strokeWeight(1),this.__sketch.stroke(255,255,0),this.__sketch.noFill(),this.__sketch.rect(i,r,h,a),this.__sketch.noStroke(),this.__sketch.fill(255,0,0),this.__sketch.ellipseMode(this.__sketch.CENTER),this.__sketch.ellipse(n,_,3,3),this.__sketch.noStroke(),this.__sketch.fill(255,255,0),this.__sketch.text(this.__blobs[this.__currentBlobsLocation][l].id,i,r-1),this.__sketch.strokeWeight(1),this.__sketch.stroke(255,0,0),this.__sketch.noFill(),this.__sketch.beginShape();for(var c=0;c<this.__blobs[this.__currentBlobsLocation][l].approximatedPolygon.length;c++)this.__sketch.vertex(this.__blobs[this.__currentBlobsLocation][l].approximatedPolygon[c].normX*e,this.__blobs[this.__currentBlobsLocation][l].approximatedPolygon[c].normY*o);this.__sketch.endShape(this.__sketch.CLOSE)}this.__sketch.pop()},p5.prototype.Vida.prototype.drawActiveZones=function(t,s,e,o){var i,r,h,a;2===arguments.length&&(e=this.thresholdImage.width,o=this.thresholdImage.height),this.__sketch.push(),this.__sketch.textFont("Helvetica",10),this.__sketch.textAlign(this.__sketch.LEFT,this.__sketch.BOTTOM),this.__sketch.textStyle(this.__sketch.NORMAL);for(var n=0;n<this.activeZones.length;n++)i=Math.floor(t+this.activeZones[n].normX*e),r=Math.floor(s+this.activeZones[n].normY*o),h=Math.floor(this.activeZones[n].normW*e),a=Math.floor(this.activeZones[n].normH*o),this.__sketch.strokeWeight(1),this.activeZones[n].isEnabledFlag?(this.__sketch.stroke(255,0,0),this.activeZones[n].isMovementDetectedFlag?this.__sketch.fill(255,0,0,128):this.__sketch.noFill()):(this.__sketch.stroke(0,0,255),this.activeZones[n].isMovementDetectedFlag?this.__sketch.fill(0,0,255,128):this.__sketch.noFill()),this.__sketch.rect(i,r,h,a),this.__sketch.noStroke(),this.activeZones[n].isEnabledFlag?this.__sketch.fill(255,0,0):this.__sketch.fill(0,0,255),this.__sketch.text(this.activeZones[n].id,i,r-1);this.__sketch.pop()},p5.prototype.Vida.prototype.removeActiveZone=function(t){for(var s=this.activeZones.length-1;s>=0;s--)t==this.activeZones[s].id&&list.splice(s,1)},p5.prototype.Vida.prototype.getActiveZone=function(t){for(var s=0;s<this.activeZones.length;s++)if(t==this.activeZones[s].id)return this.activeZones[s];return-1},p5.prototype.Vida.prototype.updateActiveZones=function(){for(var t,s,e,o,i,r,h,a,n=0;n<this.activeZones.length;n++)if(this.activeZones[n].isEnabledFlag){t=Math.floor(this.activeZones[n].normX*this.thresholdImage.width),s=Math.floor(this.activeZones[n].normY*this.thresholdImage.height),e=Math.floor((this.activeZones[n].normX+this.activeZones[n].normW)*this.thresholdImage.width),o=Math.floor((this.activeZones[n].normY+this.activeZones[n].normH)*this.thresholdImage.height),h=Math.floor(this.activeZones[n].normW*this.thresholdImage.width)+Math.floor(this.activeZones[n].normH*this.thresholdImage.height),r=0;for(var _=s;_<=o;_++)for(var l=t;l<=e;l++)i=4*(_*this.thresholdImage.width+l),this.thresholdImage.pixels[i]>0&&(r+=1);this.activeZones[n].normFillFactor=r/h,(a=this.activeZones[n].normFillFactor>this.activeZones[n].normFillThreshold)!=this.activeZones[n].isMovementDetectedFlag&&(this.activeZones[n].isChangedFlag=!0,this.activeZones[n].changedTime=this.__sketch.millis(),this.activeZones[n].changedFrameCount=this.__sketch.frameCount,this.activeZones[n].isMovementDetectedFlag=a,this.activeZones[n].onChange(this.activeZones[n]))}else this.activeZones[n].isChangedFlag=!1,this.activeZones[n].isMovementDetectedFlag=!1},p5.prototype.Vida.prototype.update=function(t){this.updateImageProcessor(t)?(this.handleActiveZonesFlag&&this.updateActiveZones(),this.handleBlobsFlag&&this.updateBlobs(),this.lastUpdateTime=this.__sketch.millis(),this.lastUpdateFrameCount=this.__sketch.frameCount):console.log("[Vida, update] something went wrong. Probably the updateImageProcessor function call failed.")},p5.prototype.Vida.prototype.setBackgroundImage=function(t){if(null===t)return console.log("[Vida, setBackgroundImage] error: _image === null"),!1;if(t.width<1||t.height<1)return console.log("[Vida, setBackgroundImage] possible error: resolution of the _image seems to be incorrect: _image.width = "+t.width+" _image.height = "+t.height+"."),!1;switch(t.width==this.backgroundImage.width&&t.height==this.backgroundImage.height||(console.log("[Vida, setBackgroundImage] adjusting images size to: "+t.width+" "+t.height),this.resizeGraphicsWorkaround(this.currentImage,t.width,t.height),this.backgroundImage.resize(t.width,t.height),this.differenceImage.resize(t.width,t.height),this.thresholdImage.resize(t.width,t.height),this.resizeBlobMapArray(t.width,t.height)),this.__automaticPixelsDataTransferFlag&&(t.loadPixels(),this.backgroundImage.loadPixels(),this.differenceImage.loadPixels()),this.mirror){case this.MIRROR_NONE:this.backgroundImage.copy(t,0,0,t.width,t.height,0,0,t.width,t.height);break;case this.MIRROR_HORIZONTAL:this.currentImage.push(),this.currentImage.scale(-1,1),this.currentImage.image(t,-this.currentImage.width,0),this.currentImage.pop(),this.backgroundImage.copy(this.currentImage,0,0,t.width,t.height,0,0,t.width,t.height);break;case this.MIRROR_VERTICAL:this.currentImage.push(),this.currentImage.scale(1,-1),this.currentImage.image(t,0,-this.currentImage.height),this.currentImage.pop(),this.backgroundImage.copy(this.currentImage,0,0,t.width,t.height,0,0,t.width,t.height);break;case this.MIRROR_BOTH:this.currentImage.push(),this.currentImage.scale(-1,-1),this.currentImage.image(t,-this.currentImage.width,-this.currentImage.height),this.currentImage.pop(),this.backgroundImage.copy(this.currentImage,0,0,t.width,t.height,0,0,t.width,t.height);break;default:console.log("[Vida, setBackgroundImage] unhandled mirror value: "+this.mirror)}},p5.prototype.Vida.prototype.updateImageProcessor=function(t){if(null===t)return console.log("[Vida, updateImageProcessor] error: _image === null"),!1;if(t.width<1||t.height<1)return console.log("[Vida, updateImageProcessor] possible error: resolution of the _image seems to be incorrect: _image.width = "+t.width+" _image.height = "+t.height+"."),!1;switch(t.width==this.backgroundImage.width&&t.height==this.backgroundImage.height||(console.log("[Vida, updateImageProcessor] adjusting images size to: "+t.width+" "+t.height),this.resizeGraphicsWorkaround(this.currentImage,t.width,t.height),this.backgroundImage.resize(t.width,t.height),this.differenceImage.resize(t.width,t.height),this.thresholdImage.resize(t.width,t.height),this.resizeBlobMapArray(t.width,t.height)),this.__automaticPixelsDataTransferFlag&&(t.loadPixels(),this.backgroundImage.loadPixels(),this.differenceImage.loadPixels()),this.mirror){case this.MIRROR_NONE:this.currentImage.image(t,0,0);break;case this.MIRROR_HORIZONTAL:this.currentImage.push(),this.currentImage.scale(-1,1),this.currentImage.image(t,-this.currentImage.width,0),this.currentImage.pop();break;case this.MIRROR_VERTICAL:this.currentImage.push(),this.currentImage.scale(1,-1),this.currentImage.image(t,0,-this.currentImage.height),this.currentImage.pop();break;case this.MIRROR_BOTH:this.currentImage.push(),this.currentImage.scale(-1,-1),this.currentImage.image(t,-this.currentImage.width,-this.currentImage.height),this.currentImage.pop();break;default:console.log("[Vida, updateImageProcessor] unhandled mirror value: "+this.mirror)}if(temp_imageFilterFeedback_flipped=1-this.imageFilterFeedback,this.__automaticPixelsDataTransferFlag&&this.currentImage.loadPixels(),this.progressiveBackgroundFlag)for(var s=0;s<this.backgroundImage.pixels.length;s+=4)this.backgroundImage.pixels[s]=this.backgroundImage.pixels[s]*this.imageFilterFeedback+this.currentImage.pixels[s]*temp_imageFilterFeedback_flipped,this.backgroundImage.pixels[s+1]=this.backgroundImage.pixels[s+1]*this.imageFilterFeedback+this.currentImage.pixels[s+1]*temp_imageFilterFeedback_flipped,this.backgroundImage.pixels[s+2]=this.backgroundImage.pixels[s+2]*this.imageFilterFeedback+this.currentImage.pixels[s+2]*temp_imageFilterFeedback_flipped,this.backgroundImage.pixels[s+3]=255,this.differenceImage.pixels[s]=Math.abs(this.backgroundImage.pixels[s]-this.currentImage.pixels[s]),this.differenceImage.pixels[s+1]=Math.abs(this.backgroundImage.pixels[s+1]-this.currentImage.pixels[s+1]),this.differenceImage.pixels[s+2]=Math.abs(this.backgroundImage.pixels[s+2]-this.currentImage.pixels[s+2]),this.differenceImage.pixels[s+3]=255;else for(s=0;s<this.backgroundImage.pixels.length;s+=4)this.differenceImage.pixels[s]=Math.abs(this.backgroundImage.pixels[s]-this.currentImage.pixels[s]),this.differenceImage.pixels[s+1]=Math.abs(this.backgroundImage.pixels[s+1]-this.currentImage.pixels[s+1]),this.differenceImage.pixels[s+2]=Math.abs(this.backgroundImage.pixels[s+2]-this.currentImage.pixels[s+2]),this.differenceImage.pixels[s+3]=255;return this.__automaticPixelsDataTransferFlag&&this.backgroundImage.updatePixels(),this.__automaticPixelsDataTransferFlag&&this.differenceImage.updatePixels(),this.thresholdImage.copy(this.differenceImage,0,0,this.currentImage.width,this.currentImage.height,0,0,this.differenceImage.width,this.differenceImage.height),this.thresholdImage.filter(this.__sketch.THRESHOLD,this.imageFilterThreshold),this.__automaticPixelsDataTransferFlag&&this.thresholdImage.loadPixels(),!0},p5.prototype.Vida.prototype.findBlobIndexById=function(t,s){for(var e=0;e<this.__blobs[t].length;e++)if(this.__blobs[t][e].id===s)return e;return-1},p5.prototype.Vida.prototype.findFirstFreeId=function(t){for(var s=0,e=!0;e;){e=!1;for(var o=0;o<this.__blobs[t].length;o++)if(this.__blobs[t][o].id===s){e=!0,s+=1;break}}return s},p5.prototype.Vida.prototype.trackBlobs=function(){if(this.__blobs[this.__previousBlobsLocation].length<1)for(var t=0;t<this.numberOfDetectedBlobs;t++)this.__blobs[this.__currentBlobsLocation][t].id=t;else for(t=0;t<this.__blobs[this.__previousBlobsLocation].length;t++)this.__blobs[this.__previousBlobsLocation][t].id<0&&(this.__blobs[this.__previousBlobsLocation][t].id=this.findFirstFreeId(this.__previousBlobsLocation));var s,e,o=[];for(t=0;t<this.numberOfDetectedBlobs;t++)this.__blobs[this.__currentBlobsLocation][t].id=-1,o[t]=10;for(t=0;t<this.numberOfDetectedBlobs;t++)for(var i=0;i<this.__blobs[this.__previousBlobsLocation].length;i++)(s=Math.sqrt(Math.pow(this.__blobs[this.__previousBlobsLocation][i].normMassCenterX-this.__blobs[this.__currentBlobsLocation][t].normMassCenterX,2)+Math.pow(this.__blobs[this.__previousBlobsLocation][i].normMassCenterY-this.__blobs[this.__currentBlobsLocation][t].normMassCenterY,2)))<o[t]&&s<this.trackBlobsMaxNormDist&&(o[t]=s,this.__blobs[this.__currentBlobsLocation][t].id=this.__blobs[this.__previousBlobsLocation][i].id);for(t=0;t<this.numberOfDetectedBlobs;t++)for(i=0;i<this.numberOfDetectedBlobs;i++)t!==i&&(this.__blobs[this.__currentBlobsLocation][t].id<0||this.__blobs[this.__currentBlobsLocation][i].id<0||this.__blobs[this.__currentBlobsLocation][t].id===this.__blobs[this.__currentBlobsLocation][i].id&&(o[t]>o[i]?this.__blobs[this.__currentBlobsLocation][t].id=-1:this.__blobs[this.__currentBlobsLocation][i].id=-1));for(t=0;t<this.numberOfDetectedBlobs;t++)if(!(this.__blobs[this.__currentBlobsLocation][t].id>=0)){o[t]=10;for(i=0;i<this.__blobs[this.__previousBlobsLocation].length;i++)this.findBlobIndexById(this.__currentBlobsLocation,this.__blobs[this.__previousBlobsLocation][i].id)>=0||(s=Math.sqrt(Math.pow(this.__blobs[this.__previousBlobsLocation][i].normMassCenterX-this.__blobs[this.__currentBlobsLocation][t].normMassCenterX,2)+Math.pow(this.__blobs[this.__previousBlobsLocation][i].normMassCenterY-this.__blobs[this.__currentBlobsLocation][t].normMassCenterY,2)))<o[t]&&s<this.trackBlobsMaxNormDist&&(o[t]=s,this.__blobs[this.__currentBlobsLocation][t].id=this.__blobs[this.__previousBlobsLocation][i].id)}for(t=0;t<this.numberOfDetectedBlobs;t++)for(i=0;i<this.numberOfDetectedBlobs;i++)t!==i&&(this.__blobs[this.__currentBlobsLocation][t].id<0?this.__blobs[this.__currentBlobsLocation][t].id=this.findFirstFreeId(this.__currentBlobsLocation):this.__blobs[this.__currentBlobsLocation][i].id<0?this.__blobs[this.__currentBlobsLocation][i].id=this.findFirstFreeId(this.__currentBlobsLocation):this.__blobs[this.__currentBlobsLocation][t].id===this.__blobs[this.__currentBlobsLocation][i].id&&(o[t]>o[i]?this.__blobs[this.__currentBlobsLocation][t].id=this.findFirstFreeId(this.__currentBlobsLocation):this.__blobs[this.__currentBlobsLocation][i].id=this.findFirstFreeId(this.__currentBlobsLocation)));for(t=0;t<this.numberOfDetectedBlobs;t++)(e=this.findBlobIndexById(this.__previousBlobsLocation,this.__blobs[this.__currentBlobsLocation][t].id))<0||(this.__blobs[this.__currentBlobsLocation][t].creationTime=this.__blobs[this.__previousBlobsLocation][e].creationTime,this.__blobs[this.__currentBlobsLocation][t].creationFrameCount=this.__blobs[this.__previousBlobsLocation][e].creationFrameCount,this.__blobs[this.__currentBlobsLocation][t].isNewFlag=!1)},p5.prototype.Vida.prototype.approximateBlobPolygons=function(){var t,s,e,o,i,r,h,a,n,_=2*Math.PI;this.pointsPerApproximatedBlobPolygon<3?(console.log("[Vida, approximateBlobPolygons] Minumum valid value of pointsPerApproximatedBlobPolygon is 3 (currently: "+this.pointsPerApproximatedBlobPolygon+"). The value will be set to 3"),this.pointsPerApproximatedBlobPolygon=3):Math.floor(this.pointsPerApproximatedBlobPolygon)!==Math.ceil(this.pointsPerApproximatedBlobPolygon)&&(console.log("[Vida, approximateBlobPolygons] The variable pointsPerApproximatedBlobPolygon should be of the integer type, not a float. Current value "+this.pointsPerApproximatedBlobPolygon+" will be changed to"+Math.floor(this.pointsPerApproximatedBlobPolygon)+"."),this.pointsPerApproximatedBlobPolygon=Math.floor(this.pointsPerApproximatedBlobPolygon));for(var l=0;l<this.numberOfDetectedBlobs;l++){(t=Math.sqrt(Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectX-this.__blobs[this.__currentBlobsLocation][l].normMassCenterX)*this.thresholdImage.width,2)+Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectY-this.__blobs[this.__currentBlobsLocation][l].normMassCenterY)*this.thresholdImage.height,2)))<(s=Math.sqrt(Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectX+this.__blobs[this.__currentBlobsLocation][l].normRectW-this.__blobs[this.__currentBlobsLocation][l].normMassCenterX)*this.thresholdImage.width,2)+Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectY-this.__blobs[this.__currentBlobsLocation][l].normMassCenterY)*this.thresholdImage.height,2)))&&(t=s),t<(s=Math.sqrt(Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectX+this.__blobs[this.__currentBlobsLocation][l].normRectW-this.__blobs[this.__currentBlobsLocation][l].normMassCenterX)*this.thresholdImage.width,2)+Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectY+this.__blobs[this.__currentBlobsLocation][l].normRectH-this.__blobs[this.__currentBlobsLocation][l].normMassCenterY)*this.thresholdImage.height,2)))&&(t=s),t<(s=Math.sqrt(Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectX-this.__blobs[this.__currentBlobsLocation][l].normMassCenterX)*this.thresholdImage.width,2)+Math.pow((this.__blobs[this.__currentBlobsLocation][l].normRectY+this.__blobs[this.__currentBlobsLocation][l].normRectH-this.__blobs[this.__currentBlobsLocation][l].normMassCenterY)*this.thresholdImage.height,2)))&&(t=s),t=Math.floor(t),r=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normMassCenterX*this.thresholdImage.width),h=Math.floor(this.__blobs[this.__currentBlobsLocation][l].normMassCenterY*this.thresholdImage.height);for(var c=0;c<this.pointsPerApproximatedBlobPolygon;c++){e=c/this.pointsPerApproximatedBlobPolygon*_,o=Math.sin(e),i=Math.cos(e);for(var b=t;b>=0&&(a=Math.floor(r+b*i),n=Math.floor(h+b*o),a<0?a=0:a>=this.thresholdImage.width&&(a=this.thresholdImage.width-1),n<0?n=0:n>=this.thresholdImage.height&&(n=this.thresholdImage.height-1),this.__blobMapArray[a][n]!==this.__blobs[this.__currentBlobsLocation][l].__rawId);b--);this.__blobs[this.__currentBlobsLocation][l].approximatedPolygon[c]={normX:a/this.thresholdImage.width,normY:n/this.thresholdImage.height}}}},p5.prototype.Vida.prototype.rejectInnerBlobs=function(){for(var t=this.numberOfDetectedBlobs-1;t>=0;t--)for(var s=this.numberOfDetectedBlobs-1;s>=0;s--)t!=s&&(this.__blobs[this.__currentBlobsLocation][s].normRectX<this.__blobs[this.__currentBlobsLocation][t].normRectX||this.__blobs[this.__currentBlobsLocation][s].normRectY<this.__blobs[this.__currentBlobsLocation][t].normRectY||this.__blobs[this.__currentBlobsLocation][s].normRectX+this.__blobs[this.__currentBlobsLocation][s].normRectW<this.__blobs[this.__currentBlobsLocation][t].normRectX+this.__blobs[this.__currentBlobsLocation][t].normRectW||this.__blobs[this.__currentBlobsLocation][s].normRectY+this.__blobs[this.__currentBlobsLocation][s].normRectH<this.__blobs[this.__currentBlobsLocation][t].normRectY+this.__blobs[this.__currentBlobsLocation][t].normRectH||(this.__blobs[this.__currentBlobsLocation].splice(s,1),this.numberOfDetectedBlobs-=1))},p5.prototype.Vida.prototype.rejectOuterBlobs=function(){for(var t=this.numberOfDetectedBlobs-1;t>=0;t--)for(var s=this.numberOfDetectedBlobs-1;s>=0;s--)t!=s&&(this.__blobs[this.__currentBlobsLocation][s].normRectX>this.__blobs[this.__currentBlobsLocation][t].normRectX||this.__blobs[this.__currentBlobsLocation][s].normRectY>this.__blobs[this.__currentBlobsLocation][t].normRectY||this.__blobs[this.__currentBlobsLocation][s].normRectX+this.__blobs[this.__currentBlobsLocation][s].normRectW>this.__blobs[this.__currentBlobsLocation][t].normRectX+this.__blobs[this.__currentBlobsLocation][t].normRectW||this.__blobs[this.__currentBlobsLocation][s].normRectY+this.__blobs[this.__currentBlobsLocation][s].normRectH>this.__blobs[this.__currentBlobsLocation][t].normRectY+this.__blobs[this.__currentBlobsLocation][t].normRectH||(this.__blobs[this.__currentBlobsLocation].splice(s,1),this.numberOfDetectedBlobs-=1))},p5.prototype.Vida.prototype.processBlobs=function(){for(var t,s=[],e=-1,o=0,i=0;i<this.numberOfDetectedBlobs;i++)s[i]={__rawId:i+1,mass:0,normMass:0,normMassX:0,normMassY:0,normMinX:1e5,normMinY:1e5,normMaxX:-10,normMaxY:-10};for(var r=0;r<this.thresholdImage.height;r++)for(var h=0;h<this.thresholdImage.width;h++)(e=this.__blobMapArray[h][r]-1)<0||(s[e].normMassX+=h,s[e].normMassY+=r,s[e].mass+=1,h<s[e].normMinX?s[e].normMinX=h:h>s[e].normMaxX&&(s[e].normMaxX=h),r<s[e].normMinY?s[e].normMinY=r:r>s[e].normMaxY&&(s[e].normMaxY=r));this.__blobs[this.__currentBlobsLocation].splice(0,this.__blobs[this.__currentBlobsLocation].length);for(i=0;i<this.numberOfDetectedBlobs;i++)s[i].normMass=s[i].mass/(this.thresholdImage.height*this.thresholdImage.width),t=(s[i].normMaxX-s[i].normMinX)*(s[i].normMaxY-s[i].normMinY)/(this.backgroundImage.width*this.backgroundImage.height),s[i].normMass<this.normMinBlobMass||s[i].normMass>this.normMaxBlobMass||t<this.normMinBlobArea||t>this.normMaxBlobArea||(s[i].normMassX/=s[i].mass,s[i].normMassY/=s[i].mass,s[i].normMassX/=this.backgroundImage.width,s[i].normMassY/=this.backgroundImage.height,s[i].normMinX/=this.thresholdImage.width,s[i].normMinY/=this.thresholdImage.height,s[i].normMaxX/=this.thresholdImage.width,s[i].normMaxY/=this.thresholdImage.height,this.__blobs[this.__currentBlobsLocation][o]=new this.__sketch.VidaBlob(this.__sketch),this.__blobs[this.__currentBlobsLocation][o].normMassCenterX=s[i].normMassX,this.__blobs[this.__currentBlobsLocation][o].normMassCenterY=s[i].normMassY,this.__blobs[this.__currentBlobsLocation][o].normRectX=s[i].normMinX,this.__blobs[this.__currentBlobsLocation][o].normRectY=s[i].normMinY,this.__blobs[this.__currentBlobsLocation][o].normRectW=s[i].normMaxX-s[i].normMinX,this.__blobs[this.__currentBlobsLocation][o].normRectH=s[i].normMaxY-s[i].normMinY,this.__blobs[this.__currentBlobsLocation][o].normMass=s[i].normMass,this.__blobs[this.__currentBlobsLocation][o].__rawId=s[i].__rawId,this.__blobs[this.__currentBlobsLocation][o].creationTime=this.__sketch.millis(),this.__blobs[this.__currentBlobsLocation][o].creationFrameCount=this.__sketch.frameCount,o+=1);this.numberOfDetectedBlobs=o},p5.prototype.Vida.prototype.updateBlobs=function(){switch(this.__currentBlobsLocation=(this.__currentBlobsLocation+1)%2,this.__previousBlobsLocation=(this.__currentBlobsLocation+1)%2,this.numberOfDetectedBlobs=this.findBlobs(),this.processBlobs(),this.rejectBlobsMethod){case this.REJECT_NONE_BLOBS:break;case this.REJECT_INNER_BLOBS:this.rejectInnerBlobs();break;case this.REJECT_OUTER_BLOBS:this.rejectOuterBlobs();break;default:console.log("[Vida, updateBlobs] unhandled rejectBlobsMethod value: "+this.rejectBlobsMethod)}if(this.trackBlobsFlag)this.trackBlobs();else for(var t=0;t<this.numberOfDetectedBlobs;t++)this.__blobs[this.__currentBlobsLocation][t].id=t;this.approximateBlobPolygonsFlag&&this.approximateBlobPolygons()},p5.prototype.Vida.prototype.findBlobs=function(){this.findBlobs_createTemporaryIndices();for(var t=-1,s=0;t!==s;)this.findBlobs_mergerIterationA(),this.findBlobs_mergerIterationB(),t=s,s=this.findBlobs_countUnorderedIdentifiers();return this.findBlobs_optimizeIdentifiers()},p5.prototype.Vida.prototype.findBlobs_createTemporaryIndices=function(){var t,s=1,e=this.thresholdImage.width-1,o=this.thresholdImage.height-1;this.resetBlobMapArray();for(var i=1;i<o;i++)for(var r=1;r<e;r++)t=4*(i*this.thresholdImage.width+r),this.thresholdImage.pixels[t]>0?this.__blobMapArray[r][i]=s:s+=1},p5.prototype.Vida.prototype.findBlobs_mergerIterationA=function(){for(var t,s,e,o,i,r,h,a,n,_=this.thresholdImage.width-1,l=this.thresholdImage.height-1,c=1;c<l;c++)for(var b=1;b<_;b++)0!==this.__blobMapArray[b][c]&&(t=this.__blobMapArray[b][c-1],s=this.__blobMapArray[b+1][c-1],e=this.__blobMapArray[b+1][c],o=this.__blobMapArray[b+1][c+1],i=this.__blobMapArray[b][c+1],r=this.__blobMapArray[b-1][c+1],h=this.__blobMapArray[b-1][c],a=this.__blobMapArray[b-1][c-1],n=this.__blobMapArray[b][c],t>0&&t<n&&(n=t),s>0&&s<n&&(n=s),e>0&&e<n&&(n=e),o>0&&o<n&&(n=o),i>0&&i<n&&(n=i),r>0&&r<n&&(n=r),h>0&&h<n&&(n=h),a>0&&a<n&&(n=a),this.__blobMapArray[b][c]=n,this.__blobMapArray[b][c-1]>0&&(this.__blobMapArray[b][c-1]=n),this.__blobMapArray[b+1][c-1]>0&&(this.__blobMapArray[b+1][c-1]=n),this.__blobMapArray[b+1][c]>0&&(this.__blobMapArray[b+1][c]=n),this.__blobMapArray[b+1][c+1]>0&&(this.__blobMapArray[b+1][c+1]=n),this.__blobMapArray[b][c+1]>0&&(this.__blobMapArray[b][c+1]=n),this.__blobMapArray[b-1][c+1]>0&&(this.__blobMapArray[b-1][c+1]=n),this.__blobMapArray[b-1][c]>0&&(this.__blobMapArray[b-1][c]=n),this.__blobMapArray[b-1][c-1]>0&&(this.__blobMapArray[b-1][c-1]=n))},p5.prototype.Vida.prototype.findBlobs_mergerIterationB=function(){for(var t,s,e,o,i,r,h,a,n,_=this.thresholdImage.width-2,l=this.thresholdImage.height-2,c=_;c>0;c--)for(var b=l;b>0;b--)0!==this.__blobMapArray[c][b]&&(t=this.__blobMapArray[c][b-1],s=this.__blobMapArray[c+1][b-1],e=this.__blobMapArray[c+1][b],o=this.__blobMapArray[c+1][b+1],i=this.__blobMapArray[c][b+1],r=this.__blobMapArray[c-1][b+1],h=this.__blobMapArray[c-1][b],a=this.__blobMapArray[c-1][b-1],n=this.__blobMapArray[c][b],t>0&&t<n&&(n=t),s>0&&s<n&&(n=s),e>0&&e<n&&(n=e),o>0&&o<n&&(n=o),i>0&&i<n&&(n=i),r>0&&r<n&&(n=r),h>0&&h<n&&(n=h),a>0&&a<n&&(n=a),this.__blobMapArray[c][b]=n,this.__blobMapArray[c][b-1]>0&&(this.__blobMapArray[c][b-1]=n),this.__blobMapArray[c+1][b-1]>0&&(this.__blobMapArray[c+1][b-1]=n),this.__blobMapArray[c+1][b]>0&&(this.__blobMapArray[c+1][b]=n),this.__blobMapArray[c+1][b+1]>0&&(this.__blobMapArray[c+1][b+1]=n),this.__blobMapArray[c][b+1]>0&&(this.__blobMapArray[c][b+1]=n),this.__blobMapArray[c-1][b+1]>0&&(this.__blobMapArray[c-1][b+1]=n),this.__blobMapArray[c-1][b]>0&&(this.__blobMapArray[c-1][b]=n),this.__blobMapArray[c-1][b-1]>0&&(this.__blobMapArray[c-1][b-1]=n))},p5.prototype.Vida.prototype.findBlobs_optimizeIdentifiers=function(){for(var t,s=this.thresholdImage.width-1,e=this.thresholdImage.height-1,o=[],i=1;i<e;i++)for(var r=1;r<s;r++)if(0!==this.__blobMapArray[r][i]){t=!0;for(var h=0;h<o.length;h++)if(o[h]===this.__blobMapArray[r][i]){this.__blobMapArray[r][i]=h+1,t=!1;break}t&&(o[o.length]=this.__blobMapArray[r][i],this.__blobMapArray[r][i]=o.length)}return o.length},p5.prototype.Vida.prototype.findBlobs_countUnorderedIdentifiers=function(){for(var t,s=this.thresholdImage.width-1,e=this.thresholdImage.height-1,o=[],i=1;i<e;i++)for(var r=1;r<s;r++)if(0!==this.__blobMapArray[r][i]){t=!0;for(var h=0;h<o.length;h++)if(o[h]===this.__blobMapArray[r][i]){t=!1;break}t&&(o[o.length]=this.__blobMapArray[r][i])}return o.length};
								

									soundtrack.js
									/*
  PSEUDO-CLASS Soundtrack responsible for managing sounds. The project uses
  sound (it is handled by this object), so you need to remember to attach the
  p5.dom and p5.sound libraries to it.
*/

function Soundtrack(_isEnabled) {
  this.isEnabled=(_isEnabled>0);
  this.is_started_flag = false;
  this.scale = [
    /* C  */ true,
    /* c# */ false,
    /* D  */ true,
    /* d# */ false,
    /* E  */ true,
    /* F  */ false,
    /* f# */ false,
    /* G  */ true,
    /* g# */ false,
    /* A  */ true,
    /* a# */ false,
    /* H  */ false
  ];
  this.transpositions          = [-5, -3, 0, 2, 4];
  this.transposition_timetag   = 0;
  this.transposition_lag       = 5000;
  this.transposition           = 0;
  this.collisions_attackLevel  = 0.9;
  this.collisions_releaseLevel = 0;
  this.collisions_attackTime   = 0.05;
  this.collisions_decayTime    = 0.2;
  this.collisions_susPercent   = 0.8;
  this.collisions_releaseTime  = 0.25;
  this.collisions              = [];
  this.current_collision       = 0;
  this.arp_rev_amp             = 0.0;
  this.arp_rev_amp_step        = 0.03;
  this.arp_rev_amp_max         = 8.0;
  this.arp_osc = new p5.Oscillator('triangle');
  this.arp_osc.amp(0.1);
  this.arp_osc.disconnect();
  this.arp_osc.start();
  this.arp_osc.freq(1.0);
  this.arp_reverb = new p5.Reverb();
  this.arp_reverb.process(this.arp_osc, 6, 0.2);
  this.arp_reverb.amp(4); 
  for(var i = 0; i < 3; i++) {
    var temp_env = new p5.Envelope();
    var temp_osc = new p5.Oscillator('triangle');
    this.collisions[i] = {
      osc: temp_osc,
      env: temp_env
    };
  }
  if(this.isEnabled) this._start();
}

Soundtrack.prototype.setRandomTransposition = function() {
  if(millis() - this.transposition_timetag < this.transposition_lag) return;
  this.transposition =
    this.transpositions[Math.floor(random(this.transpositions.length))];
  this.transposition_timetag = millis();
}

Soundtrack.prototype.start = function() {
  if(this.is_started_flag) return;
  if(this.isEnabled) this._start();
  this.is_started_flag = true;
}

Soundtrack.prototype._start = function() {
  this.arp_osc.amp(0.1);
  this.arp_osc.disconnect();
  this.arp_osc.start();
  this.arp_osc.freq(1.0);
  this.arp_reverb.process(this.arp_osc, 6, 0.2);
  for(var i = 0; i < 3; i++) {
    this.collisions[i].osc.start();
    this.collisions[i].osc.freq(220);
    this.collisions[i].osc.amp(this.collisions[i].env);
    this.collisions[i].env.setADSR(
      this.collisions_attackTime, this.collisions_decayTime,
      this.collisions_susPercent, this.collisions_releaseTime
    );
    this.collisions[i].env.setRange(
      this.collisions_attackLevel, this.collisions_releaseLevel
    );
  }
}

Soundtrack.prototype.update = function() {
  if(!this.isEnabled) return;
  if(my_garden.is_growing_flag) {
    this.arp_rev_amp += this.arp_rev_amp_step;
    if(this.arp_rev_amp > this.arp_rev_amp_max)
      this.arp_rev_amp = this.arp_rev_amp_max;
  }
  else {
    this.arp_rev_amp -= this.arp_rev_amp_step;
    if(this.arp_rev_amp < 0.0) this.arp_rev_amp = 0.0;
  }
  this.arp_reverb.amp(this.arp_rev_amp);
  this.arp_osc.freq(
    this.mtof(
      this.mapNote(
        Math.floor(
          36.0 + (Math.sin(millis() * 0.0011) + 1.0) * 12.0
        )
      )
    )
  );
}

Soundtrack.prototype.mapNote = function(_note) {
  var temp_note = _note % 12;
  if(this.scale[temp_note]) return _note;
  var temp_b1 = true; var temp_b2 = true;
  var temp_iter = 0;
  while(temp_b1 || temp_b2) {
    temp_iter += 1;
    temp_note = _note + temp_iter;
    if(temp_note <= 127)
      if(this.scale[temp_note % 12]) return temp_note;
    else
      temp_b1 = false;
    temp_note = _note - temp_iter;
    if(temp_note >= 0)
      if(this.scale[temp_note % 12]) return temp_note;
    else
      temp_b2 = false;
  }
}

/*
  This converts MIDI-style note number to a frequency expressed in hertz (Hz).
*/
Soundtrack.prototype.mtof = function(_m) {
  _m += this.transposition;
  return (440.0 * Math.pow(2.0, (_m - 69.0) / 12.0));
}

Soundtrack.prototype.safePan = function(_dst, _val) {
  if(_val<-1.0) _val=-1.0; if(_val>1.0) _val=1.0;
  _dst.pan(_val);
}

Soundtrack.prototype.triggerCollision = function(_normX, _normY) {
  if(!is_playing_flag||!this.isEnabled) return;
  _normY = 1.0 - _normY;
  this.setRandomTransposition();
  if(_normX<-1.0)_normX=-1.0; if(_normX>1.0)_normX=1.0;
  this.safePan(this.collisions[this.current_collision].osc,(_normX*2.0-1.0));
  //this.collisions[this.current_collision].osc.pan(_normX * 2.0 - 1.0);
  this.collisions[this.current_collision].osc.freq(
    this.mtof(
      this.mapNote(
        Math.floor(48.0 + 24.0 * _normY)
      )
    )
  );
  this.collisions[this.current_collision].env.play();
  this.current_collision =
    (this.current_collision + 1) % this.collisions.length;
}
								

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/60.);
								

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

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