19 ms·
Bouncing DVD Logo
- _bxg1 7y agoMakes me think of this https://www.youtube.com/watch?v=QOtuX0jL85Y https://www.youtube.com/watch?v=QOtuX0jL85Y
- iamwpj 7y agoI watched the site for a bit just to see if it would hit the corner.
- tholman 7y agoSome shameless plugs, My take on the matter - http://tholman.com/special-screen-savers/1/ 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 https://youtu.be/iGPzwotXgfk?t=415
- lowdose 7y agoRight 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!
- Groxx 7y agoI 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 7y agoThat's pretty funny, but I think it's also fake
- dewey 7y agoIt'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.
- rkul 7y agoThey should have edited the guy's phone screen too at 0:15 to complete this masterpiece.
- kleiba 7y agoFunny, just saw that same animation 10 minutes ago on my CRT.
- pier25 7y agoI 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/
- kamikaz1k 7y agoIt's a pretty simple page, setTimeout should work well enough. Is the interval too high?
- winrid 7y agoThe 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 7y agoIt'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.
- aphextron 7y ago
- isaidthis 7y agoMake the browser window real small and things get crazy.
- thijsvandien 7y agoThanks, I hate it.
- echeese 7y agoIt reloads the page when you resize
- NullPrefix 7y agoFor me it doesn't change the play area. If I reduce the window size then the logo just flies off screen.
- Slartie 7y agoIf you make it just large enough so the logo has a few pixels left and right to bounce, it starts vibrating and changing colors really fast. Looks like it's really angry from being confined :D
- nikital 7y agoA 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)
- augusto-moura 7y agoDamn I didn't read the troll part in time
- krat0sprakhar 7y agoHaha that troll part is awesome!
- 1123581321 7y agoI love this. And for the first few bounces, I was worried the real troll was that it would never even approach the corner. :)
- mrzool 7y agoI spent way too much time watching this but eventually the trolling part was worth it.
- justwalt 7y agoIt startled me a bit, lol.
- deleted 7y ago[deleted]
- pryelluw 7y agoI love this so much that am debating turning it into a native screensaver.
- 867-5309 7y agoit's like a watching a 1-player version of Pong only the only player is Comp
- ComputerGuru 7y agoIn 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.
- jefftk 7y agoYour computer is plenty fast, this is just written in a simple-but-slow way. See discussion under https://news.ycombinator.com/item?id=22882747 https://news.ycombinator.com/item?id=22882747
- slau 7y agoInterestingly, it’s smooth as butter on 3 year old phone.
- ssalazar 7y agoIts not the right tradeoff for everything, but this took 10 minutes to code and runs on practically every modern computer in existence.
- paxys 7y ago"Code quality" is fine. This particular bit of code isn't written very effectively.
- ricardobeat 7y agoIt'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/index.js 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)
- odensc 7y agoI 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.
- kroltan 7y agoMaking this and not having a counter of corner bounces should be inconstitutional! </humor>
- tantalor 7y agoWhy 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 7y agoProbably more work to rip it out of your build pipeline than just reusing the config you use for all your other projects.
- jimmaswell 7y agoPeople use a build pipeline for small JS projects? I just open an editor in a directory and start typing.
- dewey 7y agoIf 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 7y agoa 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 7y agoadd (2012) to title
- cryptozeus 7y agoSorry It does not touch the borders. I can't enjoy this :)
- twomoretime 7y agoI wonder how many children have been conceived to this logo.
- barbs 7y agoIs there a screensaver version of this? Or a way to turn this into a screensaver?
- egfx 7y agoTry https://gif.com.ai 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 https://imgur.com/7t9svTV
- dylan604 7y agoThat'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.
- deleted 7y ago[deleted]
- dylan604 7y agoOh 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 7y agoWhat was the role of ‘DVD programmer’ like? Could you tell us more?
- dylan604 7y agoDepends 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.
- balazsbela 7y agoMy wife's version uses SVG for scaling and is also responsive on resize. https://github.com/boglarkasebestyen/dvdscreensaver https://github.com/boglarkasebestyen/dvdscreensaver
- gitgud 7y agoNice, a bit too fast on my machine though. It should probably use a time-based interval, rather than updating every frame.
- dannyw 7y agoIt 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.
- chaps 7y agoThe strobe was a nice touch!
- lanius 7y agoAnyone know who the original creator of the bouncing DVD logo is?
- userbinator 7y agoI'd guess it was an embedded developer working on DVD player firmware.
- kens 7y agoAs 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 7y agoAs 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.
- tialaramex 7y agoWaterloo Station (in London, named after the bridge, which is in turn named after the battle, which was in Belgium) for a while had these full colour panels which I guess may have been plasma? These were used to display train information. They suffered terrible burn-in, and I was never sure why they were used. Eventually they ripped them out and replaced them with panels using the same technology (monochrome panels made of amber LEDs) that is used in the rest of the network for displaying information. The thing about information is that you don't want it to spin or hop about, it needs to remain perfectly still while a potentially large number (tens of thousands of people use the station in an hour, if anything goes wrong all those people want information) stare at the information and so it can't avoid burn in. I can see that for the advertising screens, the opportunity for huge full colour screens is worth the risk of burning in an image, and worst case you could in theory even charge an advertiser who insists on holding a single image for the cost of repairing/ replacing your screens. But the information screens don't much benefit from colour, the pixel-addressable LED screen is only a small improvement over prior electro-mechanical devices which of course couldn't burn in, why allow burn-in just to get a colour screen? Maybe they were cheap?
- deleted 7y ago[deleted]
- monktastic1 7y agoGives 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.
- aloukissas 7y agoHa! Posted this randomly 2 hrs ago, came back to see it #2 behind Apple iPhone SE announcement. We are all bored, aren't we? :)
- deleted 7y ago[deleted]
- user32556 7y agobecause people are in quarantine :)
- arle2 7y agomolo
- grecy 7y agoOut of curiosity, what's the physics of the bounce? Is it always angle of incidence = angle of reflection?
- rbanffy 7y agoOn actual DVDs it was flipping the velocity sign when hitting the corresponding border. Much like Pong.
- ridaj 7y agoWhat 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 7y ago> 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.
- fireattack 7y agoIt feels very laggy? Definitely not running in 60fps.
- tuxracer 7y agoIt's laggy in large part because it should be using https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requ... instead of setInterval
- jkeat 7y agoEven 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 7y agoWTF? Mind blown. And I've been hacking the web for nearly 20 years now.
- Zetaphor 7y agoIt'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
- saagarjha 7y agoThat doesn't work in my browser :(
- sedatk 7y agoit only moves horizontally on iOS.
- swyx 7y agodesktop chrome too
- scatters 7y agoIn 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 7y agoSame in Firefox.
- snickell 7y agoDamnit, now I have tayebbayri.com burned into my monitor... ;-)
- onkarshedge 7y agoAny Office fans here, waiting for it to hit the corner?.
- hnick 7y agoThe Office was definitely art imitating life for this one.
- thushanfernando 7y agoPam 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
- cdaringe 7y agoI 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
- aasasd 7y agoI'm more irritated by the huge margins than by the not-hitting-corner thing.
- fatiherikli 7y agoMy 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
- askvictor 7y agoPut this into a video file and you've got yourself a fabulous background for Zoom meetings.
- WhyNotHugo 7y agoApparently, you can only use images for zoom backgrounds :(
- deleted 7y ago[deleted]
- sswaner 7y agoJust 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
- swozniak 7y agoHere's my Android live wallpaper implementation: https://play.google.com/store/apps/details?id=com.stephanwozniak.dvdwallpaper https://play.google.com/store/apps/details?id=com.stephanwoz...
- arle2 7y agoBounce it
- tieguy2k 7y agoThank you for this