If you're seeing this message, it means we're having trouble loading external resources on our website.

Ha webszűrőt használsz, győződj meg róla, hogy a *.kastatic.org és a *.kasandbox.org nincsenek blokkolva.

Fő tartalom

Egyetlen részecske

Mielőtt elkészítenénk egy teljes ParticleSystem-et (részecskerendszert), el kell készítenünk egy egyetlen részecskét leíró objektumot. A jó hírünk az, hogy ezt már elkészítettük. A Mover objektumunk az Erők fejezetből tökéletes sablon lesz. A mi számunkra a részecske olyan független tárgy, mely a rajzvásznon mozog. Van helyzete, sebessége, és gyorsulása, van konstruktora, ahol a változókat inicializálja, függvényei, amivel megrajzolja magát (display()), és amivel módosítja (update()) a helyzetét.
// Egy egyszerű részecske objektum
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
};

Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
};

Particle.prototype.display = function() {
  stroke(0, 0, 0);
  fill(175, 175, 175);
  ellipse(this.position.x, this.position.y, 8, 8);
};
Ennél egyszerűbb a részecske nem is lehetne. Innen számos irányba elindulhatunk. Hozzáadhatunk egy applyForce() metódust a részecske viselkedésének befolyásolására (egy elkövetkezendő példában pont ezt fogjuk tenni). Hozzáadhatunk változókat. ami meghatározza a színét és alakját , vagy használhatunk egy image() függvényt a részecske megrajzolásához. Egyenlőre most koncentráljunk egy másik részlet, az élettartam hozzáadására.
A tipikus részecskerendszerekhez tartozik egy kibocsátónak nevezett valami. A kibocsátó (emitter) a részecskék forrása, mely vezérli a részecskék kezdeti beállításait, helyzetét, sebességét stb. Egy kibocsátó kibocsáthat egyszeri részecske-özönt, vagy folyamatosan onthatja a részecskéket, vagy mindkettőt is teheti. A tipikus implementációban, mint amilyen ez is, a részecske megszületik a kibocsátóban, de nem marad fenn örökre. Ha örökre fennmaradna, akkor egy idő után a program meghalna, mivel az idő múlásával a részecskék száma nagyon megnőne. Ahogy új részecskék születnek, idővel meg is kell halniuk. Ez a részecskék végtelen folyamának illúzióját adja, de ezt a program teljesítménye nem sínyli meg.
Több módon is meghatározhatjuk, mikor haljon meg egy részecske. Például ha kontaktusba kerül egy másik objektummal, vagy ha egyszerűen lekerül a rajzvászonról. Az első Particle objektumunkhoz egyszerűen hozzáadunk egy timeToLive (élettartam) tulajdonságot. Ez időzítőként fog működni, 255-től visszafelé számolva 0-ig, amikor is „halottnak” fogjuk tekinteni a részecskét. Ennek megfelelően a Particle objektumot az alábbi módon bővítjük:
// Egy egyszerű Particle objektum
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
  this.timeToLive = 255;
};

Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.timeToLive -= 2;
};

Particle.prototype.display = function() {
  stroke(255, 255, 255, this.timeToLive);
  fill(127, 127, 127, this.timeToLive);
  ellipse(this.position.x, this.position.y, 8, 8);
};
Kényelmi szempontból választottuk 255-öt a timeToLive értékének, és számoltunk visszafelé 0-ig. Így a timeToLive értékét felhasználhatjuk az ellipszis áttetszőségének alfa értékéhez. Amikor a részecske „halott”, a rajzvásznon elhalványul az alakja.
A timeToLive tulajdonság hozzáadása mellett még szükségünk lesz egy metódusra – egy olyan függvényre, amit le lehet kérdezni (igaz vagy hamis választ várva), és ami megmutatja, hogy a részecske él-e, vagy halott. Ez jól fog jönni, amikor majd megírjuk a ParticleSystem objektumot, aminek a részecskék összességének vezérlése lesz a feladata. Ennek a függvénynek a megírása meglehetősen egyszerű; csupán annyi várunk tőle, hogy igaz értéket adjon vissza, ha a timeToLive értéke kisebb, mint 0.
Particle.prototype.isDead = function() {
  return this.timeToLive < 0;
};
Mielőtt továbbmegyünk, hogy sok részecskét készítsünk, érdemes megállni egy percre, és ellenőrizni, hogy a részecskénk megfelelően működik-e. Készítettünk egy vázlatot egyetlen Particle objektummal. Az alábbiakban látható a teljes kód két kis kiegészítéssel. Kényelmi szempontok miatt hozzáadtunk egy run() metódust, ami meghívja az update() és display() metódusokat. Ezen kívül a részecskét véletlenszerű kezdeti sebességgel és lefelé haladó gyorsulással indítjuk (a gravitáció szimulálásához). (A programban található megjegyzések: 1. sor: Dan Shiffman, natureofcode.com példája alapján; 3. sor: Egy részecske objektum; 29. sor: Még mindig hasznos a részecske?)
Most, hogy már megvan az egyedi részecskét leíró objektum, készen állunk a következő nagy lépés megtételére. Hogyan tudunk sok részecskét vezérelni, amikor azt sem tudjuk, hogy egy adott időpillanatban hány van belőlük?

Szeretnél részt venni a beszélgetésben?

Még nincs hozzászólás.
Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.