Web Demos
Here’s a collection of WebAssembly graphics demos and effects I’ve written. Most of these are trying to pack the most pizzazz into the smallest number of bytes.
- These are not videos. The actual programs are embedded below.
- Everything written from scratch.
- No browser features used except for
Math— no WebGL etc. - It takes many more bytes to express the text in this webpage than any one of these programs.
Textured shaded tunnel in <512 bytes
Garish texture, animation, and lighting in 473 bytes.
Galaxy rose
50k-object gravity simulation, with initial conditions carefully tweaked to draw a rose-like manifold that degenerates into a spiral galaxy. 799 bytes.
Minified procedural texture
This is the example texture from my tutorial on writing minimal WebAssembly graphics demos, where I showed how to pack it into 213 bytes. This one is 88 bytes thanks to arcane techniques.
Program bytes
00000000 00 61 73 6d 01 00 00 00 01 05 01 60 01 7f 00 03 |.asm.......`....|
00000010 02 01 00 05 03 01 00 10 07 08 02 00 02 00 01 67 |...............g|
00000020 00 00 0a 34 01 32 01 01 7f 03 40 20 01 20 01 41 |...4.2....@ . .A|
00000030 ff 0f 71 20 01 41 09 76 73 41 02 76 20 00 6a 41 |..q .A.vsA.v .jA|
00000040 80 80 80 78 72 36 02 00 20 01 41 04 6a 22 01 41 |...xr6.. .A.j".A|
00000050 ff ff 3f 49 0d 00 0b 0b |..?I....|
As size reference, the text, spaces, and punctuation of this sentence are also 88 bytes.
Sentence bytes
00000000 41 73 20 73 69 7a 65 20 72 65 66 65 72 65 6e 63 |As size referenc|
00000010 65 2c 20 74 68 65 20 74 65 78 74 2c 20 73 70 61 |e, the text, spa|
00000020 63 65 73 2c 20 61 6e 64 20 70 75 6e 63 74 75 61 |ces, and punctua|
00000030 74 69 6f 6e 20 6f 66 20 74 68 69 73 20 73 65 6e |tion of this sen|
00000040 74 65 6e 63 65 20 61 72 65 20 61 6c 73 6f 20 38 |tence are also 8|
00000050 38 20 62 79 74 65 73 2e |8 bytes.|