A rendszer a node-ok és a kód mögött

Becsült olvasási idő: 8–10 perc

Kulcsfogalmak: input · event · data · rule · state · render · output Az órán cables.gl-lel indultunk, majd ugyanazt a működést JavaScriptben írtuk le. A fontos felismerés:

A node nem maga a rendszer. A node csak egy módja annak, hogy leírjuk a rendszert.

A Signal Lab működése:

INPUT
  ↓
EVENT + DATA
  ↓
RULE / PROCESS
  ↓
STATE
  ↓
RENDER
  ↓
OUTPUT

Input

Az input a forrás vagy csatorna, ahonnan a rendszer információt kaphat. Lehet pointer, billentyűzet, mikrofon, kamera, szenzor, hálózati adat vagy egy másik program.

A Signal Lab egyik inputja a pointer.

Event

Az event egy történés. Például:

pointermove
click
keydown
resize

A pointer önmagában inputforrás. A pointermove azt jelenti, hogy történt valami ezzel az inputtal.

Data

Az eseményhez adat tartozhat. Egy pointermove eseményobjektum például tartalmazhatja ezeket:

event.clientX
event.clientY
event.target
event.timeStamp

Ezért ne mossuk össze a három fogalmat:

INPUT = pointer
EVENT = pointermove
DATA  = clientX, clientY, ...

Az input a forrás, az event a történés, a data pedig az információ, amit a történésről megkapunk.

Rule / Process

A beérkező adatot valamilyen szabály alakítja át. Például:

mappedSize = mapRange(pointerX, 0, bounds.width, MIN_SIZE, MAX_SIZE);

Itt a pointer X-koordinátájából vizuális méret lesz. A szabály lehet egyetlen szorzás, egy mapRange(), vagy akár egy összetett képfeldolgozó pipeline.

State

A state a rendszer aktuális állapota: olyan értékek, amelyeket megtartunk, és később más működések használnak.

let pointerX = 0;
let pointerY = 0;
let mappedSize = 120;
let mappedRoundness = 50;

Nem attól lesz valami state, hogy let változóban van. A let szintaxis; a state rendszerszerep.

Render

A render az aktuális state-et megjeleníthető változássá alakítja.

function render() {
  signal.style.left = `${pointerX}px`;
  signal.style.top = `${pointerY}px`;
  signal.style.width = `${mappedSize}px`;
  signal.style.height = `${mappedSize}px`;
}

A JavaScript itt DOM/CSS értékeket módosít. Ezután a böngésző saját rendering rendszere állítja elő a látható pixeleket.

STATE → render() → DOM / CSS → browser rendering → visible output

Cables.gl → JavaScript

cables.gl             JavaScript
Mouse             →   pointer event
X / Y             →   event.clientX / clientY
Variable          →   const / let
MapRange          →   mapRange()
Transform         →   style.left / style.top
Circle radius     →   style.width / style.height
Button            →   click event
Trigger           →   esemény / végrehajtási kapcsolat

A konkrét node vagy függvény neve változhat. A rendszerlogika újra és újra visszatér.

Ellenőrző kérdések

1. Mi a különbség input, event és data között?
2. Miért nem ugyanaz a let és a state fogalma?
3. Mit módosít közvetlenül a render() a Signal Labban?
4. Egy mikrofonos installációban mi lehet input, data, rule és output?