[HN Gopher] Bouncing DVD Logo
___________________________________________________________________
Bouncing DVD Logo
Author : aloukissas
Score : 196 points
Date : 2020-04-15 19:54 UTC (3 hours ago)
(HTM) web link (www.bouncingdvdlogo.com)
(TXT) w3m dump (www.bouncingdvdlogo.com)
| balazsbela wrote:
| My wife's version uses SVG for scaling and is also responsive on
| resize.
|
| https://github.com/boglarkasebestyen/dvdscreensaver
| lanius wrote:
| Anyone know who the original creator of the bouncing DVD logo is?
| kens wrote:
| 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.
| MayeulC wrote:
| As to why they are not necessary anymore: we just turn the
| screen off (some displays, especially OLED, are still prone to
| burn-in).
|
| This was not necessarily wanted in OLD CRTs, where the startup
| sequence could take a while (and possibly other factors, such
| as reducing the lifespan, but I'm not sure about this).
|
| Funnily, we are starting to see a bit of a comeback of these in
| OLED smartphone that have an always-on display to show time and
| a few things: the illuminated portion generally moves over
| time.
|
| You can see some burn-in on old phones, in the notification
| areas, the taskbar for computers, or sometimes the always-on TV
| panels at airports or train stations.
| hadlock wrote:
| 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
| fred_is_fred wrote:
| It didn't even occur to me that this would need to be
| explained. Up next we should talk about why it was bad to
| leave VCRs paused for long periods of time.
| katzgrau wrote:
| Just following this thread to see if anyone here thought
| screensavers were just for fun :)
| Arbalest wrote:
| DVD was also popular around the time that Plasmas were being
| introduced, which also had burn in issues.
| hkiely wrote:
| This is key.
| kleiba wrote:
| Funny, just saw that same animation 10 minutes ago on my CRT.
| [deleted]
| tantalor wrote:
| 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 wrote:
| Probably more work to rip it out of your build pipeline than
| just reusing the config you use for all your other projects.
| ComputerGuru wrote:
| 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.
| speedgoose wrote:
| To be more specific about why the implementation is bad, it's
| hardcoded to refresh around every 30ms but not precisely 30ms.
| jefftk wrote:
| Your computer is plenty fast, this is just written in a simple-
| but-slow way. See discussion under
| https://news.ycombinator.com/item?id=22882747
| paxys wrote:
| "Code quality" is fine. This particular bit of code isn't
| written very effectively.
| ricardobeat wrote:
| 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)
| xenonite wrote:
| I am sorry to say, but my MacBook Pro 2014 i7 is stuttering
| in Safari 11.1 on a 4k external screen.
| californical wrote:
| It lags pretty bad on my Pixel phone too..
| odensc wrote:
| 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.
| ricardobeat wrote:
| Haha, indeed. A correct implementation would calculate
| (pixel) movement speed based on a delta from last frame,
| left that out to simplify the code.
| SergeAx wrote:
| On my Chrome there are flashing scrollbars when logo hits
| right or bottom boundary.
|
| No wonder modern frontend is such a mess.
| slau wrote:
| Interestingly, it's smooth as butter on 3 year old phone.
| ssalazar wrote:
| Its not the right tradeoff for everything, but this took 10
| minutes to code and runs on practically every modern computer
| in existence.
| BjoernKW wrote:
| With these dedicated devices the engineers often were able to
| cut corners or use custom hardware.
|
| This probably wasn't the case with DVD players (because the
| effort wouldn't have been worth it for a mass market consumer
| product) but 1980s Amiga home computers for example in some
| regard still outperformed mid-1990s PCs, which nominally were
| several orders of magnitude faster.
|
| They were able to pull this off by clever hardware tricks and
| due to custom chips that were highly optimised for very
| specific use cases.
|
| Run-of-the-mill PCs on the other hand were standardised and
| designed to perform good on average in most situations, not
| just very specific ones.
| monktastic1 wrote:
| 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.
| twomoretime wrote:
| I wonder how many children have been conceived to this logo.
| pacomerh wrote:
| 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
| ChrisArchitect wrote:
| add (2012) to title
| brundolf wrote:
| Makes me think of this
|
| https://www.youtube.com/watch?v=QOtuX0jL85Y
| Groxx wrote:
| I always think of https://www.youtube.com/watch?v=m8NAlDOCG6g
| when anything dvd-logo-related comes up
| brundolf wrote:
| That's pretty funny, but I think it's also fake
| dewey wrote:
| It's a pretty common template
| (https://www.youtube.com/watch?v=DuZP37qwzAE) for inserting
| videos. You can see the original video on the corners of
| the black overlay.
| iamwpj wrote:
| I watched the site for a bit just to see if it would hit the
| corner.
| tholman wrote:
| Some shameless plugs, My take on the matter -
| http://tholman.com/special-screen-savers/1/ ... and a 5ish
| minute segment at a conference talk, explaining the math of
| corner hitting, and my solutions
| https://youtu.be/iGPzwotXgfk?t=415
| lowdose wrote:
| Right when you think now I know how deep the knowledge
| pockets of HN go you get surprised by a comment like this.
| Never imagined someone giving a talk about such an obscure
| digital event.
|
| What an awesome explanation. Thank you for sharing!
| barbs wrote:
| Is there a screensaver version of this? Or a way to turn this
| into a screensaver?
| egfx wrote:
| Try https://gif.com.ai to turn it into a gif. You can set
| timing with a bouncing </marquee> tag to make it move from end
| to end. I'm not aware of any tools to turn gifs into
| screensavers however. I'm pretty sure they exist though.
|
| I made one a little while ago https://imgur.com/7t9svTV
| dylan604 wrote:
| That's got to be one of the least efficient suggestion I've
| read in a long time. GIFs are horrible, except they are
| awesome. In a 90s sense of awesome.
|
| It would be much more efficient to turn it into a proper
| video.
| egfx wrote:
| GIFs are sadly so misunderstood :]
| dylan604 wrote:
| 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.
| pier25 wrote:
| 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/
| echeese wrote:
| I wrote my own version - seems to run smoother
| https://speets.ca/dvd/
| [deleted]
| herpderperator wrote:
| It stutters for me, but less than the original.
| [deleted]
| aphextron wrote:
| >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.
| tantalor wrote:
| 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.
| augusto-moura wrote:
| The problem I think is that transitions have fixed amount
| of time, both long and short travels finish with the same
| amount of time giving a different velocity of movement.
| Also executing Javascript every frame is not that heavy
| [deleted]
| ajflores1604 wrote:
| 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 wrote:
| 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.
| jayflux wrote:
| This looks like it's just 2D so translate() would be enough,
| almost all of the functions under transform are GPU
| accelerated.
| nathancahill wrote:
| Yes, they are now. Initially, only translate3d was
| accelerated so there's a lot of code that uses that still
| for 2D animation.
| ricardobeat wrote:
| 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...
| aphextron wrote:
| 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...
| n_u_l_l wrote:
| 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
| tengbretson wrote:
| 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.
| XaspR8d wrote:
| Or alternatively, write it as a CSS animation and modify it on
| collision.
| kamikaz1k wrote:
| It's a pretty simple page, setTimeout should work well enough.
| Is the interval too high?
| winrid wrote:
| The issue's not setTimeout. Even with requestAnimationFrame,
| you'd combine it with setTimeout to control framerate and cpu
| usage.
|
| The issue is the css properties manipulated, as commented by
| another person.
| kroltan wrote:
| 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.
| jonny_eh wrote:
| Which causes visual tearing.
| [deleted]
| isaidthis wrote:
| Make the browser window real small and things get crazy.
| thijsvandien wrote:
| Thanks, I hate it.
| echeese wrote:
| It reloads the page when you resize
| NullPrefix wrote:
| For me it doesn't change the play area. If I reduce the
| window size then the logo just flies off screen.
| kroltan wrote:
| Making this and not having a counter of corner bounces should be
| inconstitutional! </humor>
| aloukissas wrote:
| 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? :)
| nikital wrote:
| 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)
| pryelluw wrote:
| I love this so much that am debating turning it into a native
| screensaver.
| augusto-moura wrote:
| Damn I didn't read the troll part in time
| krat0sprakhar wrote:
| Haha that troll part is awesome!
| [deleted]
| 1123581321 wrote:
| I love this. And for the first few bounces, I was worried the
| real troll was that it would never even approach the corner. :)
| mrzool wrote:
| I spent way too much time watching this but eventually the
| trolling part was worth it.
| justwalt wrote:
| It startled me a bit, lol.
___________________________________________________________________
(page generated 2020-04-15 23:00 UTC)