Earlier quoted context omitted.
Aren’t DVDs popular anymore?
Blu-ray has been around for a good while now.
And broadband adoption. I think streaming actually killed it, not a higher resolution format.
Bouncing DVD Logo
101–110 of 293 posts
Re: Bouncing DVD Logo
#102Earlier quoted context omitted.
That is not correct. setInterval is definitely the main issue here, especially with a 30ms delay, 33 or 16 would at least give it a chance to sync with refresh rates. Absolutely positioned elements do not trigger reflow, as the element is removed from the normal document flow [1]. See my example in another comment. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/position#ab...
Regardless of whether there is a reflow, translate() allows you to do subpixel animation [0]. It will always be smoother than animating CSS position [1]. [0] https://css-tricks.com/tale-of-animation-performance/ [1] https://www.paulirish.com/2012/why-moving-elements-with-tran...
> It will always be smoother
Once you're hitting 60fps there is no difference in smoothness regardless of method.
But in reality, it looks better if you avoid subpixel values, as the image will flicker slightly; the frames not aligned with the pixel grid will suffer blur or distortion. Try setting speed to 0.1 in the example to see it wobble. The effect is noticeable even on hi-dpi screens.
Not saying you should animate anything using position these days, CSS transforms are certainly the right tool.
Re: Bouncing DVD Logo
#103As 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 overu…
After CRTs, Plasmas had issues with burn in at least.
Re: Bouncing DVD Logo
#104As 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 overu…
Just following this thread to see if anyone here thought screensavers were just for fun :)
After Dark's "flying toasters" weren't just to prevent burn-in on your Trinitron.
Re: Bouncing DVD Logo
#105A 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)
it's like a watching a 1-player version of Pong only the only player is Comp
Re: Bouncing DVD Logo
#106Re: Bouncing DVD Logo
#107As 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 overu…
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
I think my favorite contextual example of this is the opening line from Neuromancer: "The sky above the port was the colour of television, tuned to a dead channel."
Means something very different now.
Re: Bouncing DVD Logo
#108Out of curiosity, what's the physics of the bounce?
Is it always angle of incidence = angle of reflection?
Re: Bouncing DVD Logo
#109In 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)
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.
Re: Bouncing DVD Logo
#110As 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 overu…
After CRTs, Plasmas had issues with burn in at least.
Plasmas were worse than CRTs for burn in.