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)

MagnetosphereRobert Hodgin

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:

p5.js Web Editor

Ú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:

JavaScript Array Methods

Ú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 indexu

Sample sketch

Použi vlastný sketch alebo výchádzaj z tohoto:

p5.js Web Editor

Ú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:

https://editor.p5js.org/dobsovicmartin/sketches/2j8hBomBu https://editor.p5js.org/dobsovicmartin/sketches/Ai-P7HuEg https://editor.p5js.org/dobsovicmartin/sketches/SCs_f-3q4 https://editor.p5js.org/dobsovicmartin/sketches/2nn-fsESx

Zdoje a ďaľsie informácie

An Algorithm for Particle Systems with CollisionsGorilla Sun

Programming a Particle System with ChatGPTGorilla Sun

Simple Particle System