pouët.net

This is a sub-4KiB JavaScript demo I wrote back in 2015 (I was in 8th grade then), and back then it was 30000 bytes. In December 2018 I got it down to its present size of 3099 bytes, which is 1 byte under 3.1 Kilobytes. In early 2019, Google Chrome stopped loading SVGZs from disk, and thus one has to host it from a server whose .htaccess or httpd.conf files are set to serve .SVGZ files properly. It's a 1-line change. The nice thing about this demo is that it is not just a demo. It is interactive AND procedurally generated. It also does not care what your resolution, aspect ratio, or refresh rate is. So you can run it on wide or tall monitors that are above 60hz refresh rate and have 4K or higher resolution. You interact with the game with either touch input or mouse movement to move the cursor shape, and you can change the shapes without moving your mouse by using the arrow keys. You can also move the mouse rapidly to "draw" as long as you are moving it. This uses 3 canvas elements, and the background is based on iOS 6's Linen but procedurally generated, the waves are based on the Wii Homebrew Channel banner, and the shapes hark back to the Mac screensaver known as AlphaBaby on my old eMac, and the sizing of the shapes is in a sine "breathing" pattern like the power light fading pattern on it. It's a calming cursorgame/toy, and it can be used to replicate a fidget spinner but with the addition of calming waves and linen (as someone with autism this creation is handy), and it is handy for occupying my kid cousins. At 3099 bytes it downloads very quickly, even on dial-up. With Wallpaper Engine it can be used as an interactive wallpaper (cursor), and since it generates at the resolution of what it is inside of, you don't really need to use the anti-aliasing stuff and such. You can use it with a Chromium web screensaver on Windows on an ASUS ZenBook Pro Duo to have the bottom screen be waves and the top screen be the shapes, without duplicating the screensaver. Instead, it's a stretch into a tall aspect ratio that the demo generates at with no complaints. A macOS WebKit screensaver can be used with this, and you can use the interactivity mode of it to make a screensaver that you can interact with, and do so even on the highest resolution Retina Macs. I hope you enjoy this fun demo I did that is also a cursorgame!

One thing I should mention is that the image you see at the top of this Pouet.net page is a screenshot of one of the shapes generated by this demo (the linen background of the demo is also pictured as well), and is not an unrelated/irrelevant image. I also made a 16x16 version of it into my Pouet.net avatar, which is honestly cool. Making your demo into your avatar is cool. Anyways, I hope this demo finds favor with you. Enjoy!

Here's the demozoo link https://demozoo.org/productions/305042/

That's the beauty of this demo! It's touch-friendly, friendly to both extremely tall and extremely wide displays at very high resolutions, handles frame rates over 60hz very excellently, and another good thing about it is that it is playable on the very worst cellular connections, such as 2G if one is in an area stuck with it. Also the slowest of portable last-ditch satellite modems will be able to load this game relatively fast. Even at 300 baud it downloads within a fairly quick amount of time (1:24). Even under a Bell 101 modem at 110 baud it isn't agonizing to download, in fact it takes less than 5 minutes (4:50). It's the game you play when you are way out in the middle of nowhere and bored. I find it calming. Another nice thing is that it isn't problematic to run on computers dangerously close to filling their disks via cache. Since everything is generated on the fly and random, and the game is smaller than a cookie, it isn't really dangerous to use on such a precarious machine. And one can use Safari for it rather than Chrome or Firefox, which is helpful on old Macs that have such space issues that get messy when you load Firefox and its RAM. Obviously you need HTML5 support. This game is also handy to play on metered connections when you are just about to reach points of either dropped service or extra charges on your bill if you go over for the month.
I'm glad you like my projects!

I used to test this game back in development way back on iPhones that were not current when they were purchased. So it's not demanding enough to be unplayable on older smartphones. Basically, as long as your device supports HTML5 and is not Internet Explorer or pre-Blink Microsoft Edge, this will work. I should mention that it also works with the Internet Explorer Chrome Frame from way back if I remember correctly. Also this game uses a lot of different things to get it to 3099 bytes, including Zopfli-krzymod (an improved version of Zopfli, which itself was designed to get more savings out of deflate), minification, and so many other things. At 3099 bytes this game is 1 byte under 3.1 Kilobytes (3100 bytes), so I can not dishonestly say that "this game is a 3KB game", which is technically the truth, but only just. That said, this game is in the 4KB category because that's the closest applicable size category on Pouet. I hope you enjoy what I did!

