A tribute to Flora Stacey

uniwersalny autoportret w technice ASCII-art
Podgląd: domyślna kamera Podgląd: tylna kamera
Parametry
bg		kolor tła w standardowym zapisie szesnastkowym 0xRRGGBB
camera		wyłącza/włącza wyświetlanie obrazu z kamery (przełącznik "camera")
color		wyłącza/włącza kolorowanie tekstu (przełącznik "color")
eq		wyłącza/włącza equalizację obrazu (przełącznik "eq")
gui		chowa/pokazuje panel z interfejsem graficznym
invert		wyłącza/włącza tryb odwracania koloru (przełącznik "invert")
lang		ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
mirror		lustrzane odbicie obrazu z kamery
pointer		chowa/pokazuje kursor myszy
poster		wyłącza/włącza posteryzację obrazu (przełącznik "posterize")
txtcol		kolor tekstu w standardowym zapisie szesnastkowym 0xRRGGBB
Opis
Sztuka tworzenia obrazów z liter, cyfr i znaków – znana dziś jako ASCII art – stanowi cyfrowe dziedzictwo sztuki maszynowej, której początki sięgają końca XIX wieku. Tytułowa Flora Stacey, brytyjska sekretarka, w 1898 roku wykonała na maszynie do pisania rysunek motyla, uznawany za pierwsze dzieło tego rodzaju. Miniatura wykorzystuje znaki tekstowe do tworzenia autoportretu, który powstaje w czasie rzeczywistym, w rytmie komunikacji człowieka z maszyną. ”A tribute to Flora Stacey…” podejmuje grę z ideą autoportretu i wizualnego języka, badając, jak poezja, tekst i kod mogą stać się formami obrazu.
Czytaj więcej
„A tribute to Flora Stacey: uniwersalny autoportret w technice ASCII-art”. Sztuka na maszynie do pisania i ASCII/ANSI art.
ASCII art to technika projektowania graficznego wykorzystująca komputery do prezentacji i składająca się z obrazów sklejonych ze znaków drukowalnych zdefiniowanych przez standard ASCII. Większość przykładów ASCII art wymaga czcionki o stałej szerokości.
Istnieje również nieco bardziej zaawansowana technicznie mutacja ASCII art zwana ANSI art. ANSI art to forma sztuki komputerowej, która była niegdyś szeroko stosowana na platformach BBS. Jest podobna do ASCII art, ale zbudowana z większego zestawu 256 liter, cyfr i symboli — wszystkie kody znajdują się na stronie kodowej IBM 437, często nazywanej rozszerzonym ASCII i używanej w środowiskach MS-DOS i Unix. Grafika ANSI zawiera również specjalne sekwencje specjalne ANSI, które kolorują tekst 16 kolorami pierwszego planu i 8 kolorami tła oferowanymi przez ANSI.SYS, sterownik urządzeń MS-DOS luźno oparty na standardzie ANSI X3.64 dla terminali tekstowych. Niektórzy artyści ANSI wykorzystują sekwencje sterowania kursorem w ANSI X3.64 do tworzenia animacji, powszechnie nazywanych ANSImacjami — istnieją jednak również przykłady grafiki ASCII wykorzystujące animację.
Technika ASCII art jest szeroko wykorzystywana przez artystów, hobbystów i hakerów. Szczególnie interesującym przykładem wykorzystania i kreatywnego rozwoju grafiki ASCII są prace stworzone przez grupę „ASCII Art Ensemble”. Grupa, założona przez Waltera van der Cruijsena, Lukę Freliha i Vuka Cosica, została sformwana w 1998 roku. Członkowie „ASCII Art Ensemble” stworzyli oprogramowanie do „kodowania” ruchomych obrazów w animowane (sekwencyjne) dzieła sztuki ASCII. Najbardziej rozpoznawalnym dziełem grupy jest praca „Deep ASCII” – wersja ASCII art słynnego filmu pornograficznego „Głębokie gardło” z 1972 roku.
ASCII art jest również potomkiem poezji konkretnej i wizualnej oraz tak zwanej „sztuki maszynowej: przedkomputerowej techniki tworzenia obrazów ze znaków dostępnych na maszynach do pisania – ikonicznym wczesnym zdziełem sztuki maszynowej jest obraz motyla złożony z nawiasów, myślników, ukośników i „gwiazdki”, stworzony przez Florę Stacey, brytyjską sekretarkę, w 1898 roku.
„A tribute to Flora Stacey: universal ASCII art self-portrait.” to prosta, interaktywna praca oparta o technikę ASCII art w jej animowanej (choć nie w taki sposób, jak animowana jest sztuka ANSI) formie. jest także grą z samą ideą autoportretu, tekstu, poezji, wizualności i różnych sposobów patrzenia i obserwowania obecnych w historii sztuki.
Dokumentacja techniczna
Parametry przekazywane przez adres URL

