Zurück zum Playground

Gravity Bubbles

Ein Schwarm grauer Kugeln schwebt in der Mitte und reagiert auf jede Mausbewegung – stoßen, anziehen, wirbeln. Canvas, ein bisschen Physik und viel Graustufen.

Canvas Physik Interaktion
Veröffentlicht
Technik TypeScript · Canvas 2D

Ein Schwarm grauer Kugeln schwebt in der Mitte des Rahmens. Bewege den Mauszeiger, um die Kugeln wegzudrücken. Halte die Maustaste gedrückt, um sie anzuziehen und kreisen zu lassen. Ein Klick gibt ihnen einen Impuls.

01 / Gravity
Bewegen · Halten · Klicken

Die Idee

Ein Schwarm Kugeln, der frei in der Mitte schwebt, sich gegenseitig ausweicht und auf jede Bewegung reagiert. Kein Ziel, keine Punkte – nur ein bisschen Physik zum Anfassen.

Inspiriert von Abdughafur Khujzodas „Gravity“-Pen, reduziert auf das, was mir daran am meisten Spaß macht: die Kugeln.

Was passiert

  • Schweben statt stapeln: Eine sanfte Anziehung zum Zentrum hält die Kugeln in der Mitte, ohne sie zur Ruhe zu bringen.
  • Kollisionen sorgen dafür, dass sie sich ausweichen statt ineinander zu verschwinden.
  • Der Mauszeiger ist der eigentliche Antrieb: Bewegen drückt die Kugeln weg, Halten zieht sie an und lässt sie kreisen, Klicken gibt ihnen einen Impuls.

Technik

Canvas 2D, ein paar Zeilen Physik und ein kleines Vanilla-Modul, das erst startet, wenn das Experiment sichtbar wird. Kein WebGL, keine Bibliothek.