Erzeuge Partikel, elastische Körper, Kollisionen und Gravitationsfelder in Echtzeit mit HTML5 Canvas.
Erzeuge Neon-Partikel, die fallen, von den Rändern abprallen und mit Alpa zusammenstoßen. Klicke oder tippe auf Alpa und ziehe, um ihn zu werfen; Gesichtsausdruck und Sprechblase reagieren auf harte Aufpralle, das Ziehen und den Schwerkraftmodus. In der Schwerelosigkeit ziehst du nahe Partikel an, solange du die Maustaste gedrückt hältst.
Erzeuge Partikel, elastische Körper, Kollisionen und Gravitationsfelder in Echtzeit mit HTML5 Canvas. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Dies ist eine 2D-Physik-Sandbox, die direkt im Browser läuft und auf einem Canvas leuchtende Neon-Partikel sowie ein großes Partikel mit dem Maskottchen Alpa in Echtzeit simuliert. Du kannst Schwerkraft und Abprall einstellen, zwischen Schwerkraftmodi wechseln oder Alpa packen und über den Bildschirm schleudern, um zuzusehen, wie er von den Wänden abprallt und Partikel zur Seite stößt. Das eignet sich zum kurzen Abschalten und ebenso als anschauliche Demo für Erdbeschleunigung, Stoßzahl und einfache Kollisionen – ganz ohne Installation.
Die Schwerkraft reicht von 0 bis 1,5, die Elastizität von 0,1 bis 1,0: Je höher sie ist, desto mehr Geschwindigkeit behält ein Objekt nach dem Aufprall an einer Wand. Die Simulation enthält außerdem einen leichten Luftwiderstand, sodass selbst bei 1,0 irgendwann alles zur Ruhe kommt. „20 Partikel hinzufügen“ lässt 20 Partikel am oberen Bildschirmrand erscheinen. Es bleiben höchstens 400 Partikel erhalten; darüber hinaus werden die ältesten entfernt. Der Löschen-Button entfernt alle auf einmal. Drücke mit Maus oder Finger auf Alpa, ziehe und lass los, um ihn zu werfen.
Es gibt vier Schwerkraftmodi. Der Standardmodus wirkt wie die Schwerkraft auf der Erde. „Schwerelosigkeit“ schaltet die Schwerkraft ab; solange du die Maustaste gedrückt hältst, werden Partikel im Umkreis von etwa 300 Pixeln zum Zeiger gezogen. „Zentrales Schwarzes Loch“ zieht Alpa zur Bildschirmmitte, während alle Partikel zu Alpa gezogen werden. Die Stärke hängt vom Schwerkraftregler ab, bei 0 gibt es keine Anziehung. „Gyroskop-Steuerung“ lässt die Schwerkraft der Neigung deines Smartphones folgen; auf dem iPhone wirst du zuerst um Erlaubnis gefragt.
Damit alles auch auf Smartphones flüssig läuft, kollidieren kleine Partikel nur mit Alpa und den Bildschirmrändern, nicht miteinander. Die Physik läuft mit festen 60 Schritten pro Sekunde, daher bleibt die Geschwindigkeit auf Displays mit unterschiedlicher Bildwiederholrate gleich. Das Panel zeigt live Bildrate, Partikelanzahl und Alpas Geschwindigkeit. Prallt Alpa hart gegen eine Wand, ändert sich sein Gesichtsausdruck, ein kurzer Ton erklingt und ein paar Funken fliegen; die leuchtenden Schweife hinter den Partikeln sind ein auf den Canvas gezeichneter Effekt. Die Simulation läuft vollständig lokal und sammelt keine Daten.
Damit Hunderte Partikel auch auf Smartphones flüssig laufen, berechnet die Sandbox nur Kollisionen zwischen Partikeln und Alpa sowie zwischen Partikeln und den Bildschirmrändern. Jedes Partikel gegen jedes andere zu prüfen, würde den Rechenaufwand mit dem Quadrat der Partikelzahl wachsen lassen und schnell zu Rucklern führen. Deshalb gleiten Partikel einfach durcheinander hindurch.
Dieser Modus braucht ein Smartphone oder Tablet mit Lagesensor; die meisten Desktop-PCs und Laptops haben keinen. Auf iPhone und iPad erscheint beim Wechsel in diesen Modus eine Anfrage für den Zugriff auf Bewegung und Ausrichtung, die du erlauben musst. Hast du sie zuvor abgelehnt, lade die Seite neu und versuche es noch einmal. Achte außerdem darauf, dass der Schwerkraftregler nicht auf 0 steht.
Die Anziehung des Schwarzen Lochs wird mit dem Wert des Schwerkraftreglers multipliziert, bei 0 gibt es also gar keine Anziehung. Schiebst du den Regler nach rechts, wird Alpa zur Bildschirmmitte gezogen und die Partikel werden zu Alpa hingezogen; je höher der Wert, desto stärker die Anziehung.
Nein. Eine Elastizität von 1,0 bedeutet, dass beim Aufprall an einer Wand keine Geschwindigkeit verloren geht. Die Sandbox hat aber auch einen leichten Luftwiderstand, der bei jedem Schritt etwas bremst, deshalb kommen Objekte irgendwann zur Ruhe. Für längeres Springen kannst du die Schwerkraft etwas verringern.
Kategorie ansehen: Design & Farben
Setze Ankerpunkte, ziehe Bézier-Griffe auf einer 500×500-Fläche und erhalte sofort das d-Attribut des SVG-Pfads und eine CSS-Regel clip-path: path().
Setze Screenshots in ein elegantes Browserfenster im macOS-Stil mit Schatten und Farbverlauf und lade sie als hochauflösendes PNG herunter.
Erstelle leuchtende Neonschriftzüge mit anpassbaren Farben, Pulsieren und exportierbarem CSS-Code.
Lies Farbcodes pixelgenau aus jedem Bild mit integrierter Lupe aus und sieh die dominante Farbpalette.
