Ogród Mechaniczny wg Tytusa Czyżewskiego

synthetic nature and the relation of art, nature and technology
Preview: default camera Preview: back camera
Parameters
splash		disables/enables the display of the splash screen upon starting the Miniatura
gui		hide / show the GUI
mirror		mirorr the camera image
motion		disables/enables the motion detector
dark		toggles color schemes between light and dark (the "dark" toggle)
ilang		sets the interface language
lang		sets the content language of the installation
sens		sets the initial normalized sensitivity of the motion detector (the "sensitivity" slider)
pointer		hide / show the mouse pointer
growingspeed		sets the growth speed of "flowers"
synth		disables/enables the internal sound synthesizer
cntextmsg		disables/enables the conversion of the number of buffered external control messages for "flower" growth into growth speed
Description
“The Mechanical Garden” by Tytus Czyżewski from 1920 is an early example of visual poetry, in which word and image create a shared structure of meanings. In Paweł Janicki’s version, the work comes to life in digital media – letters and signs react to the presence and movement of the viewer, transforming into a dynamic arrangement of forms. This miniature develops the futurist vision of the relationship between art, nature, and technology, exploring how past ideas can be reinterpreted through the language of contemporary media.
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.
“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 touches the issues of conditional arts, synthetic nature and the relation of art, nature and technology in general.
“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).
Technical documentation
Parameters passed via URL

splash 0 or 1; default 1; disables or enables the display of the splash screen upon Miniature startup
gui 0 or 1; default 1; hides/shows the graphical user interface panel
famo user | environment (or env); default user; [facingMode] allows forcing the use of the front (user) or rear (environment) camera on devices equipped with dual cameras (most modern mobile devices)
mirror 0 or 1; default 1; disables/enables image mirroring mode
motion 0 or 1; default 1; disables/enables the motion detector
dark 0 or 1; default 0; switches color schemes between light and dark (the “dark” toggle)
ilang en or pl; default en; sets the interface language (additional languages can be added)
lang en or pl; default pl; sets the content language of the installation (additional languages can be added)
sens 0.0 … 1.0; sets the initial normalized sensitivity of the motion detector (the “sensitivity” slider)
pointer 0 or 1; default 1; hides/shows the mouse cursor
worker 0 or 1; default 0; allows blocking the browser’s built-in mechanisms that suspend the program when the window is not visible
growingspeed default 1.0; sets the growth speed of “flowers”
butterflies forces a fixed, specified number of “butterflies”, independent of the image size
flowers forces a fixed, specified number of “flowers”, independent of the image size
butterflysize forces a fixed, specified size of “butterflies”, independent of the image size
flowersize forces a fixed, specified size of “flowers”, independent of the image size
butterflystroke forces a fixed, specified outline thickness of “butterflies”, independent of the image size
flowerstroke forces a fixed, specified outline thickness of “flowers”, independent of the image size
butterflyfont name of the font used to display “butterfly” names
flowerfont name of the font used to display “flower” names
butterflytextsize font size used to display “butterfly” names
flowertextsize font size used to display “flower” names
synth 0 or 1; default 1; disables/enables the internal sound generator
cntextmsg 0 or 1; default 1; disables/enables the conversion of the number of buffered external control messages for “flower” growth into growth speed
ws address; disabled by default; enables and sets the address (usually localhost:9001) for WebSocket communication (allows external control of Miniature and customization)
xws address; disabled by default; enables and sets the address (usually ws://localhost:9001) with protocol specification for WebSocket communication (allows external control of Miniature and customization)
midiinport disabled by default; MIDI port number for external control of Miniature (receiving messages)
midioutport disabled by default; MIDI port number for external control of Miniature (sending messages)
Messages passed via WebSocket

Messages to which Miniature responds
index status (two numbers, no prefix) index (flower index counted from 0) status (if the parameter is greater than 0.0 the flower grows, otherwise it wilts)
Messages sent by Miniature
ogrod collision flower index, butterfly index
ogrod flower flower index, normalized vertical position of the flower
ogrod butterfly butterfly index, normalized horizontal position of the butterfly, normalized vertical position of the butterfly
MIDI

Messages to which Miniature responds
Note Off on channel 1 stops the growth of the flower with an index corresponding to the note index (pitch)
Note On on channel 1 starts the growth of the flower with an index corresponding to the note index (pitch)
Messages sent by Miniature
CC flower_index on channel 5 controller value is the index of the butterfly the flower collides with
CC butterfly_index on channel 8 controller value is the index of the flower the butterfly collides with
CC butterfly_index on channel 6 controller value corresponds to the horizontal position of the butterfly
CC butterfly_index on channel 7 controller value corresponds to the vertical position of the butterfly
CC flower_index on channel 4 controller value corresponds to the height of the flower
Note Off on channel 2 indicates that the flower with an index corresponding to the MIDI note pitch parameter has finished growing
Note On on channel 2 indicates that the flower with an index corresponding to the MIDI note pitch parameter has started growing
Note Off on channel 3 indicates that the flower with an index corresponding to the MIDI note pitch parameter continues its development after initialization (initialization occurs after collision with a butterfly)
Note On on channel 3 indicates that the flower with an index corresponding to the MIDI note pitch parameter has started a new life cycle (has been re-initialized after collision with a butterfly)
Communication with MaxMSP

Messages to which Miniature responds
not applicable
Messages sent by Miniature
not applicable
Source code
									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"])
}
								