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

Berkeley Systems “After Dark” screensavers recreated in CSS

bryanbraun.com

Post reply on HN
Print view View original

141–150 of 153 posts

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#141

Post by dublin »

toast0 wrote: post #114
joezydeco wrote: post #98

Earlier quoted context omitted.

I think writers for Wired in the 90s were paid by the buzzword.

In the most generous framing, Wired was (is?) a monthly magazine focused on how tech and the people in it are changing the world, oriented to a general audience. Every article needs to be about something that's world changing (positive or negative) and they need enough articles to put in between all the ads they sold. If there isn't enough world changing stuff in a given month, or the writers got started on the wrong…

I remember someone once describing Wired as a dumbed-down version of High Technology and Byte dressed up in Mondo 2000's clothes. That's pretty accurate. Sadly, Wired has somehow been the one that still exists...

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#142

Post by rasz »

brundolf wrote: post #136
rasz wrote: post #75

On one hand super cool due to tricks employed, on the other CSS animations tend to be very power hungry https://www.bryanbraun.com/after-dark-css/all/rainstorm.html takes Some time ago I noticed an older 3GHz i5 laptop, otherwise perfectly usable, would start to struggle decoding h264 webcam stream because webmaster decided to use CSS animation for a scrolling title bar superimposed over video feed.

I'd assume CSS animations would be much more efficient than JS-based animations because they can be entirely comprehended and executed by native code I wonder if there's some unnecessary reflow going on here? (reflow forces animations to happen on the CPU instead of the GPU)

Me too. They were designed in a way any modern hardware Accelerated GUI 2D/3D engine should be able to perform them entirely in hardware with CPU just pre filling command lists. When I researched the problem I found they might be much leaner on Safari which isnt surprising considering they were proposed by WebKit in 2007, and Apple (in its fight vs Flash) would want them optimized for phone battery. On Chrome they are second class citizen. There isnt even a visibility check - CSS animation will run on 100% obscured or offscreen elements.

