
Bouncing DVD Logo - aloukissas
https://www.bouncingdvdlogo.com/
======
kens
As a historical note, the bouncing logo wasn't just for fun, but was important
to prevent screen burn-in on CRTs. If you had a static image on a CRT for a
long time, it could damage the phosphor. Sometimes you could even see the
image when the screen was off!

This was the original purpose of screensavers, which saved your screen from
damage. Displaying a dynamic image prevented one part of the screen from being
overused.

~~~
hadlock
That you feel the need to inform us of this "historical fact" makes me feel
especially old... having lived through the CRT -> LCD transition period when
buying an LCD made going to LAN parties a lot easier

~~~
ck2
I finally threw out my $1500 Sony Trinitron 27" high resolution CRT this year.

It worked fine, felt like a huge waste of money. But it weighed over 100
pounds!

~~~
BallyBrain
Too bad that you threw out. Those Trinitrons are still sort after for retro
gaming. You could of sold it or given it away.

~~~
PunksATawnyFill
"Could of?"

~~~
exikyut
You missed "sort after".

We're both just as bad as each other, the meaning is discernible.

------
nikital
A while ago I made a bouncing DVD logo that would actually hit the corner
every few bounces with high probability:

[https://nikital.github.io/screensaver](https://nikital.github.io/screensaver)

(But then it would troll you just before hitting it)

~~~
pryelluw
Earlier I commented about turning it into a mac screensaver. Well, I went
ahead and did it.

Used your code, but didnt have a license. Do I have your permission? Here is
the link to the repo: [https://github.com/pabloriveracelerity/mac-dvd-
screensaver](https://github.com/pabloriveracelerity/mac-dvd-screensaver)

Please let me know if you do not approve and I will take it down ASAP. No ill
intentions. Just wanted to join the fun. :)

~~~
nikital
Sure, thanks for doing it! I added a license to the original code.

~~~
pryelluw
Thank you!

------
ComputerGuru
In 1999, my DVD player could do this smoothly without any hitches or glitches.
In 2020, my Xeon can't render this fast enough to avoid stutters. Either code
quality has gone way down or my DVD player had a faster CPU.

~~~
ricardobeat
It's just a less-than-ideal implementation, your CPU is most definitely not
suffering. Here is a completely smooth version:

[https://codesandbox.io/s/nostalgic-cherry-
wwpzj?file=/src/in...](https://codesandbox.io/s/nostalgic-cherry-
wwpzj?file=/src/index.js)

(I made the exact same thing last year as a joke for our team monitors)

~~~
jsf01
This is definitely not smooth on iOS, on a brand new iPhone that’s arguably
way faster than whatever system played the original DVD screensaver.

On a technical note, not that there’s much you can do about this, but because
you’re reading clientWidth and clientHeight each frame, you’re forcing reflow.
A performant implementation would probably require avoiding the DOM altogether
within the draw loop, so that would mean using canvas/webgl.

~~~
ricardobeat
There are no elements in the page for style to be recalculated, so I doubt the
reflow is what's slowing it down. I'm curious on what could cause bad
performance for you though. It runs smoothly at 60fps on an iPhone 11 and the
iPad, using Safari. Did you open the standalone page at
[https://wwpzj.csb.app/](https://wwpzj.csb.app/)? My only guess would be that
the CodeSandbox UI is too heavy for mobile.

For science, I went ahead and converted the code to ES3 and ran on the 10-year
old first generation iPad (with setInterval) and it's still pretty smooth.

~~~
dawnerd
Not smooth here either. Can tell it wants to but will hiccup every now and
then.

------
jkeat
Even though it's gross, it's kind of cool that you can do this with nested
marquees:

<marquee behavior="alternate" direction="up"><marquee behavior="alternate"
direction="left"><span>DVD</span></marquee></marquee>

~~~
ExactActuation
WTF? Mind blown. And I've been hacking the web for nearly 20 years now.

~~~
Zetaphor
It's amazing how well the effect works. Here's a demo:

[https://jsbin.com/kuzolurapi/1/edit?html,output](https://jsbin.com/kuzolurapi/1/edit?html,output)

~~~
scatters
In Chrome, the outer marquee needs (CSS to) be forced to full height.
[https://jsbin.com/rasivitupi/edit?html,output](https://jsbin.com/rasivitupi/edit?html,output)

~~~
gpvos
Same in Firefox.

------
_bxg1
Makes me think of this

[https://www.youtube.com/watch?v=QOtuX0jL85Y](https://www.youtube.com/watch?v=QOtuX0jL85Y)

~~~
Groxx
I always think of
[https://www.youtube.com/watch?v=m8NAlDOCG6g](https://www.youtube.com/watch?v=m8NAlDOCG6g)
when anything dvd-logo-related comes up

~~~
_bxg1
That's pretty funny, but I think it's also fake

~~~
dewey
It's a pretty common template
([https://www.youtube.com/watch?v=DuZP37qwzAE](https://www.youtube.com/watch?v=DuZP37qwzAE))
for inserting videos. You can see the original video on the corners of the
black overlay.

------
balazsbela
My wife's version uses SVG for scaling and is also responsive on resize.

[https://github.com/boglarkasebestyen/dvdscreensaver](https://github.com/boglarkasebestyen/dvdscreensaver)

~~~
gitgud
Nice, a bit too fast on my machine though. It should probably use a time-based
interval, rather than updating every frame.

~~~
dannyw
It actually uses a time-based interval and tries to move every 5ms. At this
resolution, different browsers will handle it differently.

Most web displays run at 60 Hz (16.66ms), making it inefficient to update
every 5ms. 144Hz displays do exist and are wonderful, but you should always
use requestAnimationFrame anyway.

------
cdaringe
I made [https://dvd.js.org/](https://dvd.js.org/) as a fun way to select
standup order. If you add a ?names query, each time it hits a corner, a name
is selected. Each time an edge is hit, the circularly linked list rotates
individuals' names around the edges of the rectangle. Of course you don't want
to wait ten days for all names to be selected, so the rectangle shrinks to
expedite the process :). Example url:
[https://dvd.js.org/?names=chaz,tina,stacy,tiffany,rider](https://dvd.js.org/?names=chaz,tina,stacy,tiffany,rider)

------
aloukissas
Ha! Posted this randomly 2 hrs ago, came back to see it #2 behind Apple iPhone
SE announcement. We are all bored, aren't we? :)

~~~
user32556
because people are in quarantine :)

------
monktastic1
Gives rise to a quick brainteaser (perhaps depending on whether you've given
number theory any thought before): under what conditions is it guaranteed to
hit a corner (regardless of where it starts)? Also assume it's traveling with
slope 1.

------
tantalor
Why do people bother minifying code this small? It's 168 bytes gzipped. The
unminified source is probably under 1kb gzipped. Just no point to minifying.

~~~
dewey
Probably more work to rip it out of your build pipeline than just reusing the
config you use for all your other projects.

~~~
jimmaswell
People use a build pipeline for small JS projects? I just open an editor in a
directory and start typing.

~~~
dewey
If you usually build production ready services you might reuse your setup even
if you just do a small proof of concept or fun project like this one.

------
pacomerh
a long time ago I went into my living room and saw my parents very quiet
sitting down looking at the dvd logo bounce. So I asked, what are you doing,
and they said, oh we've been here waiting for the logo to hit the corner...:D

------
lanius
Anyone know who the original creator of the bouncing DVD logo is?

~~~
userbinator
I'd guess it was an embedded developer working on DVD player firmware.

------
pier25
I was wondering why the animation was so stuttery and then I saw they are
using setInterval for the animation...

Jesus it's 2020 at least use requestAnimationFrame!

[https://flaviocopes.com/requestanimationframe/](https://flaviocopes.com/requestanimationframe/)

~~~
aphextron
>I was wondering why the animation was so stuttery and then I saw they are
using setInterval for the animation...

setInterval isn't the problem. He's animating the CSS position (top, left),
which triggers a full reflow and causes the stuttering. Always animate with
translate3d, which is GPU accelerated.

~~~
ajflores1604
As someone who's new to front end and css is there a good resource on what
properties are more costly, or which functions are newer and meant to be more
performant like translate3d is mentioned as being gpu accelerated? I've seen
mentions of reflow, repaint, and layout thrashing but not a comprehensive list
of what functions are meant to replace what other ones, or relative cost of
each function in common use cases. I've managed to grasp javascript fairly
easily coming from python, but css seems like this obscure black box that I
thought would be much easier to get a handle on.

~~~
ly
I have no great answer to your question, and you might know this already, but
while translate3d is indeed newer, it’s not a “new more performant”
replacement for positioning with top/left using the position property.

It’s just another property which can sometimes be used to do what you could
earlier only do with ‘position:’, but there are still many cases (the
majority) you position things using the “old” position property.

They have different uses, and for that reason one also requires a reflow while
the other does not.

------
fatiherikli
My friend has implemented a bouncing DVD logo using only HTML. It uses two
nested marquee elements — one of them moves to opposite direction.

Here's the link:
[https://codepen.io/ademilter/pen/oJqvNR](https://codepen.io/ademilter/pen/oJqvNR)

------
isaidthis
Make the browser window real small and things get crazy.

~~~
echeese
It reloads the page when you resize

~~~
NullPrefix
For me it doesn't change the play area. If I reduce the window size then the
logo just flies off screen.

------
twomoretime
I wonder how many children have been conceived to this logo.

------
ridaj
What I want to know is, who implemented the original animation (on silicon, I
presume?), and did they foresee that it would have such a cult following
today?

~~~
avian
> on silicon, I presume?

I'm pretty sure the screensaver was done in software. All DVD players have
some sort of an embedded computer inside (even the earliest ones had to handle
things like on-disc menus). It wouldn't make much sense to implement all that
non-time-sensitive logic in an ASIC.

------
onkarshedge
Any Office fans here, waiting for it to hit the corner?.

~~~
thushanfernando
Pam claims that she saw it one day when she was alone in the conference room.

[https://www.youtube.com/watch?v=QOtuX0jL85Y](https://www.youtube.com/watch?v=QOtuX0jL85Y)

------
swozniak
Here's my Android live wallpaper implementation:
[https://play.google.com/store/apps/details?id=com.stephanwoz...](https://play.google.com/store/apps/details?id=com.stephanwozniak.dvdwallpaper)

------
askvictor
Put this into a video file and you've got yourself a fabulous background for
Zoom meetings.

~~~
WhyNotHugo
Apparently, you can only use images for zoom backgrounds :(

------
sswaner
Just watched the episode of The Office where they watched the DVD Logo hoping
it would Exactly hit the corner.

[https://m.youtube.com/watch?v=QOtuX0jL85Y](https://m.youtube.com/watch?v=QOtuX0jL85Y)

------
barbs
Is there a screensaver version of this? Or a way to turn this into a
screensaver?

~~~
dylan604
Oh my, what is wrong with people?? Or maybe it's just me. I have a PTSD like
reaction instead. I was a DVD programmer for 10 years, and every where I
looked would be a screen with a DVD player connected doing this. I'm so glad
to not be in the shiny round disc business any more.

~~~
lostgame
What was the role of ‘DVD programmer’ like? Could you tell us more?

~~~
dylan604
Depends on what year you started really. The original DVD burner cost $15k and
the blank discs were $50 each but only held 3.95GB of data. The 2nd gen burner
dropped to $5k and <$10 discs. The 3rd gen burners came out with the General
media. These burners were less than $200 and blank media holding the full
4.95GB of data dropped to less than <$1. General media came with the +R/-R
battles, and neither of these formats were compatible with a large portion of
existing DVD players.

The first software was painful running under NT 4.0. With specialty discs with
a large number of individual assets, it was easy to create so many files in a
single folder that the system would slow to a crawl, and eventually crash
during the muxing stage. You'd start it up again and watch it fly by the files
it had already muxed, and then slow down when it got to the new files. It was
a glorious day when Win2k comes out, and the same type of project no longer
crashes like it did under NT. WinXP was like a gift from heaven. Then, you'd
get some challenging programming requests like make a randomized game
attempting to not repeat an item until all items have been displayed once. You
get it programmed and begin testing in the plethora of consumer DVD players on
the market. You then discover that some of the lower cost players don't
acutally have the ability to select a random number. Instead, they have a
preset list of random numbers starts over every time the player is restarted
making it impossible to play the game as requested. You think browser
compatibility is a pain, the DVD player/media combinations were insane.

Then there was MPEG-2 encoding. Early days required specialty hardware boards
in your computer to do real-time encoding. These were in the $20k-$50k
systems. High end encoders would allow for 2-pass encoding, but that meant
playing the VTR for the first pass, rewinding the tape, and then doing the
second pass in real-time. A 2 hour movie would take over 4 hours to encode.
Then, if there was a problem with the encode (bitrate/buffer
spikes/underflows), you'd have to figure out how to solve it and do the encode
a second time. If you had the fancy encoder, you could do segment based
encodes so you didn't need the full 4 hours. Mid-2000s, software encoding
became viable. Now, you could run 2-pass encodes faster than real-time.

Then there were the oddities to deal with like timing was based on a 27MHz
clock, so when the software told you there was a problem at time 59265000000,
it actually meant 6mins 35secs.

No, I'm not scarred by the experience ;-)

Edit: I didn't actually answer the question. The role was to take the
video/stills/subtitle assets and link them together. Every button on a menu
screen had to be programmed to go to a specific spot on the disc. The
video/audio/subtitles had to be combined to play together, then when finished
told where to go, or stop, or loop, etc. Menu elements had to be placed in the
correct section of the disc to that the menu/title buttons on the remote
behaved correctly. DVDs had a very defined structure. VTS_01.vob VTS_02.vob
makes me shudder when I seem them now.

------
cryptozeus
Sorry It does not touch the borders. I can't enjoy this :)

------
kleiba
Funny, just saw that same animation 10 minutes ago on my CRT.

------
kroltan
Making this and not having a counter of corner bounces should be
inconstitutional! </humor>

------
grecy
Out of curiosity, what's the physics of the bounce?

Is it always angle of incidence = angle of reflection?

~~~
rbanffy
On actual DVDs it was flipping the velocity sign when hitting the
corresponding border. Much like Pong.

------
aasasd
I'm more irritated by the huge margins than by the not-hitting-corner thing.

------
snickell
Damnit, now I have tayebbayri.com burned into my monitor... ;-)

------
fireattack
It feels very laggy? Definitely not running in 60fps.

~~~
tuxracer
It's laggy in large part because it should be using
[https://developer.mozilla.org/en-
US/docs/Web/API/window/requ...](https://developer.mozilla.org/en-
US/docs/Web/API/window/requestAnimationFrame) instead of setInterval

------
tieguy2k
Thank you for this

------
ChrisArchitect
add (2012) to title

