My 3081-byte browser game
My 3081-byte browser game
This is a 3081-byte (~3 kilobytes) browser game that is inspired by the demoscene and has no limit to resolution or frame rate. I made it when I was 13 (I'm 21 now), and back then it was 30K. I got it down to 3K over the years. It's not really much of a game, but it DOES make a great fidget toy when you are at a waiting room. It uses MANY optimizations to get to its size, some of which are custom. I got it to fit in a Han Xin, iQR, and JAB code (spinoffs of the QR code format that have more room). So, it's able to fit into a QR Code. In China via Han Xin codes. Also yes, this browser game WILL fit in a browser cookie. It's smaller than an HDD sector, and at 1500-byte MTU, this browser game only takes 3 packets to load. At 3081 bytes, it loads in under half a second on 56K dialup (even slower dialup connections than 56K won't have trouble with it either.)
Looks like an OK WebGL demo but I’m not sure you can even initialize WebGL in 3 kiB.
I somehow just got an angle of exactly ⅝π and got a non-rotating 16-point star.
It's using HTML5 Canvas (actually 3), and it's minified extremely.
The bottom layer is a linen texture generated on-the-fly by Canvas using white noise plus Gaussian blur, then again but rotated 90 degrees. The second layer is waves that are controlled by JS's random number generator (or clicks, but that code got covered up by the third canvas element) and is layered over the linen layer using z-index CSS. The top layer is a spirograph, and doing a third element with z-index wasn't as easy to do. Here's what I did: I put the bottom two layers in a URL-encoded HTML document in an iframe. The spirograph was then layered on top of the iframe using the same trick as the two canvases in the HTML document inside the iframe. Now here's where the optimization gets interesting: The wave and linen HTML, CSS, and JS was all individually minified, and then that was thrown into a URL encoder that is designed for making SVGs into data URLs as efficiently as possible, namely by ONLY URL-encoding characters that aren't URL safe, though I did have to tweak it for certain reasons. The iframe and top canvas are inside something rather special. Because I wanted to cash in on the space savings of gzipped SVG (SVGZ), I used foreignObject to embed XHTML (including HTML5) into SVG. The foreignObject is, rather than doing just body, is instead just using the html tag so it contains both, which is needed. So, it also means I had to be safe for XML, so I had to make the data URL loaded by the iframe escape one character type it originally didn't. I of course minifed the SVG, XHTML, XML, HTML, JS, and CSS stuff in the SVG+XHTML thing. Now here's the funny thing: this SVG is also a valid HTML document if given an HTML or HTM extension. It's a polyglot. Now for the real space savings: I used Zopfli-Krzymod (Zopfli is by Google, and its goal is to get the most possible space savings from Deflate, including the GZip SVGZs use. Zopfli-Krzymod gets even more savings, partially by using an LZ77 optimization from Google's own Brotli, which is their special compressor), which got it down to 3099 bytes. Running it through ECT got it to 3098. Then, running it through Leanify got it down some more, and then running it through ECT again (as done by people on encode.su) got it down to its current size of 3081 bytes. For context, the original version of this demo prior to my attempts to minify it was 30,000 bytes. So, I effectively did an almost 10x minification of this. Note that the linen code is from antimatter15 from 2011, the wave code is from SomethingHitMe in 2012, and the spirograph code is a modded version of Mudcu.be/Galactic.ink/Michael Deal's Breathing Galaxies 2010 Chrome Experiment (which was JS1K, 1020 bytes, and my further minification got that portion down to only 999). I started work on this in 2015, and over the years I shrunk it down. Also, the idea of using foreignObject to put HTML in SVG came from gerhobbelt on Github in 2015. Basically, this is three classic JavaScript effects rolled into one demo, similar to the TIM1T demo for the Atari 2600, which throws 3 classic effects together into one demo. Also, this demo runs fine at 120fps as well as 4K. It also works fine on mobile. Oh and for context, 3081 bytes takes under half a second to load on 56K dial-up.
Basically: this demo uses every trick in the book, including the obscure ones, to get down from 30KB to 3KB. Oh, and it's technically an SVG. I wish that XScreenSaver would include a port of this.
Also, I was able to fit this into a Han Xin Code (China's answer to the QR Code) as well as iQR Codes (QR Code's official elusive successor). Also, in Base85 or higher, 3081 bytes can fit into the original 4096 ASCII character browser cookie format used by Netscape. So yes, you can fit a browser game into a browser cookie if you wanted to. Also, there are some RSA keys out there which are larger than this, and there are plenty of Atari 2600 games out there bigger than this. This is an example of extreme programming. I started this when I was 13 (I'm 21 now).