HN Explorer

Show HN: An homage to Tom Dowdy's 1991 screensaver, "Kaos" (thestrikeagency.com)

153 points by noduerme ↗ HN
So, I was about 11 years old and just got my first Mac, a IIsi, and of course everyone had AfterDark, but there was this other screensaver program called "Dark Side of the Mac". And within it was, I think now, the most beautiful screensaver ever written. It was called Kaos.

Kaos would take anywhere from 10 to 30 seconds to slowly iterate on a single image, starting with a few colored dots and growing into webs within webs of algorithmic beauty.

I'm not sure how Tom Dowdy actually wrote the program. What I've done here is to try to reverse engineer how it might have worked, but to animate it at the same time.

Freezing a frame (by clicking) seems to often yield something close to the original. My method is to cycle between 1 and 30 lines, with spaced out pixels, and then iterate the whole buffer to draw fainter and fainter points within a radius from any point that's already lit, while also amplifying the ones that were lit before and shifting their colors slightly at the same time.

Anyway, I did this tonight but I've been thinking about it for weeks, so, I hope someone enjoys it. Cheers!

78 comments

[ 2.5 ms ] story [ 120 ms ] thread
boriskourt
It reminds me of a Cloud chamber used to study ionizing radiation. Here is a timestamped video of one I saw recently: https://youtu.be/PVpP9gcnIcE?t=325
dhosek
Cloud chambers are surprisingly simple things. In grade school, following instructions from an old issue of Scientific American, I made one from a couple Mason jars (with assistance from my dad for the glass cutting) for the school science fair.
duxup
Great job!

I don't think it's just nostalgia... but whatever it is I love a lot of the retro / past days of computing UI, UX and graphics. IT feels better than the current state of flat and flashy... everything.

I don't know that the design and look / feel was entirely intentional, or how much was just the limiting factor of experience and computing / libraries available but things feel so much more straightforward and usable at times.

You don't even have to go that far back to get that feel / simplicity: https://cs16.samke.me/

This screensaver looks great and feels like almost everything I would want from a cool screensaver or even just a moment to zen out.

noduerme
Thank you! This has no libraries, it's just pure javascript rewriting a big array of r,g,b,a pixels and posting it up to a canvas as quickly as possible. Very much the way I learned to light up pixels on a TRS-80 ;) Which was actually the easiest way to do something like this.
lovegrenoble
>> simplicity: https://cs16.samke.me

Nice UI, can you add more elements?

noduerme
Hah. Thanks, that's not a UI ;) But I did kind of yak-shave as I did it to make the saver its own loadable class with adjustable inputs. so I'll probably add a few sliders eventually, once I launch my world-dominating screensaver company. Seriously though, I wanted to fine-tune the parameters to look as much like the original as possible, and there are about 6 different factors which go into that, any of which can be off by a few percent and completely change the effect. If there's any demand, I'd be happy to make it adjustable!
jonhohle
I think what’s crazy that for 30 years we had relatively optimal UIs with some huge improvements every now and then (obviously actionable controls, scalable graphics, exposé, etc.). Increasingly everything has been hidden and requires scrubbing or tapping everywhere, or in the case of iOS, possibly opening another app (Settings) to find some control.
swayvil
That's a good one. I don't think I saw it in Linux's collection tho. It should be.
hoherd
FYI I was able to get the original to run in an in-browser Virtual Machine by navigating to https://infinitemac.org/1998/Mac%20OS%208.1, clicking on "Macintosh Garden" at the bottom of the browser window, finding the app, downloading it, decompressing it, installing it, and configuring it.

Also the documentation for the original app was helpful. http://poubelle.com/DarkSideDocs.html

noduerme
Yes! The original does run in emulation. And to be honest, this attempt at cookery doesn't do justice to the beauty of the original. I'm still not sure what the secret sauce was. Maybe something to do with having the initial lines replicate each other rather than begin randomly placed...
[deleted]
(comment deleted)
entropie
This is really nice but for some reason i have horizontal and vertical scrollbars, which clouds the experience especially in fullscreen. (Tested on brave/windows)

https://i.imgur.com/bsdHalB.png

noduerme
Um, probably b/c the viewport doesn't have user-scalable=0 / maximum-scale=1. I don't want to add that at this point, because it's nice to zoom into sometimes.

It does have a manifest.json so you can install it as an app and run it full screen though ;)

evan_
Just add css style `overflow: hidden;` to your `body`.
noduerme
Did that now. Let me know if it fixed the issue for you.
egypturnash
Your description plus the name makes me suspect the original program was rendering a variety of "hopalong fractals": https://jolinton.co.uk/Mathematics/Hopalong_Fractals/Text.pd...

