Show HN: I recreated 90s Mode X demoscene effects in JavaScript and Canvas
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!
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
[1] https://toys.luismedel.com/fire/index.html
[2] https://github.com/luismedel/js-toys
320x240 (square pixels) with 256 colours
Full details:
https://en.wikipedia.org/wiki/Mode_X
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.
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://www.pouet.net/prod.php?which=53816
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.
>(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."
I never quite completed it, but I managed a emulator/assembler IDE in the browser. Making my own assembler let me play around with some ideas for macros.
It could even load programs from gists.
https://k8.fingswotidun.com/static/ide/?gist=ad96329670965dc...
Reflecting on it now, I think one feature that could help a assembler on devices like this is the ability to inline compile assignment expressions that use values of only one type. It would be easy enough to emit a stream of instructions for
or even using registers as expression values.The result would usually be what an assembler writer would write themselves.
I think a macro assembler that did that would ease a lot of the tedium of assembly while maintaining the near absolute control over memory use and IO that you need for low level coding.
Demos aren't just pretty visuals. Their entire purpose is to showcase the skills of the programmer in accomplishing something remarkable within a constrained environment, or within artificially imposed constraints. Using exorbitant amounts of resources to run a machine learning model to generate a muddy mixture of existing demos goes completely against this spirit. The idea of the two together is, frankly, repulsive.
This workshop is actually a forerunner to a workshop on demos with quantum computers, where the constraints are very real and creative participation is very lacking.
I just looked up the 13h interrupt and you are absolutely right!
https://landofquil.clojureverse.org/
http://quil.info/
https://github.com/quil/quil
Just lean into the declarative lisp style and immutable data and make some beautiful art to share with others!
Thank you for the reminder
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!
I found them hard to get my head round, still do.
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.
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!
I didn't own an Amiga but a friend of mine from school did. We had a blast playing Gobliiins!