Using Math to Predict When the DVD Logo Hits a Corner

by ArihantNag in Design > Digital Graphics

9 Views, 0 Favorites, 0 Comments

Using Math to Predict When the DVD Logo Hits a Corner

OIP.jpg

We’ve all seen the bouncing DVD logo. We’ve all waited for it to hit the corner. And most of us have wondered:

“Can math predict when it will happen?”

Yes — it can! In this project, you’ll build a simple HTML/JavaScript simulation of the DVD logo and use math to figure out whether it will ever hit a corner.

This project is perfect for beginners, coders, math fans, and anyone entering the Make It Bounce contest.

Downloads

OIP.webp
poo.webp

Supplies

realtimehtml or any other ide or editor

How the DVD Logo Moves

The DVD logo moves like a point bouncing inside a rectangle.

It has:

  1. A position: (x, y)
  2. A velocity: (vx, vy)
  3. A rectangular boundary (your screen)

When it hits a wall, it reflects:

  1. Hitting left/right flips vx
  2. Hitting top/bottom flips vy

This is called specular reflection — like a mirror.

The “Unfolding Trick”

Here’s the clever math idea:

Instead of imagining the logo bouncing, imagine the logo moving in a straight line forever, but the world is made of infinite tiled copies of the screen.

Every time it would bounce, it just enters the next tile.

In this “unfolded world,” the logo hits a corner when its straight‑line path passes through a grid intersection.

This turns a bouncing problem into a geometry problem.

The Corner Condition

Let:

  1. A = screen width − logo width
  2. B = screen height − logo height

These are the distances the logo’s center can travel.

The logo hits a corner if there exists a time t such that:


x(t) = kA

y(t) = ℓB

for some integers k and ℓ.

Since:


x(t) = x0 + vx·t

y(t) = y0 + vy·t

We need:


(kA − x0) / vx = (ℓB − y0) / vy

This means:

The ratio A/B must match the ratio vx/vy (up to rational multiples).

If the ratios are “nice,” a corner hit is possible. If the ratios are messy or irrational, the logo will bounce forever without ever hitting a corner.

This is why it’s rare in real life.

Build the Simple HTML Demo

<canvas id="dvd"></canvas>
<script>
const c = document.getElementById("dvd");
const ctx = c.getContext("2d");
function resize(){ c.width=innerWidth; c.height=innerHeight; }
resize(); onresize=resize;

let x=100, y=80;
let vx=180, vy=120;
const w=120, h=60;

function loop(t){
x+=vx*0.016; y+=vy*0.016;

if(x<0||x+w>c.width) vx*=-1;
if(y<0||y+h>c.height) vy*=-1;

ctx.fillStyle="black"; ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle="white"; ctx.fillRect(x,y,w,h);

requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>

Add a “Corner Detector”

You can detect near‑corner hits like this:

js

const eps = 3; // how close counts as a hit?
if ((x < eps || x+w > c.width-eps) &&
(y < eps || y+h > c.height-eps)) {
console.log("CORNER HIT!");
}


What the Math Tells Us

f the velocity ratio matches the screen ratio

A corner hit will happen.

If the ratios are rational

A corner hit might happen.

If the ratios are irrational

A corner hit will never happen — but it may get very close.

This is why the real DVD logo almost never hits the corner: the screen size and velocity aren’t chosen to line up perfectly.