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

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Ein einzelnes Partikel

Bevor wir ein gesamtes ParticleSystem erschaffen können, brauchen wir ein Objekt, das ein einzelnes Partikel beschreibt. Die gute Neuigkeit ist: Wir haben das schon gemacht. Unser Objekt Mover aus dem Abschnitt Kräfte dient uns als perfekte Vorlage. Ein Partikel ist ein Körper, der sich unabhängig über den Bildschirm bewegt. Er hat die Eigenschaften location, velocity und acceleration, einen Konstruktur zur Initialisierung dieser Variablen, und die Funktionen display(), um sich anzuzeigen, sowie update(), um seinen Ort zu aktualisieren.
// Ein einfaches "Particle"-Objekt
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);
};
Einfacher kann ein Partikel nicht werden. Von diesem Punkt an können wir unterschiedliche Richtungen einschlagen. Wir können eine Methode applyForce() hinzufügen, die das Verhalten des Partikels beeinflusst (genau das werden wir in einem späteren Beispiel auch tun). Wir können Variablen hinzufügen, um seine Farbe und Form zu beschreiben, oder das Partikel mithilfe von image() zeichnen. Im Moment wollen wir uns aber nur auf ein zusätzliches Details konzentrieren: die Lebensdauer.
Typische Partikelsysteme enthalten etwas, das Emitter genannt wird. Der Emitter ist die Quelle der Partikel und steuert ihre initialen Einstellungen, wie etwa den Ort und die Geschwindigkeit. Ein Emitter kann eine Ladung Partikel ausstoßen, oder einen kontinuierlichen Strom, oder beides. Wichtig ist, dass bei einer typischen Implementierung wie dieser ein Partikel im Emitter geboren wird, aber nicht ewig lebt. Wenn es ewig leben würde, würde das Programm irgendwann zwangsläufig zum Stillstand kommen, da die Partikelanzahl mit der Zeit so groß wird, dass sie nicht mehr zu handhaben ist. Wenn neue Partikel geboren werden, müssen aber alte Partikel sterben. Dies erzeugt die Illusion eines endlosen Stroms von Partikeln, und die Performance unseres Programms wird nicht eingeschränkt.
Es gibt viele verschiedene Arten, zu entscheiden, wann ein Partikel sterben muss. Zum Beispiel könnte es mit einem anderen Objekt in Kontakt kommen, oder es könnte einfach nur den Bildschirm verlassen. Bei unserem ersten Objekt Particle fügen wir aber nur eine Eigenschaft timeToLive hinzu. Sie wird als Timer dienen, der von 255 bis 0 herunterzählt. Bei 0 erklären wir das Partikel für "tot". Wir erweitern also das Objekt Particle wie folgt:
// Ein einfaches "Particle"-Objekt
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);
};
Wir legen unsere timeToLive auf 255 fest und zählen bis 0 herunter, weil dies praktisch ist. Mit diesen Werten können wir timeToLive auch als Alpha-Transparenzwert für die Ellipse verwenden. Wenn das Partikel “tot” ist, ist es auch auf dem Bildschirm komplett verblasst.
Wenn wir die Eigenschaft timeToLive dazunehmen, brauchen wir auch eine zusätzliche Methode: eine Funktion, über die abgefragt werden kann (als Antwort "true" oder "false"), ob ein Partikel tot oder lebendig ist. Dies wird sich als nützlich erweisen wenn wir das Objekt ParticleSystem schreiben, bei dem es darum geht, die Liste an Partikeln zu verwalten. Es ist ziemlich einfach, diese Funktion zu schreiben. Sie muss nur true zurückgeben, wenn der Wert von timeToLive kleiner als 0 ist.
Particle.prototype.isDead = function() {
  return this.timeToLive < 0;
};
Bevor wir zum nächsten Schritt übergehen, bei dem wir viele Partikel erzeugen, sollten wir uns einen Moment ansehen, ob unser Partikel richtig funktioniert. Wir erzeugen also eine Zeichnung mit einem einzelnen Objekt Particle. Hier ist der komplette Code, mit zwei kleinen Änderungen. Wir fügen eine praktische Methode namens run() hinzu, die einfach nur update() und display() für uns aufruft. Zusätzlich dazu geben wir dem Partikel eine zufällige Startgeschwindigkeit sowie eine Beschleunigung nach unten, um die Schwerkraft zu simulieren.
Nun haben wir ein Objekt, das ein einzelnes Partikel beschreibt, und können uns dem nächsten großen Schritt widmen. Wie verfolgen wir viele Partikel, wenn wir nicht genau sicherstellen können, wie viele Partikel es zu einer bestimmten Zeit gibt?

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.