Erstellung eines Plexus-Effekts mit Plain JavaScript
In unserem zweiten Blogbeitrag aus dem "Tagebuch eines Entwicklers" stellen wir Euch die Erstellung eines Partikel-Plexus mit Plain JavaScript vor.
Unser Entwickler Daniel Fischer erklärt Euch wieder in einzelnen Arbeitsschritten mit anschaulichen Beispielen seine persönliche Herangehensweise bei der Umsetzung.
Der Effekt
Im Folgenden erstelle ich für Euch einen interaktiven Partikeleffekt (sog. Plexus) mit purem JavaScript und dem HTML5-Canvas.
Unser Endergebnis sieht so aus (ihr könnt die Partikel mit der Maus verschieben):
Der Code steht am Ende zum Download bzw. zum Kopieren bereit.
Um diesen Effekt nachzubauen, brauchen wir lediglich eine HTML-Datei.
Hier die grobe Funktionsweise des Effekts:
Wir erstellen zufällige Punkte auf dem Canvas.
Jeder Punkt hat eine Position und eine Velocity, also eine Geschwindigkeit bzw. Richtung, in die er sich bewegt.
Jeder Punkt muss überprüfen, ob er nah genug an einem anderen Punkt ist. Falls ja, werden wir eine Linie zwischen ihnen zeichnen.
Jeder Punkt muss überprüfen, ob er nah genug an der Maus ist, um dann wegbewegt zu werden.
Dies ist zwar nicht die beste Methode, aber die einfachste. Weitere Infos dazu folgen am Ende meines Blogbeitrags.