bg kolor tła w standardowym zapisie szesnastkowym 0xRRGGBB
camera 0 lub 1; domyślnie 0; wyłącza/włącza wyświetlanie obrazu z kamery (przełącznik „camera”)
color 0 lub 1; domyślnie 0; wyłącza/włącza kolorowanie tekstu (przełącznik „color”)
eq 0 lub 1; domyślnie 0; wyłącza/włącza equalizację obrazu (przełącznik „eq”)
famo user | environment (lub env); domyślnie user; [facingMode] pozwala wymusić użycie przedniej (user) lub tylnej (environment) kamery na urządzeniach, które są wyposażone w podwójne kamery/aparaty (większość współczesnych urządzeń mobilnych)
fontname nazwa wykorzystanej czcionki
gui 0 lub 1; domyślnie 1; chowa/pokazuje panel z interfejsem graficznym
h pionowa rozdzielczość kamery
invert 0 lub 1; domyślnie 0; wyłącza/włącza tryb odwracania koloru (przełącznik „invert”)
lang en lub pl; domyślnie en; ustawia język interfejsu (istnieje możliwość dodania kolejnych języków)
midiinport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (przyjmowanei komunikatów)
midioutport domyślnie wyłączone; numer portu MIDI do zewnętrznego sterowania Miniaturą (nadawanie komunikatów)
mirror 0 lub 1; domyślnie 1; wyłącza/włącza tryb lustrzanego odwracania obrazu (przełącznik „mirror”)
pointer 0 lub 1; domyślnie 1; chowa/pokazuje kursor myszy
poster 0 lub 1; domyślnie 0; wyłącza/włącza posteryzację obrazu (przełącznik „posterize”)
txtcol kolor tekstu w standardowym zapisie szesnastkowym 0xRRGGBB
txtsize 0.0 … 1.0; ustawia inicjalną zormalizowaną wielkość czcionki (suwak „font size”)
w pozioma rozdzielczość kamery
worker 0 lub 1; domyślnie 0; umożliwia zablokowanie wbudowanych w przeglądarkę mechanizmów zatrzymywania pracy programu kiedy okno nie jest widoczne
ws adres; domyślnie wyłączone; włącza i ustala adres (zwykle localhost:9001) dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
xws adres; domyślnie wyłączone; włącza i ustala adres (zwykle ws://localhost:9001) ze wskazaniem protokołu dla komunikacji poprzez WebSocket (umożliwia zewnętrzne sterowanie Miniaturą i dostosowanie do własnych potrzeb)
Komunikaty przekazywane przez WebSocket

Komunikaty, na które reaguje Miniatura
bg r g b; kolor tła w formie trzech składowych (RGB) o znormalizowanych wartościach (0.0 … 1.0)
camera 0 lub 1; domyślnie 0; wyłącza/włącza wyświetlanie obrazu z kamery (przełącznik „camera”)
color 0 lub 1; domyślnie 0; wyłącza/włącza kolorowanie tekstu (przełącznik „color”)
eq 0 lub 1; domyślnie 0; wyłącza/włącza equalizację obrazu (przełącznik „eq”)
invert 0 lub 1; domyślnie 0; wyłącza/włącza tryb odwracania koloru (przełącznik „invert”)
mirror 0 lub 1; domyślnie 1; wyłącza/włącza tryb lustrzanego odwracania obrazu (przełącznik „mirror”)
poster 0 lub 1; domyślnie 0; wyłącza/włącza posteryzację obrazu (przełącznik „posterize”)
txtcol r g b; kolor tekstu w formie trzech składowych (RGB) o znormalizowanych wartościach (0.0 … 1.0)
txtsize 0.0 … 1.0; ustawia zormalizowaną wielkość czcionki (suwak „font size”)
Komunikaty wysyłane przez Miniaturę
nie dotyczy
MIDI

Komunikaty, na które reaguje Miniatura
CC 000 na dowolnym kanale ustawia zormalizowaną wielkość czcionki (suwak „font size”)
CC 001 na dowolnym kanale domyślnie 0; wyłącza/włącza tryb odwracania koloru (przełącznik „invert”)
CC 002 na dowolnym kanale domyślnie 0; wyłącza/włącza equalizację obrazu (przełącznik „eq”)
CC 003 na dowolnym kanale domyślnie 0; wyłącza/włącza wyświetlanie obrazu z kamery (przełącznik „camera”)
CC 004 na dowolnym kanale domyślnie 0; wyłącza/włącza kolorowanie tekstu (przełącznik „color”)
CC 005 na dowolnym kanale domyślnie 0; wyłącza/włącza posteryzację obrazu (przełącznik „posterize”)
CC 006 na dowolnym kanale domyślnie 1; wyłącza/włącza tryb lustrzanego odwracania obrazu (przełącznik „mirror”)
CC 007 na dowolnym kanale czerwona składowa koloru tekstu
CC 008 na dowolnym kanale zielona składowa koloru tekstu
CC 009 na dowolnym kanale niebieska składowa koloru tekstu
CC 010 na dowolnym kanale czerwona składowa koloru tła
CC 011 na dowolnym kanale zielona składowa koloru tła
CC 012 na dowolnym kanale niebieska składowa koloru tła
Komunikaty wysyłane przez Miniaturę
nie dotyczy
Komunikacja z MaxMSP

Komunikaty, na które reaguje Miniatura
nie dotyczy
Komunikaty wysyłane przez Miniaturę
nie dotyczy
Kod źródłowy
									index.html
									<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="A tribute to Flora Stacey">
  <meta name="keywords" content="Flora, Stacey, art, interactive, miniature, Pawel, Janicki">
  <meta name="author" content="Pawel Janicki">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A tribute to Flora Stacey, Pawel Janicki, 2012-25, https://paweljanicki.jp</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
  <script src="ws.js"></script>
  <script src="midi.js"></script>
  <script src="p5.asciiart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="gui.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>
								

									sketch.js
									let s=function(p){
  const MIRROR_NONE=0; const MIRROR_HORIZONTAL=1; const MIRROR_VERTICAL=2; const MIRROR_BOTH=3;
  let mirror=MIRROR_HORIZONTAL; let useWorker =false; let capture; let captureW=640; let captureH=480; let roi={x:0,y:0,w:320,h:240};
  let cameraFacingMode="default";
  let asciiArtContainer={
    asciiArt:null,asciiMatrix:null,gfxBuffer:null,
    normGlyphSize:0.5,fontname:"Helvetica",
    useColor:false,posterize:false,eqColArr:false,showCaptureDevice:false,
    forcedTextColor:{r:255,g:255,b:255,a:255,inverted:false}
  };
  let theme={bgColor:{r:0,g:0,b:0},pointer:true};
  let guiContainer={
    gui:null, isActive:true, lock:-1, lang:'en',
    handlers:{
      toInvColToggle:{id:-1,label:{en:'invert',pl:'odwróć'}},
      toEqColToggle:{id:-1,label:{en:'equalize',pl:'normalizuj'}},
      toShowCameraToggle:{id:-1,label:{en:'camera',pl:'kamera'}},
      toColorToggle:{id:-1,label:{en:'color',pl:'kolor'}},
      toPosterizeToggle:{id:-1,label:{en:'posterize',pl:'posteryzuj'}},
      toFontSizeSlider:{id:-1,label:{en:'font size',pl:'wielkość znaków'}}
    },
    getLabelByLang(_handler){
      let result='unhandled';
      switch(this.lang){
        case 'en': result=_handler.label.en; break;
        case 'pl': result=_handler.label.pl; break;
        default: console.log('[guiContainer, getLabelByLang] unhandled this.lang: '+this.lang);
      }
      return result;
    }
  };
  let webSocket={
    isActive:false,monitorInput:false,
    processor:(new WS()),address:"ws://localhost:9001/",
    //receivedMessages:[],
  };
  let midi={
    isActive:false,
    processor:(new Midi()), outputPortIndex:-1, inputPortIndex:-1,
    //channels:{in:1,out:2},
    //ccInMap:{invert:0,circular:1,randomize:2,K:3,speed:4,deviation:5,vol:6},
    //ccOutMap:{invert:0,circular:1,randomize:2,K:3,speed:4,deviation:5,vol:6}
  };
  p.setup=function(){
    p.handleUrlParams();
    p.createCanvas(innerWidth,innerHeight); p.initCaptureDevice(captureW,captureH);
    p.initAsciiArtGenerator(); p.initGui(); guiContainer.gui.forceBroadcast();
    p.initWebSocket(); p.initMidi();
    if(useWorker){
      p.noLoop();
      let intervalWorker = new Worker('worker.js');
      intervalWorker.onmessage = function(_e){p.handleWorker();}
      console.log("[setup] Worker set as clock source.");
    }else{p.frameRate(60);}
  };
  p.initCaptureDevice=function(_w,_h){
    let b=p._initCaptureDevice(_w,_h);
    if((!b)&&(cameraFacingMode!=="default")){
      console.log("[p.initCaptureDevice] can't access capture device against current facing mode ("+cameraFacingMode+"), trying to access default mode instead...");
      cameraFacingMode="default"; p._initCaptureDevice(_w,_h);
    };
  }
  p._initCaptureDevice=function(_w,_h){
    let result=false;
    switch(cameraFacingMode){
      case "default":
        try{
          capture=p.createCapture(p.VIDEO);
          capture.size(_w,_h);
          capture.elt.setAttribute('playsinline', '');
          capture.hide();
          console.log('[_initCaptureDevice] capture ready: '+capture.width+' '+capture.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "user":
        try{
          capture=p.createCapture({audio:false,video:{facingMode:{exact:"user"}}});
          capture.size(_w,_h);
          capture.elt.setAttribute('playsinline', '');
          capture.hide();
          console.log('[_initCaptureDevice] capture ready: '+capture.width+' '+capture.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      case "environment":
        try{
          capture=p.createCapture({audio:false,video:{facingMode:{exact:"environment"}}});
          capture.size(_w,_h);
          capture.elt.setAttribute('playsinline', '');
          capture.hide();
          console.log('[initCaptureDevice] capture ready: '+capture.width+' '+capture.height);
          result=true;
        }catch(_err){console.log('[_initCaptureDevice] capture error: '+_err);}
      break;
      default: console.log("[_initCaptureDevice] unhandled cameraFacingMode: "+cameraFacingMode);
    }
    return result;
  };
  p.mobileLandscapeFullscreenWorkaround=function(){window.scroll(0, 0);};
  p.handleWorker=function(){p.redraw();};
  p.setBackground=function(_gfx,_r,_g,_b,_setDocumentBodyStyleBackground){_r=Math.floor(_r);_g=Math.floor(_g);_b=Math.floor(_b);_gfx.background(_r,_g,_b);if(_setDocumentBodyStyleBackground) document.body.style.background = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';};
  p.draw=function(){
    if((p.width!=innerWidth)||p.height!=innerHeight){
      p.resizeCanvas(innerWidth,innerHeight); p.calcCaptureRoi(capture,roi);
      p.setAsciiArtResolution(asciiArtContainer.gfxBuffer,asciiArtContainer.normGlyphSize,roi);
    }
    p.setBackground(p,theme.bgColor.r,theme.bgColor.g,theme.bgColor.b,true);
    p.transferCaptureToGfxBuffer();
    if(asciiArtContainer.posterize) asciiArtContainer.gfxBuffer.filter(p.POSTERIZE, 10);
    asciiArtContainer.asciiMatrix = asciiArtContainer.asciiArt.convert(asciiArtContainer.gfxBuffer,asciiArtContainer.gfxBuffer.width,asciiArtContainer.gfxBuffer.height,asciiArtContainer.useColor);
    if(guiContainer.gui.items[guiContainer.handlers.toShowCameraToggle.id].getValue()) p.drawCaptureRoi();
    p.textAlign(p.CENTER,p.CENTER); p.textFont(asciiArtContainer.fontname);
    p.textSize(Math.floor(p.width/asciiArtContainer.gfxBuffer.width));
    p.blendMode(p.BLEND); p.smooth();
    asciiArtContainer.asciiArt.typeArray2d(
      asciiArtContainer.asciiMatrix,p,0,0,p.width,p.height,asciiArtContainer.useColor,
      asciiArtContainer.forcedTextColor.r,asciiArtContainer.forcedTextColor.g,asciiArtContainer.forcedTextColor.b,asciiArtContainer.forcedTextColor.a,
      asciiArtContainer.forcedTextColor.inverted
    );
    guiContainer.gui.draw();
  };
  p.transferCaptureToGfxBuffer=function(){
    capture.loadPixels();
    switch(mirror){
      case MIRROR_NONE:
        asciiArtContainer.gfxBuffer.image(
          capture,
          0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
          roi.x, roi.y, roi.w, roi.h
        );
      break;
      case MIRROR_HORIZONTAL:
        asciiArtContainer.gfxBuffer.push();
          asciiArtContainer.gfxBuffer.scale(-1, 1);
          asciiArtContainer.gfxBuffer.translate(-asciiArtContainer.gfxBuffer.width,0);
          asciiArtContainer.gfxBuffer.image(
            capture,
            0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
            roi.x, roi.y, roi.w, roi.h
          );
        asciiArtContainer.gfxBuffer.pop();
      break;
      case MIRROR_VERTICAL:
        asciiArtContainer.gfxBuffer.push();
          asciiArtContainer.gfxBuffer.scale(1, -1);
          asciiArtContainer.gfxBuffer.translate(0,-asciiArtContainer.gfxBuffer.height);
          asciiArtContainer.gfxBuffer.image(
            capture,
            0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
            roi.x, roi.y, roi.w, roi.h
          );
        asciiArtContainer.gfxBuffer.pop();
      break;
      case MIRROR_BOTH:
        asciiArtContainer.gfxBuffer.push();
          asciiArtContainer.gfxBuffer.scale(-1, -1);
          asciiArtContainer.gfxBuffer.translate(-asciiArtContainer.gfxBuffer.width,-asciiArtContainer.gfxBuffer.height);
          asciiArtContainer.gfxBuffer.image(
            capture,
            0, 0, -asciiArtContainer.gfxBuffer.width, asciiArtContainer.gfxBuffer.height,
            roi.x, roi.y, roi.w, roi.h
          );
        asciiArtContainer.gfxBuffer.pop();
      break;
      default: console.log("[transferCaptureToGfxBuffer] unhandled mirror: "+mirror);
    }
  }
  p.drawCaptureRoi=function(){
    let fx=p.width/roi.w; let fy=p.height/roi.h;
    switch(mirror){
      case MIRROR_NONE: p.image(capture,-fx*roi.x,-fy*roi.y,fx*capture.width,fy*capture.height); break;
      case MIRROR_HORIZONTAL:
        p.push();
          p.scale(-1,1); p.translate(-fx*capture.width,0);
          p.image(capture,fx*roi.x,-fy*roi.y,fx*capture.width,fy*capture.height);
        p.pop();
      break;
      case MIRROR_VERTICAL:
        p.push();
          p.scale(1,-1); p.translate(0,-fy*capture.height);
          p.image(capture,-fx*roi.x,fy*roi.y,fx*capture.width,fy*capture.height);
        p.pop();
      break;
      case MIRROR_BOTH:
        p.push();
          p.scale(-1,-1); p.translate(-fx*capture.width,-fy*capture.height);
          p.image(capture,fx*roi.x,fy*roi.y,fx*capture.width,fy*capture.height);
        p.pop();
      break;
      default: console.log("[drawCaptureRoi] unhandled mirror: "+mirror);
    }
  };
  p.touchStarted=function(_event){guiContainer.lock=guiContainer.gui.lockPointer(p.mouseX,p.mouseY);return false;};
  p.touchMoved=function(_event){guiContainer.gui.dragPointer(p.mouseX,p.mouseY);return false;};
  p.touchEnded=function(_event){guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);p.handleUniversalClickEvent(); return false;};
  p.doubleClicked=function(){return false;};
  p.mouseClicked=function(){p.handleUniversalClickEvent();return false;};
  p.mouseDragged=function(){guiContainer.gui.dragPointer(p.mouseX,p.mouseY);return false;};
  p.mouseMoved=function(){guiContainer.gui.moveIdlePointer(p.mouseX,p.mouseY);return false;};
  p.mousePressed=function(){guiContainer.lock=guiContainer.gui.lockPointer(p.mouseX,p.mouseY);return false;};
  p.mouseReleased=function(){guiContainer.gui.unlockPointer(p.mouseX,p.mouseY);return false;};
  p.mouseWheel=function(){return false;};
  p.typeArray2d=function(_arr2d, _dst, _x, _y, _w, _h){
    if(_arr2d===null){console.log('[AsciiArt, typeArray2d] _arr2d === null');return false;}
    if(_arr2d===undefined){console.log('[AsciiArt, typeArray2d] _arr2d === undefined');return false;}
    if(_dst.canvas===null){console.log('[AsciiArt, typeArray2d] _dst.canvas === null');return false;}
    if(_dst.canvas===undefined){console.log('[AsciiArt, typeArray2d] _dst.canvas === undefined');return false;}
    let temp_ctx2d = _dst.canvas.getContext('2d');
    if(temp_ctx2d===null){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is null');return false;}
    if(temp_ctx2d===undefined){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is undefined');return false;}
    let dist_hor=_w/_arr2d.length; let dist_ver=_h/_arr2d[0].length;
    let offset_x=_x+dist_hor*0.5; let offset_y=_y+dist_ver*0.5;
    for(let temp_y=0;temp_y<_arr2d[0].length;temp_y++)
      for(let temp_x=0;temp_x<_arr2d.length;temp_x++)
        temp_ctx2d.fillText(_arr2d[temp_x][temp_y],offset_x+temp_x*dist_hor,offset_y+temp_y*dist_ver);
    return true;
  };
  p.handleUniversalClickEvent=function(){
    if(guiContainer.isActive){
      if(guiContainer.lock<0){
        if(guiContainer.gui.hitTestAllItems(p.mouseX,p.mouseY)<0){
          guiContainer.gui.disableAllItems(); if(!theme.pointer) p.noCursor();
          guiContainer.gui.setBackgroundPanelVisibility(false);
          guiContainer.isActive=false;
        }
      }
    }else{
      guiContainer.gui.enableAllItems(); guiContainer.isActive=true; p.cursor();
      guiContainer.gui.setBackgroundPanelVisibility(true);
    }
  }
  p.calcCaptureRoi=function(_capture,_roi){
    if(_capture        === null)      return false;
    if(_capture        === undefined) return false;
    if(_capture.width  === null)      return false;
    if(_capture.width  === undefined) return false;
    if(_capture.height === null)      return false;
    if(_capture.height === undefined) return false;
    let ratio_a=p.width/p.height; let ratio_b=_capture.width/_capture.height;
    if(ratio_a>ratio_b){
      _roi.w=_capture.width; _roi.h=Math.floor(_roi.w*p.height/p.width);
    }else{
      _roi.h=_capture.height; _roi.w=Math.floor(_roi.h*(p.width/p.height));
    }
    _roi.x=Math.floor((_capture.width-_roi.w)/2);
    _roi.y=Math.floor((_capture.height-_roi.h)/2);
    return true;
  };
  p.setAsciiArtResolution=function(_g, _normGlyphSize, _roi){
    //let temp_segmentSize=(5+_normGlyphSize*10);
    let temp_segmentSize=(5+_normGlyphSize*10)*(captureW/640.0);
    let temp_w=Math.floor(_roi.w/temp_segmentSize); let temp_h=Math.floor(_roi.h/temp_segmentSize);
    if((_g.width!==temp_w)||(_g.height!==temp_h)) asciiArtContainer.asciiArt.resizeGraphicsWorkaround(_g,temp_w,temp_h); //p.resizeGraphicsWorkaround(_g,temp_w,temp_h);
  };
  p.initAsciiArtGenerator=function(){
    asciiArtContainer.gfxBuffer=p.createGraphics(10,10); asciiArtContainer.gfxBuffer.pixelDensity(1); 
    asciiArtContainer.asciiArt = new AsciiArt(p,asciiArtContainer.fontname,Math.floor(48),p.NORMAL);
    asciiArtContainer.asciiArt.printWeightTable();
    p.calcCaptureRoi(capture,roi);
    p.setAsciiArtResolution(asciiArtContainer.gfxBuffer,Math.floor(asciiArtContainer.normGlyphSize),roi);
  };
  p.initMidi=function(){
    if(!midi.isActive) return;
    if(isNaN(midi.inputPortIndex)) midi.inputPortIndex=-1; midi.inputPortIndex=Math.floor(midi.inputPortIndex);
    if(isNaN(midi.outputPortIndex)) midi.outputPortIndex=-1; midi.outputPortIndex=Math.floor(midi.outputPortIndex);
    midi.processor.init(midi.inputPortIndex,midi.outputPortIndex);
    if((midi.inputPortIndex>=0)||(midi.outputPortIndex>=0)) midi.isActive=true; else midi.isActive=false;
    if(midi.inputPortIndex>=0) midi.processor.onCC=function(_midiEvent){p.handleIncomingMidiCCMessages(_midiEvent);}
  };
  p.handleIncomingMidiCCMessages=function(_midiEvent){
    switch(_midiEvent.controller.number){
      case 0: guiContainer.gui.items[guiContainer.handlers.toFontSizeSlider.id].setNormValue(_midiEvent.rawValue/127.0); break;
      case 1: guiContainer.gui.items[guiContainer.handlers.toInvColToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 2: guiContainer.gui.items[guiContainer.handlers.toEqColToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 3: guiContainer.gui.items[guiContainer.handlers.toShowCameraToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 4: guiContainer.gui.items[guiContainer.handlers.toColorToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 5: guiContainer.gui.items[guiContainer.handlers.toPosterizeToggle.id].setValue((_midiEvent.rawValue>0)); break;
      case 6: mirror=(_midiEvent.rawValue%4); break;
      case 7: asciiArtContainer.forcedTextColor.r=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 8: asciiArtContainer.forcedTextColor.g=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 9: asciiArtContainer.forcedTextColor.b=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 10: theme.bgColor.r=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 11: theme.bgColor.g=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      case 12: theme.bgColor.b=Math.floor(_midiEvent.rawValue/127.0*255.0); break;
      default: console.log("[p.handleIncomingMidiCCMessages] unhandled _midiEvent.controller.number: "+_midiEvent.controller.number);
    }
  };
  p.initWebSocket=function(){
    if(!webSocket.isActive) return;
    webSocket.processor.init(webSocket.address,function(_msg){
      if(_msg===null) return; if(_msg===undefined) return; if(_msg.data===null) return; if(_msg.data===undefined) return;
      if(webSocket.monitorInput) console.log("[p.initWebSocket/handler] monitor: "+_msg.data);
      let arr=_msg.data.split(" ");
      if(arr===null) return; if(arr===undefined) return;
      if(arr.length===2){
        switch(arr[0]){
          case "txtsize":
            arr[1]=parseFloat(arr[1]);
            if(!isNaN(arr[1])){
              if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0;
              guiContainer.gui.items[guiContainer.handlers.toFontSizeSlider.id].setNormValue(arr[1]);
            }
          break;
          case "invert": 
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toInvColToggle.id].setValue(arr[1]);
            }
          break;
          case "eq":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toEqColToggle.id].setValue(arr[1]);
            }
          break;
          case "camera":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toShowCameraToggle.id].setValue(arr[1]);
            }
          break;
          case "color":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toColorToggle.id].setValue(arr[1]);
            }
          break;
          case "poster":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){
              arr[1]=(arr[1]>0);
              guiContainer.gui.items[guiContainer.handlers.toPosterizeToggle.id].setValue(arr[1]);
            }
          break;
          case "mirror":
            arr[1]=parseInt(arr[1]);
            if(!isNaN(arr[1])){if((arr[1]>=0)&&(arr[1]<=3)) mirror=arr[1];}
          break;
          default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
        }
      }else{
        if(arr.length===4){
          switch(arr[0]){
            case "txtcol":
              arr[1]=parseFloat(arr[1]);arr[2]=parseFloat(arr[2]);arr[3]=parseFloat(arr[3]);
              if((!isNaN(arr[1]))&&(!isNaN(arr[2]))&&(!isNaN(arr[3]))){
                if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0; if(arr[2]<0.0) arr[2]=0.0; if(arr[2]>1.0) arr[2]=1.0; if(arr[3]<0.0) arr[3]=0.0; if(arr[3]>1.0) arr[3]=1.0;
                asciiArtContainer.forcedTextColor.r=Math.floor(arr[1]*255.0);
                asciiArtContainer.forcedTextColor.g=Math.floor(arr[2]*255.0);
                asciiArtContainer.forcedTextColor.b=Math.floor(arr[3]*255.0);
              }
            break;
            case "bg":
              arr[1]=parseFloat(arr[1]);arr[2]=parseFloat(arr[2]);arr[3]=parseFloat(arr[3]);
              if((!isNaN(arr[1]))&&(!isNaN(arr[2]))&&(!isNaN(arr[3]))){
                if(arr[1]<0.0) arr[1]=0.0; if(arr[1]>1.0) arr[1]=1.0; if(arr[2]<0.0) arr[2]=0.0; if(arr[2]>1.0) arr[2]=1.0; if(arr[3]<0.0) arr[3]=0.0; if(arr[3]>1.0) arr[3]=1.0;
                theme.bgColor.r=Math.floor(arr[1]*255.0);
                theme.bgColor.g=Math.floor(arr[2]*255.0);
                theme.bgColor.b=Math.floor(arr[3]*255.0);
              }
            break;
            default: console.log("[p.initWebSocket/handler] unhandled arr[0]: "+arr[0]);
          }
        }
      }
    });
  };
  p.initGui=function(){
    guiContainer.gui = new GUI(p,true,400,200,false);
    guiContainer.gui.setBackgroundPanelRect(20,20,320,170,5);
    guiContainer.gui.backgroundPanel.color.r=0;
    guiContainer.gui.backgroundPanel.color.g=0;
    guiContainer.gui.backgroundPanel.color.b=0;
    guiContainer.gui.backgroundPanel.color.a=127;
    let gui_tgl_eqcolarr = new SimpleToggle(140,40,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.eqColArr,guiContainer.getLabelByLang(guiContainer.handlers.toEqColToggle));
    gui_tgl_eqcolarr.onChange=function(_id,_v){asciiArtContainer.asciiArt.equalizeColorArray=(_v>0);};
    guiContainer.handlers.toEqColToggle.id=guiContainer.gui.addItem(gui_tgl_eqcolarr);
    let gui_tgl_camera = new SimpleToggle(40,140,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.showCaptureDevice,guiContainer.getLabelByLang(guiContainer.handlers.toShowCameraToggle));
    gui_tgl_camera.onChange=function(_id,_v){/*kura.invert=_v;*/};
    guiContainer.handlers.toShowCameraToggle.id=guiContainer.gui.addItem(gui_tgl_camera);
    let gui_tgl_color = new SimpleToggle(140,140,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.useColor,guiContainer.getLabelByLang(guiContainer.handlers.toColorToggle));
    gui_tgl_color.onChange=function(_id,_v){asciiArtContainer.useColor=(_v>0);};
    guiContainer.handlers.toColorToggle.id=guiContainer.gui.addItem(gui_tgl_color);
    let gui_tgl_posterize = new SimpleToggle(40,40,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.posterize,guiContainer.getLabelByLang(guiContainer.handlers.toPosterizeToggle));
    gui_tgl_posterize.onChange=function(_id,_v){asciiArtContainer.posterize=(_v>0);};
    guiContainer.handlers.toPosterizeToggle.id=guiContainer.gui.addItem(gui_tgl_posterize);
    let gui_tgl_invert = new SimpleToggle(240,140,80,30,GUI.ORIENTATION_HORIZONTAL,asciiArtContainer.forcedTextColor.inverted,guiContainer.getLabelByLang(guiContainer.handlers.toInvColToggle));
    gui_tgl_invert.onChange=function(_id,_v){asciiArtContainer.forcedTextColor.inverted=(_v>0);};
    guiContainer.handlers.toInvColToggle.id=guiContainer.gui.addItem(gui_tgl_invert);
    let gui_sld_fontsize = new SimpleSlider(40,90,280,30,GUI.ORIENTATION_HORIZONTAL,true,0.0,1.0,asciiArtContainer.normGlyphSize,guiContainer.getLabelByLang(guiContainer.handlers.toFontSizeSlider));
    gui_sld_fontsize.onChange=function(_id,_v){asciiArtContainer.normGlyphSize=_v+0.2;p.setAsciiArtResolution(asciiArtContainer.gfxBuffer,asciiArtContainer.normGlyphSize,roi);};
    guiContainer.handlers.toFontSizeSlider.id=guiContainer.gui.addItem(gui_sld_fontsize);
    if(guiContainer.isActive){
      guiContainer.gui.enableAllItems();
      guiContainer.gui.setBackgroundPanelVisibility(true);
      p.cursor();
    }else{
      guiContainer.gui.disableAllItems();
      guiContainer.gui.setBackgroundPanelVisibility(false);
    }
    //guiContainer.gui.forceBroadcast();
  };
  p.huskColorComponentsARGB=function(_argb){
    return{
      a:( (_argb >> 24) & 0xFF),
      r:( (_argb >> 16) & 0xFF),
      g:( (_argb >> 8) & 0xFF),
      b:( _argb & 0xFF)
    };
  };
  p.huskColorComponentsRGB=function(_rgb){
    return{
      r:( (_rgb >> 16) & 0xFF),
      g:( (_rgb >> 8) & 0xFF),
      b:( _rgb & 0xFF)
    };
  };
  p.handleUrlParams=function(){
    try{
      let urlparams = p.getURLParams();
      if(urlparams){
        if("gui" in urlparams){
          let v=parseInt(urlparams.gui); if(!isNaN(v)){guiContainer.isActive=(v>0);}
          console.log("[p.handleUrlParams] gui: "+guiContainer.isActive);
        }
        if("famo" in urlparams){
          cameraFacingMode=decodeURIComponent(urlparams.famo);
          cameraFacingMode=cameraFacingMode.toLowerCase();
          if(cameraFacingMode==="env") cameraFacingMode="environment";
          console.log("[p.handleUrlParams] camera facing mode: "+cameraFacingMode);}
        if("pointer" in urlparams){
          let v=parseInt(urlparams.pointer); if(!isNaN(v)){if(v>0) p.cursor(); else p.noCursor(); theme.pointer=(v>0);}
          console.log("[p.handleUrlParams] pointer: "+theme.pointer);
        }
        if("txtsize" in urlparams){let v=parseFloat(urlparams.txtsize);
          if(!isNaN(v)){if((v>=0.0)&&(v<=1.0)) asciiArtContainer.normGlyphSize=v;}
          console.log("[p.handleUrlParams] norm text size: "+asciiArtContainer.asciiArtContainer.normGlyphSize);
        }
        if("txtcol" in urlparams){
          let v=parseInt(urlparams.txtcol);
          if(!isNaN(v)){
            let col=p.huskColorComponentsRGB(v);
            asciiArtContainer.forcedTextColor.r=col.r;asciiArtContainer.forcedTextColor.g=col.g;asciiArtContainer.forcedTextColor.b=col.b;
          }
          console.log("[p.handleUrlParams] txt col: "+asciiArtContainer.forcedTextColor.r+" "+asciiArtContainer.forcedTextColor.g+" "+asciiArtContainer.forcedTextColor.b);
        }
        if("bg" in urlparams){
          let v=parseInt(urlparams.bg);
          if(!isNaN(v)){
            let col=p.huskColorComponentsRGB(v);
            theme.bgColor.r=col.r;theme.bgColor.g=col.g;theme.bgColor.b=col.b;
          }
          console.log("[p.handleUrlParams] bg: "+theme.bgColor.r+" "+theme.bgColor.g+" "+theme.bgColor.b);
        }
        if("camera" in urlparams){let v=parseInt(urlparams.camera); if(!isNaN(v)){asciiArtContainer.showCaptureDevice=(v>0);} console.log("[p.handleUrlParams] camera: "+asciiArtContainer.showCaptureDevice);}
        if("color" in urlparams){let v=parseInt(urlparams.color); if(!isNaN(v)){asciiArtContainer.useColor=(v>0);} console.log("[p.handleUrlParams] color: "+asciiArtContainer.useColor);}
        if("eq" in urlparams){let v=parseInt(urlparams.eq); if(!isNaN(v)){asciiArtContainer.forcedTextColor.eqColArr=(v>0);} console.log("[p.handleUrlParams] equalize: "+asciiArtContainer.forcedTextColor.eqColArr);}
        if("poster" in urlparams){let v=parseInt(urlparams.poster); if(!isNaN(v)){asciiArtContainer.forcedTextColor.posterize=(v>0);} console.log("[p.handleUrlParams] posterize: "+asciiArtContainer.forcedTextColor.posterize);}
        if("invert" in urlparams){let v=parseInt(urlparams.invert); if(!isNaN(v)){asciiArtContainer.forcedTextColor.inverted=(v>0);} console.log("[p.handleUrlParams] invert: "+asciiArtContainer.forcedTextColor.inverted);}
        if("mirror" in urlparams){let v=parseInt(urlparams.mirror); if(!isNaN(v)){if((v>=0)&&(v<4)) mirror=v;} console.log("[p.handleUrlParams] mirror: "+mirror);}
        if("worker" in urlparams){let v=parseInt(urlparams.worker); if(!isNaN(v)){useWorker=(v>0);} console.log("[p.handleUrlParams] worker: "+useWorker);}
        if("fontname" in urlparams){asciiArtContainer.fontname=decodeURIComponent(urlparams.fontname);console.log("[p.handleUrlParams] font name: "+asciiArtContainer.fontname);}
        if("lang" in urlparams){guiContainer.lang=decodeURIComponent(urlparams.lang);console.log("[p.handleUrlParams] lang: "+guiContainer.lang);}
        if("ws" in urlparams){webSocket.address="ws://"+decodeURIComponent(urlparams.ws)+"/"; webSocket.isActive=true; console.log("[p.handleUrlParams] (ws) webSocket.address: "+webSocket.address);}
        if("xws" in urlparams){webSocket.address=decodeURIComponent(urlparams.xws); webSocket.isActive=true; console.log("[p.handleUrlParams] (xws) webSocket.address: "+webSocket.address);}
        if("midiinport" in urlparams){let v=parseInt(urlparams.midiinport); if(!isNaN(v)){midi.inputPortIndex=v; console.log("[p.handleUrlParams] MIDI input port index: "+v);}}
        //if("midiinchn" in urlparams){if(!isNaN(urlparams.midiinchn)){midi.chnin=1+(Math.abs(Math.floor(urlparams.midiinchn)-1)%16);}} // 1 ... 16
        if("midioutport" in urlparams){let v=parseInt(urlparams.midioutport); if(!isNaN(v)){midi.outputPortIndex=v; console.log("[p.handleUrlParams] MIDI output port index: "+v);}}
        //if("midioutchn" in urlparams){if(!isNaN(urlparams.midioutchn)){midi.chnout=1+(Math.abs(Math.floor(urlparams.midioutchn)-1)%16);}} // 1 ... 16
        if("w" in urlparams){let v=parseInt(urlparams.w); if(!isNaN(v)){if(v>0) captureW=v; console.log("[p.handleUrlParams] captureW: "+v);}}
        if("h" in urlparams){let v=parseInt(urlparams.h); if(!isNaN(v)){if(v>0) captureH=v; console.log("[p.handleUrlParams] captureH: "+v);}}
      }
    }catch(_e){console.log("[p.handleUrlParams] _e: "+_e);}
  };
};
let myp5 = new p5(s); // let's run the sketch in the "instance mode"
								

									worker.js
									var i = 0;

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

setInterval(timedCount, 1000.0/60.);
								

									p5.asciiart.js
									class AsciiArt{
  constructor(_p,_fontName,_fontSize,_textStyle){
    this.p=_p;this.fontName='monospace';this.fontSize=24;this.textStyle=this.p.NORMAL;
    this.graphics=this.p.createGraphics(10,10);
    this.range={min:32,max:126};this.weightTable=[];this.colorArray=null;
    this.automaticPixelsDataTransfer=true;
    this.invertBrightness=false;
    this.equalizeColorArray=false;
    if(arguments.length>1) this.fontName=_fontName;
    if(arguments.length>2){
      if(!isNaN(_fontSize)){
        _fontSize=Math.floor(Math.abs(_fontSize));
        if(_fontSize>5) this.fontSize=_fontSize;
      }
    }
    if(arguments.length>3) this.textStyle=_textStyle;
    this.createWeightTable();
  }
  resizeGraphicsWorkaround(_g,_w,_h){
    if(_g===null||_g===undefined){
      _g=this.p.createGraphics(_w,_h);_g.pixelDensity(1);
    }else{
      _g.width=_w;_g.height=_h;
      _g.elt.width=_w;_g.elt.height=_h;
      _g.elt.style.width=_w+'px';_g.elt.style.height=_h+'px';
      _g.pixelDensity(1);_g.loadPixels();
      _g.elt.setAttribute('style','display: none');
    }
    _g.updatePixels();_g.clear();_g.loadPixels();
    if(_w*_h!==_g.pixels.length/4)
      console.log(
        '[AsciiArt, 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)
      );
  }
  createArray2d(_w,_h){
    let temp_arr=[];
    for(let temp_x=0;temp_x<_w;temp_x++) {
      let temp_column=[];
      for(let temp_y=0;temp_y<_h;temp_y++) temp_column[temp_y]=0;
      temp_arr[temp_x]=temp_column;
    }
    return temp_arr;
  }
  typeArray2d(_arr2d,_dst,_x,_y,_w,_h,_useColor,_r,_g,_b,_a,_invertColor){ // _a is ignored
    if(_arr2d===null){console.log('[AsciiArt, typeArray2d] _arr2d === null');return;}
    if(_arr2d===undefined){console.log('[AsciiArt, typeArray2d] _arr2d === undefined');return;}
    if(_dst.canvas===null){console.log('[AsciiArt, typeArray2d] _dst.canvas === null');return;}
    if(_dst.canvas===undefined){console.log('[AsciiArt, typeArray2d] _dst.canvas === undefined');return;}
    let temp_ctx2d=_dst.canvas.getContext('2d');
    if(temp_ctx2d===null){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is null');return;}
    if(temp_ctx2d===undefined){console.log('[AsciiArt, typeArray2d] _dst canvas 2d context is undefined');return;}
    let dist_hor=_w/_arr2d.length; var dist_ver=_h/_arr2d[0].length;
    let offset_x=_x+dist_hor*0.5; let offset_y=_y+dist_ver*0.5;
    if(_invertColor)
      temp_ctx2d.fillStyle="rgb("+(255-_r)+","+(255-_g)+","+(255-_b)+")";
    else
      temp_ctx2d.fillStyle="rgb("+_r+","+_g+","+_b+")";
    for(let temp_y=0;temp_y<_arr2d[0].length;temp_y++){
      for(let temp_x=0;temp_x<_arr2d.length;temp_x++){
        if(_useColor){
          if(_invertColor)
            temp_ctx2d.fillStyle="rgb("+(255-this.colorArray[temp_x][temp_y].r)+","+(255-this.colorArray[temp_x][temp_y].g)+","+(255-this.colorArray[temp_x][temp_y].b)+")";
          else
            temp_ctx2d.fillStyle="rgb("+this.colorArray[temp_x][temp_y].r+","+this.colorArray[temp_x][temp_y].g+","+this.colorArray[temp_x][temp_y].b+")";
        }
        temp_ctx2d.fillText(_arr2d[temp_x][temp_y],offset_x+temp_x*dist_hor,offset_y+temp_y*dist_ver);
      }
    }
  }
  convert2dArrayToString(_arr2d){
    if(arguments.length!==1){console.log('[AsciiArt, convert2dArrayToString] bad number of arguments: '+arguments.length);return '';}
    if(_arr2d===null){console.log('[AsciiArt, convert2dArrayToString] _arr2d === null');return '';}
    if(_arr2d===undefined){console.log('[AsciiArt, convert2dArrayToString] _arr2d === undefined');return '';}
    let temp_result = ''; let n=_arr2d[0].length-1;
    for(let temp_y=0;temp_y<_arr2d[0].length;temp_y++){
      for(let temp_x=0;temp_x<_arr2d.length;temp_x++) temp_result+=_arr2d[temp_x][temp_y];
      if(temp_y<n) temp_result+='\n';
    }
    return temp_result;
  }
  printWeightTable(){for(let i=0;i<this.weightTable.length;i++)console.log('['+i+'] '+this.p.char(this.weightTable[i].code)+' '+this.weightTable[i].weight);}
  createWeightTable(){
    let temp_weightTable=[]; let temp_weight, temp_index;
    let temp_w=this.fontSize*5; let temp_h=this.fontSize*3;
    this.resizeGraphicsWorkaround(this.graphics,temp_w,temp_h);
    this.graphics.textFont(this.fontName);this.graphics.textSize(this.fontSize);
    this.graphics.textStyle(this.textStyle);this.graphics.textAlign(this.p.CENTER,this.p.CENTER);
    this.graphics.noStroke();this.graphics.fill(255);
    for(let i=this.range.min;i<=this.range.max;i++){
      this.graphics.background(0);
      this.graphics.text(this.p.char(i),temp_w*0.5,temp_h*0.5);
      this.graphics.loadPixels(); // not sure if we need it really
      temp_weight=0;
      for(let j=0;j<this.graphics.pixels.length;j+=4) temp_weight+=this.graphics.pixels[j]; // r
      temp_weightTable[i-this.range.min]={code:i,weight:temp_weight};
    }
    this.weightTable.splice(0,this.weightTable.length);
    do{
      temp_index=-1; temp_weight=-1;
      for(let i=0;i<temp_weightTable.length;i++){
        if(temp_weightTable[i].weight>=0){
          if(temp_weight<0||temp_weightTable[i].weight<temp_weight){
            temp_weight=temp_weightTable[i].weight;
            temp_index=i;
          }
        }
      }
      if(temp_index>=0){
        this.weightTable[this.weightTable.length]={
          code: temp_weightTable[temp_index].code,
          weight: temp_weightTable[temp_index].weight
        };
        temp_weightTable[temp_index].weight=-1;
      }
    }while(temp_index>=0)
  }
  createColorArray(_equalize){
    let temp_anchor;
    if(this.colorArray===null) this.colorArray = this.createArray2d(this.graphics.width,this.graphics.height);
    if((this.colorArray.length!==this.graphics.width)||(this.colorArray[0].length!==this.graphics.height)){
      this.colorArray=null; this.colorArray = this.createArray2d(this.graphics.width,this.graphics.height);
    }
    let tempMaxLuma=-1; let tempMaxX=0; let tempMaxY=0;
    for(let temp_y=0;temp_y<this.graphics.height;temp_y++){
      for(let temp_x=0;temp_x<this.graphics.width;temp_x++){
        temp_anchor=(temp_y*this.graphics.width+temp_x)*4;
        this.colorArray[temp_x][temp_y]={
          r:this.graphics.pixels[temp_anchor],
          g:this.graphics.pixels[temp_anchor+1],
          b:this.graphics.pixels[temp_anchor+2],
          a:255,
          l:(this.graphics.pixels[temp_anchor]+this.graphics.pixels[temp_anchor+1]+this.graphics.pixels[temp_anchor+2])*0.3333333
        };
        if(this.colorArray[temp_x][temp_y].l>tempMaxLuma){tempMaxLuma=this.colorArray[temp_x][temp_y].l; tempMaxX=temp_x; tempMaxY=temp_y;}
      }
    }
    if((tempMaxLuma>-1)&&_equalize){
      let f=255.0/tempMaxLuma;
      for(let temp_y=0;temp_y<this.graphics.height;temp_y++){
        for(let temp_x=0;temp_x<this.graphics.width;temp_x++){
          this.colorArray[temp_x][temp_y].r=Math.sqrt((this.colorArray[temp_x][temp_y].r*f)/255.0)*255;
          this.colorArray[temp_x][temp_y].g=Math.sqrt((this.colorArray[temp_x][temp_y].g*f)/255.0)*255;
          this.colorArray[temp_x][temp_y].b=Math.sqrt((this.colorArray[temp_x][temp_y].b*f)/255.0)*255;
          this.colorArray[temp_x][temp_y].l=Math.sqrt((this.colorArray[temp_x][temp_y].l*f)/255.0)*255;
        }
      }
    }
  }
  convert(_image,_w,_h,_createColorArray){return this.convert1(_image,_w,_h,_createColorArray);}
  convert1(_image,_w,_h,_createColorArray){
    _w=Math.floor(Math.abs(_w)); _h=Math.floor(Math.abs(_h)); if(_w<1) _w=1; if(_h<1) _h=1;
    if((this.graphics.width!==_w)||(this.graphics.height!==_h)) this.resizeGraphicsWorkaround(this.graphics,_w,_h);
    this.graphics.background(0); // ???
    this.graphics.image(_image,0,0,this.graphics.width,this.graphics.height);
    if(_createColorArray) this.createColorArray(this.equalizeColorArray);
    return this.convert2();
  }
  convert2(){
    if(this.automaticPixelsDataTransfer) this.graphics.loadPixels();
    let temp_result=this.createArray2d(this.graphics.width,this.graphics.height);
    let temp_maxWeight=3*255; // max r + max g + max b (ignore alpha)
    let temp_range = this.weightTable.length-1; let temp_weight, temp_anchor;
    for(let temp_y=0;temp_y<this.graphics.height;temp_y++){
      for(let temp_x=0;temp_x<this.graphics.width;temp_x++){
        temp_anchor=(temp_y*this.graphics.width+temp_x)*4;
        temp_weight=(this.graphics.pixels[temp_anchor]+this.graphics.pixels[temp_anchor+1]+this.graphics.pixels[temp_anchor+2])/temp_maxWeight;
        temp_weight=Math.floor(temp_weight*temp_range);
        if(this.invertBrightness) temp_weight=temp_range-temp_weight;
        temp_result[temp_x][temp_y] = this.p.char(this.weightTable[temp_weight].code);
      }  
    }
    if(this.automaticPixelsDataTransfer) this.graphics.updatePixels();
    return temp_result;
  }
}
								

									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.");
    }
}
								

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