stgiga

joined 1 year ago
[–] stgiga@lemmy.blahaj.zone 1 points 1 year ago* (last edited 1 year ago)

I did do the Markdown image embed into the README, as well as a repo link and image in the body of the post, but regrettably Lemmy isn't making the actual post image work.

[–] stgiga@lemmy.blahaj.zone 2 points 1 year ago

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).

[–] stgiga@lemmy.blahaj.zone 3 points 1 year ago (2 children)
[–] stgiga@lemmy.blahaj.zone 2 points 1 year ago

The Markdown Github Page is currently a stopgap page.

[–] stgiga@lemmy.blahaj.zone 1 points 1 year ago* (last edited 1 year ago) (9 children)

It's ALL the characters of the font laid out in their Unicode positions in 16x16 cells from U+0000 to U+10FFFF

Actually, technically speaking, that PNG is a preview image. It's ALL the characters of the font laid out in their Unicode positions in 16x16 cells from U+0000 to U+10FFFF

Also I was asleep when ChaoticNeutralCzech replied, and I was really tired when I said I didn't make a preview image. I actually DID, but it's the TTF2PNG build of the font that was generated in a special way that makes it so that the image can be read sequentially from U+0000 to U+10FFFF in 16x16 cells to get the character you want, with no need for a definition file that shows where a codepoint is in the image. Also, it means that it also serves as a 1:1 preview that is properly mapped too.

As for why the image is "black", it has to do with the fact that to store U+0000 to U+10FFFF in 16x16 cells in a way compatible with sequential reading it requires that the sheet be 4096x65536. Blink engine browsers as well as Samsung's Gallery app have no problems viewing it (as well as some others), but there are also quite a few viewers that really hate this size. Oh, and the PNG is in 1bpp Indexed Color mode to get it small enough to fit in the 1MiB figure used by the 3DO console's font chip size (Apparently the 3DO had the largest font chip.) Basically, the TTF2PNG build is its own preview image, but it may be difficult to display on some viewers. Sorry for any confusion.

Please don't hate me.

[–] stgiga@lemmy.blahaj.zone 2 points 1 year ago* (last edited 1 year ago) (1 children)

Actually, technically speaking, that PNG is a preview image. It's ALL the characters of the font laid out in their Unicode positions in 16x16 cells from U+0000 to U+10FFFF

Also I was asleep when Luna replied, and I was really tired when I said I didn't make a preview image. I actually DID, but it's the TTF2PNG build of the font that was generated in a special way that makes it so that the image can be read sequentially from U+0000 to U+10FFFF in 16x16 cells to get the character you want, with no need for a definition file that shows where a codepoint is in the image. Also, it means that it also serves as a 1:1 preview that is properly mapped too.

As for why the image is "black", it has to do with the fact that to store U+0000 to U+10FFFF in 16x16 cells in a way compatible with sequential reading it requires that the sheet be 4096x65536. Blink engine browsers as well as Samsung's Gallery app have no problems viewing it (as well as some others), but there are also quite a few viewers that really hate this size. Oh, and the PNG is in 1bpp Indexed Color mode to get it small enough to fit in the 1MiB figure used by the 3DO console's font chip size (Apparently the 3DO had the largest font chip.) Basically, the TTF2PNG build is its own preview image, but it may be difficult to display on some viewers. Sorry for any confusion.

Please don't hate me.

[–] stgiga@lemmy.blahaj.zone 3 points 1 year ago* (last edited 1 year ago)

Yes. I forgot that Lemmy didn’t let you upload images AND URLs. I made it now link to the Github page. http://stgiga.github.io/UnifontEX

Also this reply originally wasn't a reply, I think Lemmy is buggy right now.

[–] stgiga@lemmy.blahaj.zone 3 points 1 year ago (17 children)

I didn't make a preview image.

[–] stgiga@lemmy.blahaj.zone 0 points 1 year ago

I technically have all of those. As for the intersex condition I have: I got formally diagnosed with epispadias today, and yes, it's considered an intersex condition by advocacy groups.

view more: ‹ prev next ›