Simulate 2D physics particles with gravity, elasticity, friction, gyroscope gravity, and mouse attraction. Mascot Alpa turns into a physical particle bouncing around!
Spawn glowing neon particles that fall, bounce off the walls and collide with Alpa. Click or touch the big Alpa particle and drag to throw him around; his expression and speech bubble react to hard hits, dragging and the current gravity mode. In Zero Gravity, hold the mouse down to pull nearby particles toward the pointer.
Simulate 2D physics particles with gravity, elasticity, friction, gyroscope gravity, and mouse attraction. Mascot Alpa turns into a physical particle bouncing around! Use it for everyday work, development, learning, or quick verification.
This tool runs in your browser. Before working with sensitive data, make sure you trust your browser and device environment.
This is a 2D physics sandbox that runs in your browser, using a canvas to simulate glowing neon particles and one big Alpa mascot particle in real time. You can adjust gravity and bounce, switch between gravity modes, or grab Alpa and fling him across the screen to watch him bounce off the walls and knock particles aside. It works as a quick way to relax and also as a hands-on demo of gravitational acceleration, the coefficient of restitution and simple collision response, with nothing to install.
Gravity Force goes from 0 to 1.5 and Elasticity (Bounce) from 0.1 to 1.0. The higher the bounce, the more speed an object keeps after hitting a wall. The simulation also applies a little air drag, so even at 1.0 things eventually settle down. Spawn Particles (+20) drops 20 particles in at the top of the screen. Up to 400 particles are kept, and once you go past that the oldest ones are removed. Clear All removes them all at once. Press and drag Alpa with the mouse or a finger, then let go to throw him.
There are four gravity modes. Standard Downward works like gravity on Earth. Zero Gravity switches gravity off, and while you hold the mouse button down, particles within about 300 pixels of the pointer are pulled toward it. Alpa Black Hole pulls Alpa toward the center of the screen while every particle is drawn toward Alpa. The pull scales with the gravity slider, so at 0 there is no pull at all. Mobile Gyroscope makes gravity follow the direction you tilt your phone, and on iPhone you will be asked for permission first.
To run smoothly on phones, small particles only collide with Alpa and the edges of the screen, not with each other. The physics runs at a fixed 60 steps per second, so speed stays consistent on displays with different refresh rates, and the panel shows the live frame rate, particle count and Alpa's speed. When Alpa slams into a wall, his expression changes, a short sound plays and a few sparks fly out, while the glowing trails behind the particles are a visual effect drawn on the canvas. The whole simulation runs locally and collects no data.
To keep hundreds of particles running smoothly on phones, the sandbox only calculates collisions between particles and Alpa, and between particles and the screen edges. Checking every particle against every other one would grow with the square of the particle count and quickly cause stutter, so particles simply pass through each other.
This mode needs a phone or tablet with an orientation sensor; most desktops and laptops do not have one. On iPhone and iPad, switching to this mode shows a Motion & Orientation permission prompt that you must allow. If you denied it earlier, reload the page and try again. Also make sure the gravity slider is not set to 0.
The black hole's pull is multiplied by the Gravity Force slider, so at 0 there is no pull at all. Move the slider to the right and Alpa is drawn to the center of the screen while the particles are pulled toward Alpa. The higher the value, the stronger the pull.
No. A bounce of 1.0 means no speed is lost when hitting a wall, but the sandbox also has slight air drag that slows everything a little on every step, so objects still come to rest eventually. For longer bouncing, try lowering the gravity a bit.
Browse this category: Design & Color
Click to place anchors, drag Bézier handles on a 500×500 canvas, and instantly get the SVG path d attribute and a CSS clip-path: path() rule. Includes heart and star presets.
Upload your webpage screenshot, wrap it with a premium macOS browser frame, drop shadows, and beautiful gradient backdrops, and export high-res PNG.
Visually adjust multi-layer text-shadow, neon glow radius, colors, and flashing rate, then copy CSS code.
Extract colors from local images using a pixel-art style precision loupe. Support HEX, RGB, HSL copies and WCAG color contrast validation.
