5 ms·

I abused this concept to compress demo code in PNG files, with great success. http://demoseen.com/blog/2011-08-31_Superpacking_JS_Demos.html http://demoseen.co

by daeken 10y ago

I abused this concept to compress demo code in PNG files, with great success. http://demoseen.com/blog/2011-08-31_Superpacking_JS_Demos.html http://demoseen.com/blog/2011-08-31_Superpacking_JS_Demos.ht... This is, at present, the most efficient way to pack demos on the web; a few characters of uncompressed bootstrap code, then the rest is deflated.

chriswarbo 10y ago
Seems like some bits are missing on that page, e.g. I see nothing between "What is the bootstrap? Well, it's what turns our PNG into code and runs it. Here's the one I use:" and "The 4968 here is really the size of the decompressed data in bytes times 4"
- daeken 10y ago
  Good catch -- thank you! Imported this from an older blog and must've lost that code block somehow.
  - alanh 10y ago
    Looks like some non-ascii characters didn't make the jump to hyperspeed, either, unless your friend really is named NicolÃ¡s Alvarez
    - daeken 10y ago
      It was looking fine on my end, but I realized I wasn't setting an encoding on the page. Should be UTF-8 now and not cause any more problems. Thanks for pointing it out!
      - enraged_camel 10y ago
        This link at the beginning seems to be not working: https://demoparty.mozillalabs.com/ https://demoparty.mozillalabs.com/
        ChristianBundy 10y ago
        Yep, it's inactive. New URL is http://www.mozillalabs.com/en-US/demo-party/ http://www.mozillalabs.com/en-US/demo-party/
Allower 10y ago
Wow what a complete waste of time. I don't understand the infatuation with demos, let alone micro demos. they literally do nothing for me or the rest of humanity. if that's your idea of entertainment, perhaps no one has introduced you to video games...
aleksanb 10y ago
My democrew (Ninjadev) has used this technique for multiple WebGL/Javascript productions over the last few years now. You can see the final packed .PNG results here: Crankwork Steamfist https://stianj.com/crankwork-steamfist/ https://stianj.com/crankwork-steamfist/, Everything is Fashion https://stianj.com/fashion/ https://stianj.com/fashion/, and Inakuwa Oasis http://arkt.is/inakuwa-oasis/ http://arkt.is/inakuwa-oasis/. The tool used for creating both the demos and the packed .PNG is made by us and available on GitHub here https://github.com/ninjadev/nin/ https://github.com/ninjadev/nin/.
- sigvef 10y ago
  Also a Ninjadever. Daeken's blog post was one of the inspirations that led us to implementing this in our toolchain. p01's Matraka [1] was another. The PNG trick is pretty common in the js scene nowadays, with packing tools such as JsExe [2] readily available. [1]: http://www.pouet.net/prod.php?which=59403 http://www.pouet.net/prod.php?which=59403 [2]: http://www.pouet.net/prod.php?which=59298 http://www.pouet.net/prod.php?which=59298
- daeken 10y ago
  Oh man, I didn't know you guys released your tools. I'm a big fan of your stuff -- awesome to see such polished prods on the web. Happy to have helped enable some amazing work!
- hollander 10y ago
  That first link froze my (rather old) computer - had to reboot!
pix64 10y ago
Doesn't seem to work on the latest Firefox.

by daeken 10y ago

chriswarbo 10y ago

Seems like some bits are missing on that page, e.g. I see nothing between "What is the bootstrap? Well, it's what turns our PNG into code and runs it. Here's the one I use:" and "The 4968 here is really the size of the decompressed data in bytes times 4"

daeken 10y ago
Good catch -- thank you! Imported this from an older blog and must've lost that code block somehow.
- alanh 10y ago
  Looks like some non-ascii characters didn't make the jump to hyperspeed, either, unless your friend really is named NicolÃ¡s Alvarez
  - daeken 10y ago
    It was looking fine on my end, but I realized I wasn't setting an encoding on the page. Should be UTF-8 now and not cause any more problems. Thanks for pointing it out!
    - enraged_camel 10y ago
      This link at the beginning seems to be not working: https://demoparty.mozillalabs.com/ https://demoparty.mozillalabs.com/
      - ChristianBundy 10y ago
        Yep, it's inactive. New URL is http://www.mozillalabs.com/en-US/demo-party/ http://www.mozillalabs.com/en-US/demo-party/

Allower 10y ago

Wow what a complete waste of time. I don't understand the infatuation with demos, let alone micro demos. they literally do nothing for me or the rest of humanity. if that's your idea of entertainment, perhaps no one has introduced you to video games...

aleksanb 10y ago

My democrew (Ninjadev) has used this technique for multiple WebGL/Javascript productions over the last few years now. You can see the final packed .PNG results here: Crankwork Steamfist https://stianj.com/crankwork-steamfist/ https://stianj.com/crankwork-steamfist/, Everything is Fashion https://stianj.com/fashion/ https://stianj.com/fashion/, and Inakuwa Oasis http://arkt.is/inakuwa-oasis/ http://arkt.is/inakuwa-oasis/. The tool used for creating both the demos and the packed .PNG is made by us and available on GitHub here https://github.com/ninjadev/nin/ https://github.com/ninjadev/nin/.

sigvef 10y ago
Also a Ninjadever. Daeken's blog post was one of the inspirations that led us to implementing this in our toolchain. p01's Matraka [1] was another. The PNG trick is pretty common in the js scene nowadays, with packing tools such as JsExe [2] readily available. [1]: http://www.pouet.net/prod.php?which=59403 http://www.pouet.net/prod.php?which=59403 [2]: http://www.pouet.net/prod.php?which=59298 http://www.pouet.net/prod.php?which=59298
daeken 10y ago
Oh man, I didn't know you guys released your tools. I'm a big fan of your stuff -- awesome to see such polished prods on the web. Happy to have helped enable some amazing work!
hollander 10y ago
That first link froze my (rather old) computer - had to reboot!

pix64 10y ago

Doesn't seem to work on the latest Firefox.