I miss having a wide selection of screensavers on my Mac. Nobody's writing new ones that properly plug into the system screensaver framework, everything on the App Store is just a little program that wants to run in the background, almost all my old .savers quit working and the ones that do still work have terrible framerates, and the ability to cram a Quicktime composition into the savers directory is long gone. Having some bit of procedural art on my screen was just nice.

fogleman
I just downloaded the screensaver pack mentioned by the OP and there's even another one in the pack called "Hopalong"!
noduerme
OMG. I remember that. I did not put that together!
noduerme
Hey, first of all, it's awesome to hear that. I miss screen savers and procedural animation so much... I mean, I used to zone out on them for hours, and try to write my own as a kid. It was a lot of fun. I realize the world has no need for them anymore, but I still like them. I'm not sure how we got to a point where there's only one basic screen saver for the Mac and it's almost impossible to find anything else.

I hadn't heard of hopalong fractals, but this code implements something very similar. Conceptually, if you scan the whole image space at each iteration and, for each lit pixel you light up another random pixel at half the brightness within a certain radius, things will begin to trend in one direction. Because if the first one you light happens to be off to the left, then there's double the probability that the next will be at least that far to the left, and then the leftward spread becomes exponentially more likely in the following iterations. I haven't actually encountered spiral arms in this, but maybe following hopalongs will be my next saver ;) There's a lot you can do with a little code here. You can warp the space you want to light up, or over/under light certain things, re-amplify, or run a fader on the entire screen in a few bytes. The possibilities are endless. But it's kind of like...how do I make a thing that looks like that? The fun part, for me, of making a screen saver or any procedural art is cooking with very few ingredients and lots of limitations.

self
> I miss having a wide selection of screensavers on my Mac.

i've used https://www.jwz.org/xscreensaver/ for over a decade on macos (currently on 15.3).

thinkingtoilet
Uh... that link has an interesting redirect.
petepete
I know what's coming and it still makes me laugh every time.
self
In my defense, I'd read about it on his blog, but years ago. I'd completely forgotten about it. Oh well.
IncreasePosts
You can't link to Jwz directly from hn, because jwz is a man-child

https://www.google.com/url?sa=t&source=web&rct=j&url=https:/...

mig39
That's weird, the site loads fine for me (macOS with Safari). Is it supposed to redirect elsewhere if it's clicked on hacker news?

Edit: I tried it on Firefox and Chrome, and it does indeed redirect to that ... image. But it doesn't do so with Safari (latest version, latest macOS). What is Safari doing differently? Not passing along the referrer?

jamie_ca
If your HTTP referer is HN, it redirects to https://cdn.jwz.org/images/2024/hn.png
DonHopkins
Rumor has it that photo is of one of JWZ's actual testicles, which he had removed and photographed just to spite HN, long before AI image generation was a thing. He's such a dedicated troll!
rezmason
The Mac screensaver ecosystem's going through some interesting shifts in recent years. The permissions and stated capabilities of 3rd party software are much more delineated now, but screensaver modules are architected in an old NeXTSTEP kind of way, where software you trust loads and runs software you don't.

It's not visible to end users, but nowadays, Apple-authored screensavers use a private framework, and 3rd party screensavers use the traditional framework. Sometimes the traditional framework hiccups. Because these aren't essential programs, presumably they are lower priority, so it may be a while before things settle:

https://github.com/AerialScreensaver/ScreenSaverMinimal?tab=...

https://github.com/AerialScreensaver/ScreenSaverMinimal/wiki...

Nevertheless, here are a few more contemporary offerings:

https://github.com/agarrharr/awesome-macos-screensavers

And here's mine from last year! Got another one in the works.

https://github.com/Rezmason/Iconic

jimmydoe
Thank you for the list. I found the pong saver I was missing. Your saver looks cool too! Looking forward to your new one.
mnky9800n
How do you learn this magic?
rezmason
It helps that other people struggled with this macOS Ventura era stuff out in the open, so when my QA tester (hi dad!) told me my screensaver was misbehaving in System Settings, the discourse came up in GitHub's search results.

Oh— and when researching for Iconic, I dug up BackSpace for NeXTSTEP and learned how OS X's ScreenSaver.framework came about. Devs distributing modules they produced for other devs' projects was much more prevalent in the early nineties! SuperSolitaire II, for instance, accepted a ".solitaire" program module and shipped a separate set of varieties:

https://ftp.nice.ch/pub/next/games/card/_SuperSolitaireModul...

