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

51–60 of 293 posts

Re: Bouncing DVD Logo

#51

Post by [deleted] »

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/

[deleted]

Re: Bouncing DVD Logo

#52

Post by n_u_l_l »

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/

The source image is also pixelated[1]. Could've used a vector instead[2]

1. https://www.bouncingdvdlogo.com/logos/dvdlogo-01.png

2. https://www.brandsoftheworld.com/logo/dvd-video-0

Re: Bouncing DVD Logo

#53

Post by speedgoose »

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.

To be more specific about why the implementation is bad, it's hardcoded to refresh around every 30ms but not precisely 30ms.

Re: Bouncing DVD Logo

#55

Post by odensc »

ricardobeat wrote: post #48
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.

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... (I made the exact same thing last year as a joke for our team monitors)

I have a 60fps + 144fps monitor setup and when I move it to my high refresh rate one, it goes hyperspeed :) You should calculate delta time with performance.now() and change position based off of that.

Re: Bouncing DVD Logo

#57

Post by ricardobeat »

odensc wrote: post #55
ricardobeat wrote: post #48

Earlier quoted context omitted.

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... (I made the exact same thing last year as a joke for our team monitors)

I have a 60fps + 144fps monitor setup and when I move it to my high refresh rate one, it goes hyperspeed :) You should calculate delta time with performance.now() and change position based off of that.

Haha, indeed. A correct implementation would calculate (pixel) movement speed based on a delta from last frame, left that out to simplify the code.

EDIT: I added a simple rate-limiting function :)

Re: Bouncing DVD Logo

#60

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

Post reply on HN