Bouncing DVD Logo

In the TV show The Office, there is a humorous scene where all the employees, who are supposed to be paying attention to their boss who is leading a meeting, are watching the bouncing DVD logo on the television screen behind him instead.  They are all hoping that the bouncing DVD logo will move in and out of one of the exact corners of the television screen, and show disappointment every time the logo comes close but just misses it.  Meanwhile, their boss, oblivious to all of this, thinks that all of their reactions to the bouncing DVD logo are actually reactions to his agenda.

http://www.godtube.com/watch/?v=JJBJFCNU

The bouncing DVD logo follows a path common to many digital devices, including the Roku logo, Pandora’s musical information, and other computer screensavers.  The logo starts moving diagonally from one corner of the screen, and any time it gets to the edge of the screen it “bounces” off and changes direction, like a ball hitting a wall.  Most of the time the logo only changes directions at a 90° angle when it hits one of the sides of the screen, but on some rare occasions it hits one of the corners exactly and changes directions at a 180° angle instead.  This begs the question: can we mathematically predict when the logo will hit one of the corners?

Let us first consider some simplified examples, and then draw some generalizations from there.  Here is a 1 x 1 pixel logo moving inside of a 16 x 10 pixel screen, where the total distance traveled by the logo is recorded in the bottom right:

It should be observed that the logo hits the top and bottom walls at every multiple of 9 (d = 9, 18, 27, 36, and 45) and the left and right walls at every multiple of 15 (d = 15, 30, and 45).  The logo therefore hits the corner (the intersection of a top/bottom wall with a left/right wall) at the least common multiple of 9 and 15, or at d = 45. 

But why the numbers 9 and 15?  Shouldn’t it be 10 and 16, since that’s the dimensions of the screen?  If we follow the point at the exact center of the logo, we need to notice that it never gets within half the logo’s height to the top and bottom walls, nor within half the logo’s width to left and right walls.  Therefore, the movement of the logo is restricted to these half-logo margins around the screen, which means from the screen’s height we need to subtract half the logo’s height (for the top margin) and half the logo’s height (for the bottom margin), which is the same as subtracting the whole logo’s height.  Likewise, from the screen’s width we need to subtract half the logo’s width (for the left margin) and half the logo’s width (for the right margin) which is the same as subtracting the whole logo’s width.  In this case, 9 is the difference of heights of the screen and logo (10 – 1 = 9), and 15 is the difference of widths of the screen and logo (16 – 1 = 15).

Therefore, a bouncing logo will reach a corner at the least common multiple of the difference of the screen and logo heights and the difference of the screen and logo widths, or

d = LCM(h_s – h_l, w_s – w_l)

We can test our equation by looking at a bigger 4 x 2 pixel logo moving inside the same 16 x 10 pixel screen:

According to our formula, d = LCM(h_s – h_l, w_s – w_l) = LCM(10 – 2, 16 – 4) = LCM(8, 12) = 24.  Sure enough, we observe that the logo hits the top and bottom walls at every multiple of 8 (d = 8, 16, and 24) and the left and right walls at every multiple of 12 (d = 12 and 24), and the logo hits its first corner at d = 24.

Another way to explain the bouncing logo equation is to picture its path as a straight line through a series of reflections.  When the logo hits the top or bottom wall, a horizontal mirror along the half-height-logo margin would reflect its rebounded path in a straight line to the original.  Likewise, when the logo hits the left or right wall, a vertical mirror along the half-width-logo margin would reflect its rebounded path in a straight line to the original.  Here’s what the 1 x 1 logo moving inside of a 16 x 10 screen would like in a straight line using a series of reflections:

We can see that the logo will hit the corner when the reflected screens can be combined to make a square.  Since the size of each reflected screen is the difference of the screen and logo heights and the difference of the screen and logo widths, and since a square will only be formed by a least common multiple, we have verified the formula d = LCM(h_s – h_l, w_s – w_l).

Since the logo travels at a constant speed, a proportion can be set up using the formula v = ^d/_t to give a formula for the time it will take for the logo to travel from one corner to the next.  In other words, the distance and time of one cycle is proportionate to the distance and time of one screen length:

which can be algebraically rearranged into the following helpful formula:

This means that the time it takes for a bouncing logo to cycle through one corner to the next can be calculated with five variables: the time it takes for it to move across one width of the screen, the screen height, the screen width, the logo height, and the logo width.

So using estimates from the video footage of The Office episode, we can calculate that it takes 6 seconds for the bouncing DVD logo to go one width of the screen, and if the TV screen is 800 x 600 pixels, the logo is about 140 x 140 pixels.  Therefore, t_cycle = t_{ws – wl} · LCM(h_s – h_l, w_s – w_l) / (w_s – w_l) = 6 · LCM(600 – 140, 800 – 140) / (800 – 140) = 6 · LCM(460, 660) / 660 = 6 · 15180 / 660 = 138 seconds.  In other words, the DVD logo will hit a corner of the television screen every 2 minutes and 18 seconds.

Unfortunately, since the equation uses a least common multiple function, and since the least common multiple function is not a continuous function, estimates may not be accurate.  Previously, we estimated the logo to be 140 x 140 pixels which resulted in a calculated cycle of 2 minutes and 18 seconds.  However, if the logo was really 141 x 141 pixels, the calculated cycle would be over 45 minutes, or if the logo was really 139 x 139 pixels, the calculated cycle would be over 46 minutes!  The following is a table of calculated cycles for logos from 135 x 135 pixels to 145 x 145 pixels:

Logo Size (pixels)	Cycle Time (min)
135 x 135	09:18
136 x 136	05:48
137 x 137	46:18
138 x 138	23:06
139 x 139	46:06
140 x 140	02:18
141 x 141	45:54
142 x 142	22:54
143 x 143	45:42
144 x 144	05:42
145 x 145	09:06

Therefore, the time it takes for a bouncing logo to move from one corner to the next can be predicted using five variables: the time it takes for it to move across one width of the screen, the screen height, the screen width, the logo height, and the logo width.  However, given the nature of the least common multiple function, these variables must be known exactly or the calculation will not be accurate.  Also, every television and logo size are different, so answers will vary.