egypturnash
Damn, that explains a lot. Thanks, Apple!
spot
i'm working on a new one :)
DonHopkins
Steam Ram? Mechanical Ewe? Atomic Goat?
dexwiz
Are these the same thing as strange attractors? I remember generating things that looked like this with a desktop program around 2005.
ocal5
Thanks, that's beautiful to discover.

From : https://www.themacattic.com/apps/8730/downloads2/About_DarkS...

Kaos Kaos draws “cloudlike” pictures in color using an interative fractal algorithm. This fader comes to you thanks to Reinoud Lamberts, and I recommend you check out his excellent “Kaos” program which is available on Usenet and other places. Reinoud was nice enough to send me the algorithm he used, and I took some time speeding it up and making it use a bit less memory – actually the final code isn't related very much to his, but the algorithm is. However, this fader still will only work on machines with 32 bit Color QuickDraw – sorry all of you Plus and Classic owners! Kaos renders its data into an offscreen area, finally moving it onto the screen once the image has darkened enough. Kaos continues darkening the image and displaying it to you until either a timer expires (3 minutes) or an element of the image becomes fully intense. Unless you select otherwise in the settings dialog, you will see a small dot moving from the bottom of the screen to the top – this is a “progress” indicator to let you know how far away the first image will be. It takes about 15 seconds to generate the first picture on a Mac II class machine. This fader needs a good deal of RAM and a large amount of CPU – so this fader isn't a good one to leave running if you are doing background printing, downloads, or compiles at the same time. The current SIZE resource within in the fader provides enough RAM for a standard Apple RGB monitor to be rendered at half resolution. You may lower this value (which will result in a chunkier image) or increase it (which will result in a slightly smoother image) via ResEdit. Those of you with 32 bit displays will find you can actually decrease it a great deal (probably to around 40 or 50 K) because 32 bit displays do not require the large offscreen rendering area that 8 bit displays do.

[deleted]
(comment deleted)
noduerme
This is fantastic, I had not seen this! Thank you.
kalleboo
I looked up Reinoud Lamberts's old homepage on the internet archive, and was amused by his licensing scheme:

> Pay the license fee, which is US $29 per Linux

> workstation, US $499 per user on any MicroSoft operating

> system, and US $49 per user on any other system. Send

> money orders for the required amount to Reinoud Lamberts,

> [address redacted]

morphle
Could you share the url to this page? I tried searching for it but could not find it.
kalleboo
Sure thing, https://web.archive.org/web/19970603112904/http://einstein.e...

The license was in the PostMan source download

morphle
Thx! I can now go trace Reinoud Lamberts himself through his parents address in the PostMan source download from that archived webpage. It's been 32 years since he had his Silicon Graphics workstation (on which he wrote his KAOS and PostMan software) in the room in my house that he rented. We never spoke again but we both became chip designers since.
kalleboo
Very cool!
morphle
You are aware your webserver is online but with a placeholder page?

I also have such a website online since 1993. I sometimes forget to check it for several years.

I'm thinking about putting KAOS and other screensavers on my webserver and an OS 9.2 with all apps and games.

Its already crowded with Squeak[1], 1978 Smalltalk[2], Etoys[3] and Shadama[4].

[1] https://codefrau.github.io/jasmine/

[2] https://smalltalkzoo.thechm.org/HOPL-St78.html

[3] https://squeak.js.org/etoys/

[4] https://tinlizzie.org/~ohshima/shadama2/

kalleboo
Ah oops the www. prefix redirect is dead, the bare domain works, didn't know I had places with the www still on there, thanks for bringing it to my attention

Cool links!

ChrisArchitect
Reminds of similar lines/polygon screensaver on Windows - "Mystify" aka "Mystify Your Mind", which still exists!
mfro
After a quick google I found someone had uploaded a remake of this with JS:

https://codepen.io/garthparkhill/pen/PyMPVR

