Particles.js: Steuern der Partikelanzahl und -form

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

Im vorherigen Particles.js-Tutorial wurden verschiedene Funktionen, die die Bibliothek bietet, kurz erläutert und gezeigt, wie Sie mit der Bibliothek beginnen. In diesem Tutorial werde ich alle Aspekte von Particles.js ausführlich behandeln, die sich mit dem physischen Erscheinungsbild der Teilchen befassen.

Anzahl, Farbe und Deckkraft

Das erste, mit dem wir uns befassen werden, ist die Anzahl und Dichte der Teilchen. Die Dichte bestimmt die Anzahl der Partikel, die in einem bestimmten Bereich zusammengepackt werden. Sie ist standardmäßig aktiviert, wobei value_area auf 800 festgelegt ist. Hier ist die JSON, mit der Sie die Anzahl der Partikel steuern können:

"number": {
  "value": 50, 
  "density": {
    "enable": true,
    "value_area": 500
  }
}

Wenn Sie enable unter dem Eintrag density auf false setzen, ist die Anzahl der angezeigten Partikel genau 50. Durch die Verdoppelung des Wertes value_area verringert sich die Anzahl der Partikel um etwa die Hälfte.

Es gibt drei Möglichkeiten, die Farben der Partikel festzulegen. Sie können die Farben im HEX-Format, RGB-Format oder HSL-Format festlegen. Aufgrund eines Fehlers in der Bibliothek funktionieren RGB- und HSL-Format nur, wenn Sie den Standardfarbwert aus der Bibliothek entfernen.

Wenn Sie die Partikelfarbe nach dem Zufallsprinzip einstellen möchten, können Sie dies mit dem Wert "random" tun. Um die Farbe zufällig aus einer Liste von Farben festzulegen, müssen Sie die Farben im HEX-Format als Array angeben. Hier ist die JSON, um Farben für Partikel festzulegen:

"color": {
  "value": "#fff" //set white in HEX (We are using this version)
  "value": {r:255, g:255, b:255} //set white in RGB
  "value": {h:0, s:100%, l:100%} //set white in HSL
  "value": ["#f00", "#0f0", "#00f"] //set red, green and blue randomly
  "value": "random" //set colors randomly
}

Die opacity-Eigenschaft gibt Ihnen viel Kontrolle. Sie können es auf einen genauen Wert festlegen oder zufällige Werte verwenden, indem Sie "random" auf true setzen. Nicht nur das, sondern Sie können auch die Deckkraft der Partikel animieren. Hier ist der JSON-Code für die opacity-Eigenschaft:

"opacity": {
  "value": 1,
  "random": true, // Set to false in our case
  "anim": {
    "enable": true,
    "speed": 8,
    "opacity_min": 0.4,
    "sync": false
  }
}

Wenn Sie "sync" auf true setzen, wird die Deckkraft aller Partikel gleichzeitig animiert. Die Verwendung eines Werts von 0,4 für "opacity_min" stellt sicher, dass die Deckkraft der Partikel während der Animation nie unter 0,4 fällt. Hier ist eine Demo mit Sternen, die sich durch den Raum bewegen. Versuchen Sie, die Anzahl, Farbe oder Deckkraft der Partikel zu ändern, um deren Wirkung zu sehen.

Form und Größe

Particles.js hat fünf verschiedene Werte, um grundlegende Formen zu erstellen. Eine einfache Form wie circle erzeugt ein kreisförmiges Teilchen, triangle erzeugt dreieckige Partikel und edge erzeugt Quadrate. Sie können den Wert polygon verwenden, um ein nb_sides seitiges Polygon zu erstellen, in dem Sie den Wert nb_sides angeben. Um tatsächliche Stern-Formen zu erstellen, können Sie den Shape-Typ auf star setzen. Der stroke-Parameter fügt einen Umriss einer bestimmten Farbe und Breite um alle Partikel hinzu. Der JSON-Code unten erstellt Sechsecke.

