02 - Vektory

Ako bolo spomínané už v úvode, tento kurz sa snaží dívať na prírodné procesy skrze kód. Prvá časť je o jednoduchej fyzike. Jablko, padajúce zo stromu / kyvadlo / rotácia odkopnutej lopty. Takmer na všetko v nasledujúcich seminároch budeme využívať jeden základný blok: vektor.

Čo je to vektor?

Kde už ste sa stretli s pojmom vektor? Aké má významy? A ako to súvisí s naším vektorom? Vektorová grafika

Vektorová vakcína

Preklad?

Nás však po zvyšok kurzu bude zujímať najmä "geometrický vektor"(Euclidean vector)

Vektor môžeme chápať ako inštrukciu ako s dosať z bodu A do bodu B. Obsahuje vždy smer (ktorýmšípka ukazuje) a magnitúdu (dĺžka šípky).

Aplikácia pre naše projekty

Pamätáte si na začiatok? Keď sme ako jeden z prvých sketchov (4. lekcia) na tému pohyb modelovali bouncing ball aka "dvd screen saver"?

Otvorme si nasledujúci sketch:

p5.js Web Editor

V kóde vidíme, že v 2d priestore sa nám hýbe lopta, ktorá ma nasledujúce premenné:

Ak by sme chceli kód ešte zdokonaliť, vieme pridať premenné

Je očividné, že každá táto vlastnosť potrebuje pre svoju definíciu dve premenné: X a Y (v 3D prirestore aj Z).

Avšak s použitím vektorov vieme zredukovať počet potrebných premenných na polovicu. Napríklad namiesto

let x;
let y;
let xspeed;
let yspeed;

nám stačí len

let position;
let speed;

Pre začiatok môžeme vnímať vektor, ako typ premennej, ktorá si vie uložiť naraz X aj Y. Avšak tam to zďaleka nekončí - v kombinácii s met'dami pre vektorovú matematiku nám vektory veľmi pomôžu pri programovaní prírodných procesov a jednoduchej fyziky.

p5.Vector

Azda lepšie, než pozíciu X/Y je predstaviť si, že vektor je recept, koľko krokov ktorým smerom sa posunúť.

Nepovedl tu niekto, že definujeme "pozíciu" ako vektor?

Môžeme si predstaviť, že lokácia je vlastne vektor - návod ako sa dostať na dané miesto z bodu [0,0]

Definícia p5.Vector

p5.Vectorp5xjs

Bouncing ball + vectors

Prepíš kód z Example 1.1: Bouncing ball pomocou vektorov:

let position = createVector(_, _);
let velocity = createVector(_, _);

Pre pohyb vieme aplikovať recept: new position = position+velocity

Bez vektorov asi takto:

x = x + xspeed;
y = y + yspeed;

S vektormi?

Napr. position = position + velocity; nám fungovať nebude. Budeme potrebovať použiť jednu z mnohých zabudovaných metód: add() resp p5.Vector.add()

Pohyb + hýbateľ (mover)

Od teraz bude práca s vektormi patriť medzi základné súčasti kódu. Možno na prvý pohľad môžu pôsobiť skôr ako komplikácia, než zjednodušenie - avšak po zapojení vektorovej matematiky zistíme, že nám elegantne umožňia vytvárať komplexné prostredia, ktoré by sme bez nich modelovali veľmi veľmi ťažko.

Základnou jednotkou nám bude nová trieda "Mover()" ktorú budeme používať aj v iných projektoch. Poďme si ju zadefinovať ako samostatný súbor. To sú kroky, ako na to:

Výsledný sketch pre ďaľšie použitie nájdeme tu:

p5.js Web Editor

Pre pochopenie pohybu je dôležité ale uvedomiť si, že rýchlosť nikdy nepríde sama od seba. A že je len výsledkom pôsobenia zrýchlenia. Neskôr si ukážeme, že je to ešte zložitejšie. Nateraz začnime s pridaním ďaľšieho vektoru do našej triedy - acceleration.

Veľmi zjednodušene sa (...) dá povedať, že zrýchlenie je zmena rýchlosti za jednotku času. https://sk.wikipedia.org/wiki/Zrýchlenie

Pri pohybe môžeme sledovať niečo ako "trickle-down" efekt (nie doslovne možnop preložiť ako "kaskádový efekt"?): Zrýchlenie mení rýchlosť. A rýchlosť mení poíciu objektu. Pre algoritmy pracujúce s pohybom je práve kumšt správne "nastaviť pravidlá" pre zrýchlenie. Zvyšok sa už doráta sám... Teraz čas na rýchlu rozcvičku. Otvor sketch hore (Motion 101 - Mover) a následne:

1. do zduplikuj a premenuj! ;)

2. pridaj do konštruktora vektor: this.acceleration = createVector(__, __)

3. aplikuj zrýchlenie na rýchlosť: velocity.add(acceleration);

4. pre istotu nastav limit pre maximálnu rýchlosť: this.velocity.limit(10);

Ak ste tu, možno ste narazili na dve "nejasnosti". Prvá je, ako nastaviť inicializačnú hodnotu? A čo sa má diať so zrýchlením?

Záleží od toho, aké správanie chceme zrýchlením docieliť... Poďme vyskúšať rýchlo zopár scenárov:

Zadania / Recepty

• lineárne zrýchlenie (bez alebo s odrážaním od stien)

• náhodné zrýchlenie

• zrýchlenie za myšou

• bouncing ball v 3D

• zrýchlenie pomocou perlin noise

Pole hýbateľov

Pre kliknutie myšou pridaj ďaľsí objekt na scénu.

for (let i = 0; i < balls.length; i++) {
    balls[i].update();
    balls[i].checkEdges();
    balls[i].show();
}

Kodárium

Príklad / inšpirácia:

p5.js Web Editor

p5.js Web Editor

Zdoje a ďaľsie informácie