OneTaskBy Tim King · Updated
Bouncing Balls Screensaver
Full-Screen Bouncing Balls With Adjustable Gravity
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Bouncing Balls Screensaver works
This bouncing balls screensaver runs in any browser. Coloured balls bounce around a box and off each other, leaving fading trails. Press Fullscreen and it becomes a screensaver; move the sliders to change how many balls there are, how big and fast they are, how much energy they keep on each bounce and how strongly gravity pulls. Click to add a ball, drag one to throw it, or press Kick everything to send them all off in new directions.
Bouncing balls screensaver: what it does and why
With gravity at zero and bounciness at 1, this is the classic bouncing-balls screensaver: every collision is perfectly elastic, so the total energy never changes and the balls keep going for as long as you leave the tab open. Turn bounciness down and each hit loses a fraction of its speed, so the motion gradually dies away unless you kick it again; add gravity and the balls settle into a heap at the bottom, bouncing lower each time like real rubber balls dropped on a floor.
Bounciness is the coefficient of restitution: the ratio of speed after a bounce to speed before it. A value of 1 is a perfect bounce; a steel ball bearing on a steel plate manages around 0.9, a basketball about 0.8, and a lump of clay close to 0. When two balls collide the engine uses the higher of the two values.
Speed sets the velocity given to each new ball in a random direction, in pixels per physics step. The balls have no air resistance and, in the default setting, no friction, so they slide against each other and the walls without spinning. The fastest-ball figure in the panel is a good way to see energy leaking out when bounciness is below 1.
Trails paint the last forty positions of every ball with fading opacity, which is what gives the screensaver look. Switch trails off for crisp balls, or turn the count up to eighty and the size down for a gas of particles bouncing off each other. The Save PNG button captures the current frame, trails included, and Reset returns everything to the defaults. It all runs in your browser using the Matter.js physics engine.
FAQ
Why do the balls slow down and stop?
Bounciness is below 1, so every collision loses energy. Set it to 1 with gravity at zero for a perpetual screensaver, or press Kick everything to inject energy.
Why do balls sometimes overlap or pass through each other?
Very fast, very small balls can move further than their own width in one physics step, so a collision is missed. Lower the speed or raise the size.
Can I set the colours?
No; each new ball gets a random colour from a fixed palette. Save PNG captures the frame with trails, which is where the colour matters.
Does it work as a real screensaver?
Only while the tab is open in Fullscreen. The browser throttles background tabs, so it pauses when you switch away and resumes when you come back.
See also: all Simulations & Screensavers tools, Images, Audio, Video & Screen, PDF, SVG, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Bouncing DVD Logo
The bouncing logo screensaver with a corner-hit counter; fullscreen.
Physics Sandbox
Drop shapes, drag them around and play with gravity, bounce and friction.
Plinko Game
Drop balls down a peg board and watch the bins fill up.
Boids Simulation
Flocking birds from three rules, with sliders and fullscreen.
Cloth Simulation
Hang a sheet of cloth, drag it, cut it and blow it around.