Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bouncing DVD Logo

bouncingdvdlogo.com

Post reply on HN
Print view View original

21–30 of 293 posts

Re: Bouncing DVD Logo

#21

Post by ssalazar »

ComputerGuru wrote: post #11

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.

Its not the right tradeoff for everything, but this took 10 minutes to code and runs on practically every modern computer in existence.

Re: Bouncing DVD Logo

#22

Post by XaspR8d »

pier25 wrote: post #5

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/

Or alternatively, write it as a CSS animation and modify it on collision.

Re: Bouncing DVD Logo

#23

Post by augusto-moura »

nikital wrote: post #9

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 (But then it would troll you just before hitting it)

Damn I didn't read the troll part in time

Re: Bouncing DVD Logo

#24

Post by tantalor »

aphextron wrote: post #10
pier25 wrote: post #5

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/

>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.

Ooh you could even animate with a css transition from one bounce to the next with a linear curve; then you don't run any JS per frame, only at the bounces.

Re: Bouncing DVD Logo

#25

Post by _bxg1 »

Groxx wrote: post #15
_bxg1 wrote: post #2

Makes me think of this https://www.youtube.com/watch?v=QOtuX0jL85Y

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

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

Re: Bouncing DVD Logo

#27

Post by jonny_eh »

kroltan wrote: post #18
kamikaz1k wrote: post #8

Earlier quoted context omitted.

It's a pretty simple page, setTimeout should work well enough. Is the interval too high?

It's not just about speed, it's about timing. With setInterval the alignment of the screen refresh and the code to update will quickly become out of sync and cause periods where 2 frames are the same.

Which causes visual tearing.

Re: Bouncing DVD Logo

#28

Post by 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.

Re: Bouncing DVD Logo

#30

Post by tengbretson »

pier25 wrote: post #5

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/

setTimeout would probably be fine if they used the diff in elapsed time between calls to derive the position deltas rather than assuming it is always going to be 30ms.
Post reply on HN