Another cool thing is that part of its packing involves SVGZ, which is an image format, and this demo has the same versatile sizing ability as an SVGZ generated by Illustrator or Inkscape and such. Basically this demo is quite literally an interactive "image" featuring procedurally generated graphics and animation. Which is outright cool. And to think that this game is all inside a 3099 byte "image"... The wonders of HTML5 and SVGZ! I hope you enjoy the amount of love that went into doing this!

I find this game very useful when waiting on things while needing something to do during the wait. I honestly forgot to mention that.

Thanks! Keep in mind that I used many of the tools there (like uglify, jsmin, and closure [among others]). This demo cannot go to 1K because a dense third of the demo handles shape. Also there's code I purposefully left in so that when ported to systems without the plight of layered canvas pointers being mutually exclusive, the waves can respond to user clicks as intended. Secondly, the code is not even remotely conducive to PNG bootstrapping because of how stacked it is. Also keep in mind that I did this demo way back in 8th grade (2015) and back then it was 30 kilobytes rather than 3. It took years to figure out how to minify it and then years to find a host capable of properly serving SVGZ content. I'm glad you like it! Keep in mind that I basically used every trick that would work with how I structured it (layered canvas elements which wouldn't be conducive with how .js-file-in-PNG packers store stuff.) Psenough's post is definitely interesting though. PNG bootstrapping just won't work here because the demo is layered (among other reasons). I just can't really do this demo with PNG bootstrapping for various reasons. I already did what I could to reduce file size. So many niche tools (including ones I patched, and some of the ones suggested). I can't honestly make this demo use PNG bootstrapping because it most definitely isn't structured in a way suitable for it. I'm glad that you like code I wrote when I was in 8th grade back in 2015!

In early 2019, Chrome stopped loading SVGZ files locally, but back when I was making this, it was able to do so. The local method did not work on Safari or Firefox. Opera Presto was even able to load SVGZ from inside a data URL, which was not something 2018 Chromium liked. Serving it from a web server with either the htaccess or httpd.conf lines that make browsers handle SVGZ right allows it to work on all HTML5 browser engines, with the exception of non-Blink Microsoft Edge, and Internet Explorer does not like the demo either. I got the demo down to 3099 bytes by using Zopfli-krzymod, which is a better version of Google's Zopfli, which was intended to squeeze more savings from deflate. One cool thing about Zopfli-krzymod is that it borrows optimizations from the LZ77 part of Google's Brotli while still remaining compatible with Deflate. When doing SVGZ demos, the way you get HTML into it involves using a foreignObject tag containing a <html> tag with an xmlns associated with XHTML (specifically this: "http://www.w3.org/1999/xhtml"). This allows one to have HTML inside an SVG (albeit XHTML, but that doesn't by any means stop HTML5 from being usable in this usage). Thus you are able to make compressed html demos. It's handy if your demo relies on more than one can be done than with just a single .js file. Also SVGZ is an official part of the SVG standard, and not a fringe thing. Adobe Illustrator and Inkscape (among other vector editors) support it as they do regular SVGs.

So today I actually got it down to 3098 bytes via ECT, which can make GZip and other stuff even better. Using it on the already-ZopfliKrzyMOD ended up working. So now it's 2 bytes under 3.1KB. The InfinityFree page has this new version.

I fixed the link since APPARENTLY InfinityFree somehow isn't a direct link despite appearing and behaving as one. I decided to use SourceForge's hosting since it doesn't have that weirdness, is completely compatible with this work, and because I am happy to FOSS this demo.

A few days ago I got it down to 3081 bytes, after applying even more techniques (Leanify and then a second round of ECT, which actually worked). This demo uses MANY compression techniques to do its thing.