Gravity Points: Punkte mit Anziehungskraft
Kennt ihr CodePen? Nein? Dann solltet ihr es euch dringend ansehen. CodePen ist ein „social development environment for front-end designers and developers“. Ihr könnt dort, wie in einer Online-Sandbox, Code ausprobieren und allerhand Spielereien machen. Aber ihr könnt euch dort auch die Projekte anderer Entwickler ansehen, zum Beispiel die interaktive Animation Gravity Points von Akimitsu Hamamuro, die ich euch zum heutigen Prokrastinationsmontag zeigen werde.
Gravity Points
Beim ersten Öffnen seht ihr nichts außer umherfliegenden Partikeln. Das ändert sich, wenn ihr der Anweisung in der linken oberen Ecke folgt und irgendwo in die freie Fläche klickt.
Gravity Points von Akimitsu Hamamuro
Die herumfliegenden Partikel beginnen sofort, die Anziehungskraft dieses angeklickten Punktes zu „spüren“. Gibt es mehr als einen Punkt, bewegen sich die Punkte aufeinander zu. Richtungsweisend ist dabei allerdings der größere/größte Punkt: Er zieht alle anderen Punkte und die Partikel an. Wird ein weiterer Punkt „gefressen“, wächst der größere noch mehr.
Es ist möglich, die Punkte zum explodieren zu bringen und somit den „Urzustand“ der umherfliegenden Partikel wiederherzustellen: Klickt dazu einfach gaaaaanz oft auf dieselbe Stelle – oder wartet, bis sich mehrere große Punkte getroffen haben. Und dann geht es wieder von vorne los.
Das Video hier zeigt, wie Gravity Points funktioniert:
Aber Gravity Points macht nicht nur Spaß. Ihr könnt euch nämlich in CodePen auch den Code ansehen, der hinter den vorgestellten „Pens“ steckt. Klickt dazu oben rechts auf „Change View“, dann auf „Editor View“. Ihr könnt so z.B. Variablen verändern – und damit den Ablauf der Gravity Points-Animation.
