7 ms·
Show HN: I recreated 90s Mode X demoscene effects in JavaScript and Canvas
After 25 years of writing software, I was feeling nostalgic for the kinds of things that got me into programming in the first place: the old DOS demoscene. I spent a weekend seeing if I could recapture some of that INT 13H VGA magic using today's web tech, but with the old-school constraints of doing it from scratch.
The result is this portfolio of ten classic effects running in a single HTML file. It's all vanilla JavaScript writing to a <canvas> element, with no external libraries. It was a fun challenge to implement things like:
* The color palette cycling and smooth fading in the Plasma demo.
* The buffer-averaging algorithm for the Fire effect to make the flames feel more natural.
* The distance-based texture crossfading in the Tunnel to create the illusion of flying through different sections.
* A 2D scalar field for the Metaballs to calculate the surface normals for that classic blended, metallic look (I did the best I could with the given constraints).
It was a great exercise in getting back to first principles and a reminder of how much those early demo programmers could accomplish with so little. I hope it brings back some good memories for others who grew up with this stuff.
I'd love to hear about your favorite classic demos or if there are any other iconic effects you think would be a fun challenge to add.
Cheers!
- pentaphobe 1y agoNeat! The nostalgia is palpable. Off topic: we always referred to mode-x variants as MCGA, TIL that's more of a colloquial term than a technically accurate one [1] [1]: https://en.m.wikipedia.org/wiki/Multi-Color_Graphics_Array https://en.m.wikipedia.org/wiki/Multi-Color_Graphics_Array
- gneissguise 1y agoThanks for sharing, I do not believe that I was familiar with that term at the time.
- snozolli 1y agoAFAIK, MCGA has nothing to do with Mode-X. Mode-X was 320x240, and was achieved by manipulating VGA settings. MCGA supported Mode 13h, but I see no evidence that it could be manipulated to output 320x240 or that it supported planar memory, which is generally considered synonymous with Mode-X. In fact, from what I can tell, MCGA didn't have enough memory to support planar mode.
- cluckindan 1y ago[flagged]
- guiambros 1y agowow, well done! Pretty solid implementation, genuinely Future Crew-worthy :)
- gneissguise 1y agow00t! Greetz!!!1
- pengaru 1y agoNeat, but beyond the 320x240 resolution I don't have the impression you're really emulating anything uniquely mode-X here (not that it would really make sense to do so)
- gneissguise 1y agoYou would be correct, it's more the appearance of the demoscene than the actual underlying mechanism. A true in browser mode-x API would take me much longer than a weekend to implement.. But it does sound like a neat challenge!
- juhanakristian 1y agoWell done! These look very authentic. I remember creating the fire and plasma effects when I was first learning how to code in the late 90s.
- gneissguise 1y agoOh yes, I have similar memories mixing asm and pascal together in Turbo Pascal to get interesting results!!
- KingOfCoders 1y agoMore like 80s Amiga effects :-)
- gneissguise 1y agoI could see that too. I didn't own an Amiga but a friend of mine from school did. We had a blast playing Gobliiins!
- KingOfCoders 1y agoI think starfield was the first effect I wrote as a demo coder in the 80s. Then a Copper wobbling picture I think (Like the Star frontier intro) - or copper bars, then a sin scroller. Nearly joined TRSA because one coder in our group was a genius (not me!) but deal fell through :-(
- gneissguise 1y agoOh man that would have been so cool! Sorry that it fell through.. I remember making infinite ASCII mazes by alternating forward and backward slashes in the late 80s early 90s. That would have been the grade school computer lab days for me and I didn't have the to do anything better so it was mazes or controlling the turtle in LOGO
- KingOfCoders 1y agohttps://10print.org/ https://10print.org/ <3
- gneissguise 1y agoWow now that brings back memories! Thanks for the link!
- dr_dshiv 1y agoThanks for putting this together! I’ve been thinking a lot about demoscene in a Vibecoding era. Demoscene was often very close to the metal; Vibecoding is often completely abstracted from it. To explore this tension, I’m cohosting an 8bit game design workshop (pico8) in Amsterdam this summer. Just for fun. Working with intense constraints can bring a lot of creativity. I really want to see how AI affects the workshop vibe.
- gneissguise 1y agoIt was my pleasure to work on and share, glad you liked it!
- elpocko 1y ago>very close to the metal >(pico8) But PICO-8 with its integrated tools and Lua programming is super high level, pretty far removed from "8bit". It's only 8 bit in aesthetics, entirely artificial and forced. Why not write games for the 2600, the C64 or the NES to experience real constraints of an actual 8 bit platform, the actual "metal."
- dr_dshiv 1y agoI know, tell me about it, we’ve been debating this, tbh. We landed on pico8 to introduce the ideas of creativity within constraints as there is a very active community and nice tooling. We’ve done NES workshops before, but always with CS students and eproms. 6502 assembly isn’t that complicated, but can be scary.
- elpocko 1y agoI've been thinking about making a fantasy computer/console that uses an emulated 65C02 CPU, maybe a bit simplified -- every instruction only taking 1 cycle, for example. You could use all existing tools for the 6502, like the amazing 64tass, and there's an interesting high level language called prog8 (https://github.com/irmen/prog8 https://github.com/irmen/prog8) that's relatively easy to use. Not sure if there's any interest for something like that.
- kookamamie 1y agoNice. Except that Mode X was not usually called 13h. The former would be 320x240 and the latter 320x200. Technically X would be a variant of the 13h, though.
- ale42 1y agoAnd actually, INT 13h is the BIOS interrupt to access block-based disk I/O functions (like sector read, track format, etc.). The INT used for mode-setting is 10h (with AH=00h and AL=13h as mode for 320x200 at 256 colors).
- gneissguise 1y agoThank you both for the corrections, I was a teen in the 90s so I could have had it wrong or misremembered. I just looked up the 13h interrupt and you are absolutely right!
- kookamamie 1y agoAn awesome contribution nevertheless!
- gneissguise 1y agoThank you!
- QuiCasseRien 1y agothank for make me back to 25 years ago with the star windows screensaver ^^
- gneissguise 1y agoAnytime! I was also trying to add a Star Wars like hyperspace feature to the starfield demo but I failed miserably at implementing it!
- abrookewood 1y agoThank you - takes me back :)
- gneissguise 1y agoYou're welcome, it's my pleasure to share with ya!
- luismedel 1y agoNice. But if I remember correctly, Mode X was a special VGA mode to squeeze a bit more performance (due to planes and full graphics memory addressing), not the "normal" MCGA 320x200x256 (13h) If you're interested, I also implemented a few effects like lens[0] and Jare's fire[1] along with some other amusements[2] [0] https://toys.luismedel.com/lens/index.html https://toys.luismedel.com/lens/index.html [1] https://toys.luismedel.com/fire/index.html https://toys.luismedel.com/fire/index.html [2] https://github.com/luismedel/js-toys https://github.com/luismedel/js-toys
- gneissguise 1y agoThanks for sharing the link! I remember the lense demos, and I remember downloading one or two of them from a BBS that had NSFW pictures rendered in the background.
- wvh 1y agoThat's one way to stimulate memory... I was so into this in the mid-90s. I tried some assembly but I wish I would have been better at the maths part back then.
- bhouston 1y agoX-Mode is formally: 320x240 (square pixels) with 256 colours Full details: https://en.wikipedia.org/wiki/Mode_X https://en.wikipedia.org/wiki/Mode_X
- deleted 1y ago[deleted]
- rareitem 1y agoAmazing, I was not born in that era but it makes me feel nostalgic too. How does on go on to learn to make animations like this?
- gneissguise 1y agoStart off small, you gotta know your underlying API. For this demo it's JavaScript and the HTML5 canvas API (which is MUCH easier to learn than the languages of the 90s except for BASIC) https://www.freecodecamp.org/news/drawing-on-a-canvas-element-with-javascript/ https://www.freecodecamp.org/news/drawing-on-a-canvas-elemen... From there, you'll need a good understanding of loops, control flow, data structures like arrays to store the pixels, lines, shapes, and colors, wiping and redrawing the screen between "ticks" (a single pass of the main loop), and refresh timing to control the speed of the animations. On a side note there's actually a refresh bug in my plasma demo I just noticed a moment ago... if you leave it open for too long on plasma it starts redrawing faster and faster until it looks like glitch-art!
- rollulus 1y agoGood job. Looks authentic. But you forgot the rotozoom!
- gneissguise 1y agoD'oh! Now that I'm in my mid 40s there's so much I've forgotten! Thank you for the reminder
- leptons 1y agoYou should check out dwitter.net if you have not already.
- gneissguise 1y agoJust took a look, very cool algorithmic art! Thanks for sharing!
- stuaxo 1y agoWonderful. Did you simulate through weird bitplains of VGA? I found them hard to get my head round, still do.
- gneissguise 1y agoExcellent question. This is more a modern chunky pixel framebuffer, not planar. The spirit of the project, however, was to emulate the tricks that bitplanes made famous. The plasma and flag effects, for example, don't move any pixels; they just cycle the color palette's offset against a static pattern, which is a direct software simulation of that classic Amiga hardware hack.
- TrackerFF 1y agoThe vector one is still alive and kicking. I've lost count how many current websites have that one on their landing page.
- gneissguise 1y agoYep it has totally made a resurgence with the background animation trend showing up in modern web UI.. except without the pixelated appearance and the green phosphor color.
- p1dda 1y agoThanks! So great to watch these demos in 80-90's of the wizards creating these spectacular visuals.
- gneissguise 1y agoHeck yeah you're welcome! It was a blast to put together
- gneissguise 1y agoIf anyone is interested in doing algorithmic art while learning Clojure/ClojureScript then I highly recommend checking out the Quil library: https://landofquil.clojureverse.org/ https://landofquil.clojureverse.org/ http://quil.info/ http://quil.info/ https://github.com/quil/quil https://github.com/quil/quil Just lean into the declarative lisp style and immutable data and make some beautiful art to share with others!
- stuaxo 1y agoWould like to see an old school vowel landscape.
- TuringNYC 1y agoGreat nostalgia! You should also do the multi-colored rolling pipes, that was a staple!
- layer8 1y agoAlready in the 80s, though.
- bhouston 1y agogood job!
- gneissguise 1y agoThank you very much! I love how I never get any accolades for my other engineering work, but this demoscene recreation was a smash hit! Not complaining at all, I'll take any recognition I can get. I've been recovering from major burnout earlier this year, and this has lifted my spirits exponentially. I appreciate your comment and all the kind words others have shared.
- bhouston 1y agoBTW I myself was a demo scene coder back in high school, which for me was 1995-7: https://github.com/bhouston/2DBumpMapDemo1996 https://github.com/bhouston/2DBumpMapDemo1996 https://github.com/bhouston/3DMaskDemo1997 https://github.com/bhouston/3DMaskDemo1997
- gneissguise 1y agoNice bumpmapping and phong shading!
- lofaszvanitt 1y agoSecond Reality waaa
- layer8 1y agoHas anyone ported it to JS yet?
- gneissguise 1y agoNot sure, but Future Crew was soooo good. Someone should take a stab at it! I can offer what little I know to help.
- ryan42 1y agoI always liked this one. it is really impressive and I used it as a screensaver for many years. https://www.pouet.net/prod.php?which=53816 https://www.pouet.net/prod.php?which=53816
- gneissguise 1y agoIndeed, that is very impressive!!!
- doublerabbit 1y agohttps://www.wab.com https://www.wab.com is another beautiful resource for demo enthusiasts. JS too.
- gneissguise 1y agoWhoa cool, thank you for sharing that link!
- rep_movsd 1y agoMay I humbly request you to join the dwitter.net community?
- gneissguise 1y agoYou're the second person to mention dwitter.net, now I feel like I have to... Got a busy week coming up but when I have more downtime I'll join and share!
- tmaly 1y agothis reminds me of choosing a screen saver for my CRT monitor in the early days.