Particles.js: Bewegung und Interaktion

() translation by (you can also view the original English article)

Im letzten Particles.js Tutorial haben Sie gelernt, wie Sie Partikel mit gewünschten Formen und Größen erstellen. Während es sich gut anfühlte, zu sehen, wie sich alle Teilchen bewegten, gibt es noch Raum für Verbesserungen. Derzeit gibt es keinerlei Wechselwirkungen zwischen verschiedenen Teilchen. Sie gehen einfach aneinander vorbei, als ob die anderen Teilchen nicht existieren würden.

In diesem Tutorial erfahren Sie, wie Sie Partikel so bewegen können, wie Sie möchten, indem Sie ihre Richtung, Geschwindigkeit und vieles mehr steuern. Außerdem erfahren Sie mehr über verschiedene Interaktionsmodi und Events.

Steuerung der Partikelbewegung

Nicht alle Teilchen in jedem Partikelsystem bewegen sich in zufälligen Richtungen. Selbst wenn sie es tun, sind einige andere Kräfte im Einsatz. Zum Beispiel können sie sich beschleunigen, wenn sie sich einander nähern oder nach Kollisionen zurückprallen. Alle diese Optionen können durch verschiedene Eigenschaften gesteuert werden, die unter move verfügbar sind.

Wenn Sie nicht möchten, dass sich die Partikel überhaupt bewegen, können Sie dies tun, indem Sie enable auf false setzen. Sie können die Geschwindigkeit von Partikeln mithilfe des Parameters speed angeben. Um jedes Partikel mit einer zufälligen Geschwindigkeit zu bewegen, setzen Sie random auf true. Um sie hingegen in zufällige Richtungen zu verschieben, setzen Sie den Wert direction auf none.

Früher oder später wird sich mindestens eines der Teilchen an die Grenze unseres Systems bewegen. Ob dieses Partikel zurückprallt oder aus einer anderen Richtung kommt, entscheidet der Wert des out_mode Parameters. Wenn der Wert auf out gesetzt ist, bewegen sich die Partikel aus der Leinwand heraus. Wenn er auf bounce eingestellt ist, prallen die Partikel zurück, nachdem sie die Grenze erreicht haben.

Es scheint ein wenig unnatürlich, wenn Teilchen einander ohne Änderung der Geschwindigkeit passieren. Um die Partikelgeschwindigkeit bei jeder Kollision zu ändern, können Sie bounce auf true setzen. Interessanterweise funktioniert dies nur, wenn entweder die line_linked oder die attraction-Eigenschaft aktiviert ist. Partikel kehren ihre Richtung jedes Mal um, wenn sie kollidieren, auch wenn die Kollision nicht frontal erfolgt.

Abschließend möchte ich auf die Anziehungskraft eingehen. Sobald Sie die attraction-Eigenschaft aktivieren, ändern die Teilchen ihre Geschwindigkeit, wenn sie sich in der Nähe anderer Teilchen befinden. Die Änderung kann je nach Wert anderer Parameter positiv oder negativ sein. Die Anziehungskraft in jede Richtung ist umgekehrt proportional zum Wert der jeweiligen Parameter, rotateX und rotateY. Die Standardwerte sind sehr hoch, um eine spürbare Anziehungskraft zu beobachten. Wenn Sie andererseits ihre Werte zu niedrig einstellen, werden die Partikel nach einiger Zeit sehr hohe Geschwindigkeiten erhalten.

Die JSON, die für die Bewegung der oben genannten Teilchen verantwortlich ist, ist:

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

Sie sollten bedenken, dass sich die Partikel überhaupt nicht bewegen, wenn Sie gleichzeitig straight auf true und direction auf none setzen.

Interaktionsevents und -modi

So weit so gut, aber Sie könnten sich fragen, ob die Teilchen auch mit dem Benutzer interagieren können, und wenn sie können, wie sie interagieren würden.

Um Ihre erste Frage zu beantworten, können die Partikel mit dem Benutzer interagieren. Partikel.js können auf drei Ereignisse reagieren: hover, click und resize. Zunächst sollten Sie jedoch wissen, dass die Ereignisse auf dem Canvas oder im Fenster selbst erkannt werden können, indem Sie den Wert des detect_on Parameters festlegen. Jetzt werden alle diese Ereignisse ausgelöst, wenn Sie den Canvas/das Fenster bewegen, klicken oder die Größe ändern.

Wenn Sie die resize auf true setzen, passen sich die Partikel im verbleibenden Raum ohne Verzerrung an. Wenn die resize auf false gesetzt ist, ändern die Partikel ihre Form, um Änderungen in der Leinwandgröße zu berücksichtigen.

"detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
    "resize": true
}

Sie fragen sich wahrscheinlich, was der mode-Parameter im Codeausschnitt oben macht. Dieser Parameter definiert, wie die Partikel mit dem Benutzer interagieren würden. Die Bibliothek hat fünf Interaktionsmodi definiert. Sie sind grab, bubble, repulse, push und remove.

Der grab-Modus erstellt Verbindungslinien zwischen Ihrem Mauszeiger oder Klickpunkt und Partikeln in der Nähe innerhalb einer bestimmten Entfernung, die Sie selbst festlegen. Dieser Modus funktioniert nur mit dem Hover-Event. Der JSON unten zeichnet eine Linie mit Deckkraft 1, um alle Partikel innerhalb von 800 px zu verbinden.

"grab": {
  "distance": 800,
  "line_linked": {
    "opacity": 1
  }
}

Der bubble-Modus ändert die Größe und Deckkraft aller Partikel, die sich für eine von Ihnen bestimmte Dauer innerhalb einer bestimmten Entfernung befinden. Der repulse-Modus lässt das Partikel von der Position des Klicks weggehen. Beide Modi können entweder dem hover-Event oder click-Event hinzugefügt werden. Die Dauer ist in beiden Fällen nur für Klick-Events anwendbar.

"bubble": {
  "distance": 600,
  "size": 60,
  "duration": 0.1,
  "opacity": 1
},
"repulse": {
  "distance": 500,
  "duration": 0.5
}

Sie sollten versuchen, verschiedene Parameter zu ändern, um die Demo noch besser zu machen.

Der push-Modus fügt bei jedem Mausklick eine bestimmte Anzahl von Partikeln hinzu. Die Partikel werden an der Stelle des Klicks hinzugefügt. In ähnlicher Weise entfernt der remove-Modus Partikel von der Leinwand. Die zu entfernenden Partikel werden nach dem Zufallsprinzip bestimmt.

"push": {
  "particles_nb": 3
},
"remove": {
  "particles_nb": 1
}

Letzte Gedanken

Die drei Tutorials in dieser Serie behandelten alles, was Particles.js zu bieten hat. Ich habe auch hin und wieder ein paar Dinge erwähnt, damit man sich später nicht über Probleme wie Teilchen, die nicht abprallen bzw. abprallen den Kopf zerbrechen muss.

Wenn Sie mehr über alle von uns besprochenen Parameter erfahren möchten, lesen Sie bitte die Dokumentation dieser Bibliothek. Wenn Sie darüber hinaus irgendwann stecken bleiben, während sie die Bibliothek benutzen oder etwas sich nicht so verhält, wie es sollte, möchte ich vorschlagen, dass Sie den Quellcode lesen, um zu sehen, was unter der Haube vor sich geht.