02 - Vektory

Previous01.5 - Github Pages Next03 - Sila

Last updated 25 days ago

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 je orientovaná úsečka (v rovine alebo priestore) obsahujúca naraz smer a magnitúdu (dĺžku)

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:

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

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:

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:

do zduplikuj a premenuj! ;)
pridaj do konštruktora vektor: this.acceleration = createVector(__, __)
aplikuj zrýchlenie na rýchlosť: velocity.add(acceleration);
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:

Zdoje a ďaľsie informácie

Previous01.5 - Github Pages Next03 - Sila

Last updated 25 days ago