What it is
An experimental browser program that runs Conway's Game of Life using WebAssembly compiled into CSS. It displays the cell grid alongside a memory visualizer that shows the underlying buffers. The project grew out of a WebAssembly-to-CSS transpiler inspired by x86CSS.
From the developer
In the developer’s own words, from bucket.svc.moe.
Repository: https://github.com/el-ev/wss This project is heavily inspired by Lyra Rebane's x86CSS ( https://lyra.horse/x86css/ ). So I built a WebAssembly-to-CSS transpiler and spent some time optimizing its output. This is one of the programs it produced: the program runs Conway's Game of Life, store the grid in memory, then display the grid as well as buffers in the memory visualizer. The program polls the on-screen keyboard once every few cycles when it needs input, so you may need to hold a key down for a second or more for it to register. You may notice there's still a piece of JS in the page, which provides a faster and more reliable clock to the CSS runtime. Without JS, a CSS animation drives the runtime at about 1s per cycle. You can try the pure-CSS version at https://bucket.svc.moe/uploads/wss/life_nojs.html . It is slower but at a playable speed.
Editor takes
“A technical proof-of-concept that squeezes a whole game loop into CSS—impressive jam energy, but the 'game' itself is just a preset simulation with a gimmick.”
“The blinking memory grid and on-screen keyboard are pure retro terminal chic, though there's no sound and the visuals are strictly utilitarian.”
How to play
Open the page in an up-to-date Chromium-based browser. When the program needs input, use the on-screen keyboard and hold the key down for a second or more, since input is polled only once every few cycles. The simulation advances on a CSS-driven cycle, with a faster version available using a small JavaScript clock.
Tips
- Use an up-to-date Chromium-based browser; other browsers may show the unsupported-features warning.
- Hold a key on the on-screen keyboard for a moment, because the program only checks input every few cycles.
- If you want a faster pace, use the main JS-clock version; the pure-CSS version runs about one cycle per second.
- Watch the memory visualizer to see how the grid and buffers are stored.
- Since the grid lives in memory, reloading the page discards the current state.
Questions
What is this exactly?
It is an experimental demo that runs Conway's Game of Life through CSS generated from compiled WebAssembly, with a memory visualizer.
Which browser should I use?
An up-to-date Chromium-based browser. The page says the required CSS features are not supported in other browsers.
Why are my key presses delayed?
The program only polls the keyboard once every few cycles, so hold a key down for a second or more until it registers.
Is there a faster version?
The main page includes a small piece of JavaScript to provide a faster and more reliable clock. A pure-CSS version exists but is slower.
Does it save progress?
No. The grid is stored in memory and there is no save system, so the state is lost when the page is closed or reloaded.
Comments 0
Log in to comment
No comments yet. Share a tip, a bug or your best moment.