noduerme
It makes sense. The great insight into all these kinds of screensavers is that you create a function that draws a line between two points, maybe with some amount of density and anti-aliasing. Then you create two random points, or four, and treat them like pong balls: They get a random velocity x,y and all they have to do is swap their x-1 or y-1 when they hit a side of the screen. Draw a line between them. And instead of refreshing the screen, just redraw over the last screen and fade any existing lit pixels. Boom, you have a fuzzy mustache screensaver.
kstrauser
How did that "fade any existing lit pixels" bit work? Do you just redraw the list N lines, fading in from black (to completely erase the oldest) to the full color of the newest?
recursive
In the windows one, there was no fade. It drew black lines on top of the old lines, and remembered a queue of about n=10 or so generations.
noduerme
It's true, the windows one didn't fade. But the basic idea is that all the pixel values are just in an array. You draw the whole array to the screen on each frame. So each frame, you run through that array and divide all the color values by 2 for example, and any which are less than a certain threshold you just change to zero. Then you fill the specific points in the array where you want the next line to be drawn. The net effect is to fade out the old lines over time. You don't need to keep a list of past positions, or have any objects ;)
kstrauser
Got it. That makes sense but it’d never occurred to me to think about it before. I guess you could use an array N items long, with 4 values (x1,y1,x2,y2) in each element, and just keep a pointer to the oldest entry, incrementing it each time.
noduerme
So, each ghost of a line is not stored at all. The moving line is stored as an object like you suggest. Each line has two Velocity-Point objects (which have 4 parameters: x,y location of the endpoint and x,y velocity of that point). So really a line can be viewed as an array with 8 values, which lives for the length of the whole program. I personally do kinda like object oriented code so it's helpful to think of the points and the velocity separately. But there's just one pointer to these values. The values are changed over time in that single Line object, and at each frame they're projected to the display buffer.

The display buffer is actually a flat 1D array which also lives through the whole program (mostly) where each 4 sequential values are the r,g,b,a for a single pixel. You don't ever need to copy that array unless you're doing something fancy with window resizing. A simple function translates any x,y coordinate pair (such as a point on a line) into the correct location in the flat array space, and you just modify that array as you go along. When you're done doing things to those values, you just overwrite the entire canvas with that 1D array in a single call.

In fact, the screen buffer array in this case was probably unnecessary, since <canvas> can easily let you get and set the values of individual pixels, draw lines, etc. But I wanted to do it in a flat array to reduce the number of draw calls to one per frame, and also to not overly bind my code to any particular display method.

kstrauser
I see, and thanks! Up next: star fields.
noduerme
mmm... that sounds fun! I'll have to think about how that works. I say never look anything up until you've exhausted everything you can come up with ;)
Workaccount2
I can't tell if I am missing something or if the beauty of this screen saver is largely of function of nostalgia rather than it's attributes.

It just looks like hardly visible lines of single pixels randomly bouncing around.

noduerme
You would not be wrong. It was really just a short project to reproduce something I was very nostalgic for. Which I definitely did not expect to rank highly on HN! But I guess it touched on a nostalgia vibe for some other people too. This was something I thought about for a long time, ended up being a few hours twiddling at a bar. But... there was something I remembered that I wanted to get back and see again.
metadat
Is the code for this available? The minified Javascript is a touch difficult to make heads or tails of:

https://thestrikeagency.com/kaos/assets/index-7Wh69ljd.js

Edit: Thanks @noduerme! I had a feeling it looked like compiled TS output. p.s. it looks like you aren't currently hellbanned :)

noduerme
I haven't, like, made a repository for it or anything, but here you go:

https://thestrikeagency.com/kaos/src/

There's a bunch of extra experiments and junk in there that didn't make the rollup. It's pretty concise and basic, not a whole lot more verbose than what you see in the mini, ultimately (if you just format it out). Everything mostly does what it says on the box, but let me know if I screwed something up ;)

Peacefulz
I didn't expect to see my last name on here. Time to find out if we're related! Haha.

Super cool project by the way.

rezmason
I know it's a few years old, but you've also got a great portfolio of previous work OP: https://thestrikeagency.com

I know the kind of work and love that goes into this kind of project. From one software nostalgiac to another, I salute you noduerme

noduerme
Thanks for checking it out! You know what it's like, you get curious and start making stuff. I've been lucky to get to work on lots o' weird and fun projects over the years. That's actually my fourth portfolio site since the 90s, and it's already aged. The first was HTML, the second Flash AS2, then AS3... time goes on. I'm still sad that 15 years worth of my experiments and art were vaporized from the internet when Flash was killed, and most of it won't run in Ruffle yet, but we're almost to the point where those will be retro enough to revive, too.

Cheers!

[deleted]
(comment deleted)
at_a_remove
This is strongly reminiscent of the main animation in the arcade video game Qix.
dylanz
/me reinstalls electric sheep
aussieguy1234
press F11 on your browser to make it full screen to get the full experience.
forgotacc240419
Looks great! Could you fill the screen with black? It'd be a great OLED screensaver (I don't get why this isn't something people want more tbh, they look amazing with things like this on them) if the white overflow wasn't there
Aldipower
Great job! Also has 10% CPU usage, like the original back in the days. ;-)

My favorite screensaver was "Diatoms" from 1994 (?) on a SGI Irix machine. Still fire it up sometimes, just because of the screensaver.

https://www.youtube.com/watch?v=xWmj_ixreUg