You can edit

    .rain {top: -4800px;
to top: 4800px, CPU utilization doesnt change. It sure feels like some procedure spinning in place burning CPU doing nothing. Just a reminder, Rain is implemented in a clever way, its blitting one 800x600 bitmap 6 times per animation frame to a frame buffer. Worst case scenario its 600MB/s fillrate done entirely by hardware accelerated 2D engine, yet Chrome is using ~30% of one 4GHz CPU core doing this.

Hmm, maybe its reading buffer back from GPU and compositing in software? I did an experiment and deleted 5 of the 6 DIVs reducing load to 100MB/s fillrate and CPU utilization didnt even budge .... so Chrome is doing something stupid like reading GPU buffer back to main memory and pushing it to GPU again. This explains why my older i5 laptop was so loaded by stupid tiny text scroll.

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#143

Post by ericbarrett »

sneak wrote: post #109
mmcconnell1618 wrote: post #108

Earlier quoted context omitted.

Part of the reason these are so captivating is that they are slowed down instead of real time. This gives them an other-worldly quality where you can see extreme detail but in a different motion than you would normally see it.

The other reason is that you have to have biggest-company-in-the-world-sized connections (and pocketbook) to get permission to run a 120fps 8k drone over an active LAX. Such a subtle huge flex.

Airports have PR departments. LAX's is: https://www.lawa.org/groups-and-divisions/public-relations

I'm sure for the right opportunity they'd work with anybody. I suspect it's not a matter of connections, but rather, "We'll put a gorgeous shot of your facility on millions of TVs worldwide" is a slam-dunk pitch.

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#144

Post by rasz »

nine_k wrote: post #100
rasz wrote: post #75

On one hand super cool due to tricks employed, on the other CSS animations tend to be very power hungry https://www.bryanbraun.com/after-dark-css/all/rainstorm.html takes Some time ago I noticed an older 3GHz i5 laptop, otherwise perfectly usable, would start to struggle decoding h264 webcam stream because webmaster decided to use CSS animation for a scrolling title bar superimposed over video feed.

That's why it's a good idea to develop for and test on outdated and underpowered hardware, or at least an emulator of it. Many of your customers won't have top-notch systems.

This might be a situation where we need to publicly shame Google into optimizing Chrome. Something akin to 1998 CSS1 Test Suite ACID tests https://thehistoryoftheweb.com/the-rise-of-css/ making a case for IE/Netscape fixing their bad implementations.

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#145

Post by noduerme »

JKCalhoun wrote: post #76
mistrial9 wrote: post #39

Earlier quoted context omitted.

RIP Tom Dowdy

Tom was a good guy.

I knew Tom Dowdy's name as a 14 year old kid in the early 90s; from DarkSide, which was an important inspiration to me trying to write graphics demos at the time, and I knew I'd seen his name in Apple credits. I've just been reading today how admired and loved he was, and I fell deep into his journals from the culinary academy, and his over-the-top method of making cassoulet, which is my favorite dish on the planet and seems like it was one of his. Many years later, my ex and I also talked about quitting the racket and going to culinary school, but I didn't have the guts. He sounds like an extraordinary fellow, and his work left an impression in my brain. I got DarkSide running on macintosh.js today and took a screenshot of his lovely "Kaos" algorithm, which builds these abstract works over time; I remember watching it for hours on a Mac II.

https://ibb.co/ZTntfD5

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#146

Post by Cockbrand »

joezydeco wrote: post #99
Cockbrand wrote: post #60

Earlier quoted context omitted.

Haha, PointCast was one of the earliest "next big thing" apps I installed on my Mac in the Dot-com era. I never really found it useful apart from the always available implementation of SameGame.

Man, but didn't it feel like the future? All this information in real time being shown on-screen! What's the weather? What is Ciena's stock price right now? Never mind those ads that keep showing up , that's just a minor inconvenience, right? And yeah, I need to keep my modem on all the time and tie up my voice line but maybe someday we'll get that T1 installed in the office.

It sure did feel like the future, like a lot of things in the dot com era. Exciting times!

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#147

Post by citrin_ru »

willis936 wrote: post #13
Cthulhu_ wrote: post #6

Earlier quoted context omitted.

Screensavers are a thing again on modern TV because OLEDs have a pretty serious burn-in problem apparently. Not much creativity there, probably because it should not be annoying, so it's stuff like art galleries or subtle fireworks effects that also 'train' the pixels. Best screensaver I used to have was the BSOD one from xscreensaver, so many people fell for it. Second best is the nyan cat screensaver. Currently hav…

The electron guns in CRTs also take about 30 minutes to warm up. Before then the black level is pretty high and the image is washed out. So there is benefit to running a screensaver on a CRT but OLEDs do best when just put to sleep quickly.

It takes about 5 second for my LCD monitor to wake-up after a sleep, which is a bit annoying. A screen saver disappears in a fraction of a second even on old hardware.

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#148

Post by xjwm »

ahmedfromtunis wrote: post #12
fredley wrote: post #3

Beautiful. The nostalgia hit me very hard with this. I remember in the original version you had all sorts of options, and could even combine screensavers. For people who may not remember: screensavers used to be a neccessity as old CRT tubes would 'burn in' an image if they held it static for too long - leaving a shadow of the static image permanently. Screensavers kicked in after a few minutes and displayed somethin…

Oh, so that's why! Until now, I believed they were used to reduce energy consumption when the screen wasn't used. That's why I believed they were just some gimmicky, useless piece of software. A bit off topic, but I also miss the screen obliterating hammer we used to play with as kids. Any modern, web rendition of that piece of stress-reliever?

It looks like the program you are talking about, "Desktop Games," is still hosted on: http://www.gemtree.com/program.htm. No idea if it works on modern Windows or not.

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#149

Post by rasz »

gnicholas wrote: post #119

Is there a way to slow down the animation or make it more choppy, so it better recreates the experience of running After Dark on my Performa 25 years ago?

open devtools, edit CSS, speed is usually in seconds transformation takes, bigger number = slower

EDIT: or even better

    document.getAnimations().forEach(animation => animation.playbackRate = 0.1)
https://developer.mozilla.org/en-US/docs/Web/API/Animation

Re: Berkeley Systems “After Dark” screensavers recreated in CSS

#150

Post by alexweber »

thangalin wrote: post #134

https://uxfactor.ca/1151/ I know one of the authors of Flying Toasters and sent him the link. Here's what he had to say: "It's a rough approximation, which is super cool, but misses all of the nuance. "You see, back in the day, there were very strong competitors to After Dark that had as much or more animations. The thing that set After Dark was a "je ne sais quoi" that felt like an elevated experience. Both the cust…

The first thing I looked for was to see if the toasters would roll, eject toast, flap faster, etc. I guess I'll have to fork it to add those features!
Post reply on HN