05 - Particle Systems
Začalo sa to v '80 rokoch. Vtedy bol definovaný pojem "particle system"
Od vtedy sa s ním stretávame všade tam, kde sa nám hodí simulácia vody, ohňa, dymu a podobne... Od filmov až po default vizualizér v iTunes (mimochodom, pôvodne napísaný prave v processingu)
Na vystavanie vlastného "particle" systému nám tentokrát bude stačiť takmer úplne kód z predchádzajúcich lekcií. Tentokrát získané znalosti ideme zúročiť.
Jedna častica
Začnime so sytémom obsahujúcim "jednu časticu".
Tentokrát začnime s prázdnym sketchom. A pridajme doň poslednú verziu triedy Mover. Avšak odteraz ju premenujeme na Particle
Všetky potrebné dáta a metódy tam už máme!
position
velocity
acceleration
display()
update()
A poďme jeden particle zobraziť + aplikovať gravitačnú silu:
let particle;
function setup() {
createCanvas(400, 400);
particle = new Particle(width/2, 20, 2);
}
function draw() {
background(220);
particle.update();
particle.display();
let gravity = createVector(0, 0.1);
particle.applyForce(gravity);
}Fajn. Zobrazí sa jeden bod. A padne dole.
Pre zjednodušenie tentokrát priamo v konštruktore v triede Particle nastavme náhodnú velocity.
this.velocity = createVector(random(-1, 1), random(-2, 0));Ok... vyletí hore a potom dole.
Čaro particle systému tkvie práve v tom, že tu nastáva "flow of particles". Stále pribúdajú nové.
Avšak aby to by mohlo spôsobiť, že časom sa pamäť zaplní a/alebo výpočet počítať prestane zvládať.
Kľúčovou novou vlastnosťou je zavedenie "životnosti" objektu.
Keď sa lifespan minie, dané miesto môžeme v pamäti uvoľniť.
Poďme si to teraz aplikovať na náš príklad s jednou časticou.
// class Particle
class Particle {
constructor(x, y, m) {
//..
this.lifespan = 255;
}
update() {
//..
this.lifespan -= 2;
}
display() {
//..
fill(0, this.lifespan);
//..
}
isDead() {
return (this.lifespan < 0);
}
}Sample sketch
Použi vlastný sketch alebo výchádzaj z tohoto:
Úloha 1
V sketchi v metóde draw kontroluj, či častica nieje kaput pomocou metódy isDead()
Ak sa jej čas naplnil, zmeň pozadie na červené
Úloha 2
Miesto červeného pozadia vytvor opäť novú časticu.
Pole častíc
Ok, možno si poviete... toto sme predsa užm robili.
Miesto let particle bude teraz let particles = [] a prepísať particle -> particles a pridať for-cyklus.
Takmer... ale je tu jedno ALE. To ale súvisí s tým, že chceme mať prúd častíc - nové pribúdajú a staré sa mažú.
Pozrime sa, aké metódy máme k dispozícii pre Array() v javascripte:
Úloha 3
Uprav predošlú úlohu tak, aby pracovala s poľom particles
V každe iterácií draw() pridaj ďaľší particle
Hint 1: Pre pridávanie particles môžeš použiť
particles.push(new Particle(width / 2, 50));Hint 2: Pre mazanie môžeš použiť
particles.splice(i, 1); // i = index v poli, ktorý sa zmaže. "1" označuje počet zmazaných prvkov od daného indexuSample sketch
Použi vlastný sketch alebo výchádzaj z tohoto:
Úloha 4
Pridaj v každom kroku viac prvkov naraz (použi for cyklus)
Úloha 5
Skús použiť vlastný tvar - tak aby bol orientovaný. Napr. "fontánku"
Úloha 6:
Vo velocity namiesto random() použi randomGaussian()
+ Bonus: export GIF
function keyPressed() {
// this will download the first 5 seconds of the animation!
if (key === 's') {
saveGif('mySketch', 3);
}
}Dedičnosť v objektoch
Čo spraviť, ak chceme emitovať rôzne prvky?
Jedna zo skvelých možností, ktoré nám triedy umožňujú, je práve dedičnosť.
Je to v niečom podobné, ako napr. pri klasifikácií vtáctva:
Majú rovnaké atribúty:
zobák
krídla
2 × nohy
perie
A tiež zdielajú mnohé schopnosti. Vedia:
lietať
jesť
spať
Avšak každý druh vyzerá trocha inak - i keď s ostatnými zdiela hore vymenované atribúty a schopnosti. Niektoré vedia navyše aj plávať, iné loviť alebo spievať.
Pre našu situáciu by sme povedali, že máme triedu "Vták" a pod-triedy (resp. trieda -> rad -> čelaď -> druh)
Podobný vzťah si vieme definovať pri triedach. Kde vieme vytvoriť novú triedu (napr. SparkleParticle ktorá rozširuje triedu Particle)
Kľúčové sú tu dve slová: extends a super()
Príklad:
class SparkleParticle extends Particle {
constructor(x, y, m) {
super(x, y, m);
}
display() {
// vlastna definicia
}
}Úloha 7:
Priprav obálku/krabičku s prekvapením. Po rozkliknutí z nej vyletia konfety.
konfety sú rôznych tvarov a farieb (vytvor nové triedy, ktoré rozširujú trietu
Particle)v obálke/krabičke je ich presne definovaný obmedzený počet (napr. 1000) - ktorý sa priebežne míňa (a časom určite minie)
Príklad:
Prezentácia
Odprezentované príklady:
Zdoje a ďaľsie informácie
Last updated