"shape": {
  "type": "polygon",
  "stroke": {
     "width": 4,
     "color": "#fff"
  },
  "polygon": {
     "nb_sides": 6
  }
}

Es ist auch möglich, Bilder anstelle von Grundformen anzuzeigen. Zuerst müssen Sie den Shape-Typ als image angeben. Danach können Sie die Bildquelle und die gewünschte Höhe und Breite festlegen. Es lohnt sich, daran zu denken, dass Breite und Höhe nicht die Größe der Bildteilchen bestimmen, sondern ihr Seitenverhältnis. Hier ist einige JSON, um Partikel mit Asteroidenbildern zu erstellen:

"shape": {
  "type": "image",
  "image": {
     "src": "img/football.png", // Set image path.
     "width": 1,   // Width and height don't decide size.
     "height": 1   // They just decide aspect ratio.
  }
}

Die Bibliothek ermöglicht es Ihnen auch, mehrere Formen miteinander zu mischen. Sie können z. B. entscheiden, Kreise, Quadrate und Sechsecke gleichzeitig zu erstellen. In diesem Fall müssen Sie nur ein Array mit all diesen Formen übergeben.

1	"type": ["circle","edge","polygon"]

Die Size-Eigenschaft verfügt über alle Optionen der Deckkrafteigenschaft. Sie können die Größe nach dem Zufallsprinzip festlegen und die Größe einzelner Partikel animieren. Sehen Sie sich den folgenden JSON-Code genau an.

"size": {
  "value": 25, 
  "random": true,
  "anim": {
    "enable": true,
    "speed": 20,
    "size_min": 10,
    "sync": false
  }
}

Wenn Sie random auf false setzen, haben alle Partikel eine Größe von 25. Wenn der random auf true gesetzt ist, dient die Größe als maximale Größengrenze für Partikel. Wenn Sie innerhalb der Animation sync auf true setzen, wird die Größe aller Elemente gleichzeitig geändert. Sie sollten die Demo öffnen und verschiedene Werte für die Anzahl der Polygonseiten, Animationen und andere Eigenschaften ausprobieren, um zu sehen, wie sie sich auf das Endergebnis auswirken.

Verknüpfen von Partikeln

Wenn Partikel nahe genug sind, können Sie Verbindungslinien zwischen ihnen zeichnen, indem Sie die line_linked-Eigenschaft aktivieren.

Diese Eigenschaft verfügt über vier zusätzliche Werte. Die distance-Eigenschaft gibt den maximalen Abstand an, bis zu dem Linien gezeichnet werden sollen. Sie können die Farbe (color) auch als HEX-Zeichenfolge festlegen. Die Deckkraft der Linien hängt vom Abstand zwischen Partikeln ab. Der Wert, den Sie als opacity angeben, ist die Deckkraft von Linien, wenn Partikel wirklich nahe beieinander liegen. Schließlich bestimmt die Breite (width), wie breit Ihre Linien sein werden. Hier ist der JSON-Ausschnitt für die begleitende Demo.

"line_linked": {
  "enable": true,
  "distance": 200,
  "color": "#fff",
  "opacity": 1,
  "width": 4
}

Sie können sehen, dass die Linien verschwinden, sobald der Abstand zwischen Partikeln mehr als 200 px wird.

Letzte Gedanken

Ich habe versucht, alles abzudecken, was Sie wissen müssen, um die Form, Größe, Farbe und fast jede andere physikalische Eigenschaft von Partikeln zu ändern. Die Beispiele in diesem Tutorial veranschaulichen deutlich, wie einfach es ist, diese Bibliothek zu verwenden. Wenn Sie jemals eine grundlegende Partikelbibliothek benötigen, sollten Sie auf jeden Fall Particles.js ausprobieren.

Das nächste Tutorial wird Ihnen beibringen, wie Sie die Bewegung von Teilchen und ihre Interaktion untereinander und mit Ihnen steuern können. Wenn Sie Fragen zu diesem Tutorial haben, hinterlassen Sie bitte einen Kommentar.