N
Nihilogic
blog.nihilogic.dk · Personal blog · on HN since 2008
Jacob Seidelin writes about JavaScript and HTML5 canvas experiments, including games, image tricks, and a ray casting engine.
What HN saysHN links it for the technique of compressing JavaScript into PNG images, and for canvas demos like Super Mario Kart.
23HN people shared it
8linked it in comments
22stories submitted
375story points
13 years agolast shared
2008people per year2026
Most-shared posts
- 1JavaScript Compression using Canvas and PNG-embedded data5 people · 4 points · first shared 2008 · discussion on HN
- 2HTML5 Canvas Cheat Sheet3 people · 57 points · first shared 2009 · 3 comments on HN
- 3Playable Mario Game as a blog background2 people · 67 points · first shared 2009 · 20 comments on HN
- 4Javascript Super Mario Kart2 people · 29 points · first shared 2008 · 6 comments on HN
- 5Genetic algorithms, Mona Lisa and JavaScript + Canvas1 people · 93 points · first shared 2013 · 21 comments on HN
- 6Play Super Mario in 14kb Javascript1 people · 51 points · first shared 2008 · 13 comments on HN
- 72008 - A Year of JavaScript1 people · 33 points · first shared 2009 · 6 comments on HN
- 8Reading EXIF data with Javascript1 people · 10 points · first shared 2008 · discussion on HN
- 9House of Canvas: Radiohead meets JavaScript1 people · 8 points · first shared 2008 · discussion on HN
- 10JuicyDrop: Canvas music visualization1 people · 4 points · first shared 2009 · discussion on HN
- 11Strange attractors - beautiful chaos and canvas1 people · 3 points · first shared 2009 · discussion on HN
- 12Photoshop-like Image Effects using Javascript and canvas1 people · 3 points · first shared 2008 · discussion on HN
- 13WolfenFlickr 3D - An unlikely mashup1 people · 3 points · first shared 2008 · discussion on HN
- 14A small JavaScript library capable of reading ID3 (v1) tags from MP3 files.1 people · 2 points · first shared 2008 · discussion on HN
- 15Pocket Full of Canvas1 people · 2 points · first shared 2009 · discussion on HN
What HN people wrote when they linked it
e1ven · 2009-08-06
The CANVAS tag allows per pixel placement. It's what makes things like this possible.
From the Source-
This file is part of the article series by Jacob Seidelin about
creating a ray casting engine with JavaScript, DOM and Canvas.
If you have questions or comments, please contact the author at
either [email protected] or http://blog.nihilogic.dk/
The code samples here are freely available under the MIT license.
See: [http://www.nihilogic.dk/licenses/mit-license.txt]
The graphics for sprites and walls are property of id Software.
rsxzi · 2014-02-06
This technique has been around since prior to 2008 at least, the biog entry below introduced the code[1], along with providing a tool to compress your js into an image using ruby [2].
The technique has a legitimate use as a suave compression method and was termed "super packing" in 2011 [3]
[1]http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with…
[2]http://www.nihilogic.dk/labs/canvascompress/
[3]http://daeken.com/superpacking-js-demos
ohwp · 2013-05-21
Also: setting up a webserver with over 1TB of storage is probably simpler, faster and more reliable.
I also think in this case the hack is a little useless. But I've seen examples where they use it to transfer a lot of 3D data for use in WebGL. And the author of this script is also linking to a nice usecase where is is used for game data:
http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html
icebraining · 2012-01-23
Well, in this case the information is a JPEG file, so it should look good as a PNG image ;)
But more to the point, there's a guy who stored JS code in PNG images[1], and any binary string could be used instead.
[1]: http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html
sjs · 2010-08-23
Of course not! But if there's no use case then this is getting an awful lot of buzz for no real reason other than Ajaxian running a story on it, considering that it's not that new. http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html
It's been on reddit or hacker news before, this year iirc.
psawaya · 2010-02-07
If you're interested in HTML canvas, and want to get started quickly, you should look into processing.js: http://processingjs.org/
Otherwise, this "cheat sheet" helped me the most: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
mike_branski · 2008-10-27
Well to be fair, you CAN do 3D with JavaScript, it's just not as practical. ;)
See some of the posts at http://blog.nihilogic.dk/search/label/3d