OneTaskBy Tim King · Updated
Bouncing DVD Logo
Screensaver Online With a Corner-Hit Counter and Your Own Text
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 DVD Logo works
This bouncing DVD logo screensaver counts corner hits. Press Play and the logo drifts diagonally across a black screen, changes colour when it hits an edge, and everyone in the room waits for it to hit a corner. The counter in the rail keeps score. Put it fullscreen on the big screen, set the speed, and change the text to whatever you want bouncing.
Bouncing DVD logo: what it does and why
The bouncing logo was the idle screen of DVD players from the late 1990s, and it became a cultural fixture because of one question: will it ever hit the corner exactly? The logo moves at a constant speed on a 45-degree diagonal, reflecting off each edge, and a perfect corner hit needs it to reach a horizontal edge and a vertical edge at the same instant. On most player firmware the answer is that it does, eventually, and people have watched for hours to see it. This page recreates the screen so you can do the same without a DVD player.
The physics. The logo moves a fixed number of pixels per frame in both x and y, so the path is always a diagonal. When the logo's edge meets the canvas edge the corresponding direction flips and a new colour is chosen. A corner hit is when both directions flip on the same frame, which the counter records separately from ordinary bounces. Whether it ever happens depends on the ratio between the canvas size and the logo size: on some combinations the path repeats without ever reaching a corner, and on others the corner comes round every few minutes.
The sliders. Logo size sets the width of the logo; the height follows. A bigger logo bounces more often and reaches corners more readily because there is less space to miss by. Speed is pixels per frame; at 1 it crawls, at 10 it flickers around the screen. Text on the logo replaces the DVD lettering with a name, a word or a company, which is most of why people want the thing fullscreen at an event.
Colour. Each bounce picks a new hue at least a step away from the last one, so the logo never appears to stay the same colour after a bounce. The classic player cycled through a small set of fixed colours; this version uses the full hue wheel at fixed saturation and brightness, which reads well on a projector.
Fullscreen. The canvas resizes to the display when you go fullscreen, the logo keeps its current position, and it carries on bouncing. Fullscreen dimensions are the ones that matter for the corner question, since the corner people are watching for is the corner of the screen.
FAQ
Will it actually hit the corner?
It depends on the canvas size and the logo size. Because the logo moves at exactly 45 degrees, its path repeats after a fixed number of bounces, and either the corner is on that path or it is not. Changing the logo size or resizing the window changes the path, so if it is not hitting the corner, nudge the size slider.
Why does the colour change every bounce?
Because that is what the original did, and it is the only feedback that a bounce has happened. The new colour is chosen at random from the hue wheel, at least 47 degrees from the last one so consecutive colours are always visibly different.
Can I use my own logo image?
Not in this version. The text field lets you put any word on the logo shape, which covers most uses. Image upload, with transparent backgrounds and recolouring, is a different tool.
Does it drain the battery?
It redraws at the browser's frame rate, typically 60 times a second, which is light work for a graphics chip but is not free. Pause with Play when you are not watching, or close the tab; the simulation does not run when the page is not visible.
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
Matrix Rain
Falling green code with speed, size, trail and colour; fullscreen.
Lava Lamp
Blobs that rise, merge and split; four colours, fullscreen.
Fireworks
Rockets, bursts and fading sparks; click to launch; fullscreen.
Plasma Effect
Swirling demoscene colour with speed, scale and palette; fullscreen.
Bouncing Balls Screensaver
Full-screen bouncing balls with adjustable count, size, bounce and gravity.