Show HN: ANSI art renderer in JavaScript/Canvas | Hacker News Reader

Show HN: ANSI art renderer in JavaScript/Canvas

atdt.github.com

47 pointsatdt13 comments

Ok, time for someone to do a Javascript version of TheDRAW.

If you can get past the naivete, there is a lot of really wonderful ANSI art up on http://sixteencolors.net. The severe constraints of the medium inspired ANSI artists to exploit perspective and color theory to create the illusion of detail. Check out artpacks from ACiD, iCE and DARK from the mid 90s, for example. There is also, of course, a lot of amateurish juvenilia, but even that has its own charm.

That's probably the first time I see ASCII art encoded as PNG images.

ATH1

NO CARRIER

I was doing some ANSI art stuff a few months ago and made a BDF font of the original DOS 437 codepage font, so I could view BBSes and ANSI art properly in xterm. I converted it to TrueType so it would also work in Terminal.app:

https://github.com/jcs/ansiterm

The TrueType version was easily converted to a WOFF font so, after writing an ANSI-escape-code-to-HTML parser, I could render ANSI art in most modern browsers with just normal HTML:

http://jcs.org/tmp/go-east/index.html

(HTML version on the left, static PNG exported from ACiDDraw on the right)

Cool! My first stab at this used an embedded dos @font-face (I think there's a branch in the repo) but I found the canvas text API too limited: it's a huge battle to control things like kerning and aliasing in a way that works across browsers, for example. I really wanted things to be pixel-perfect, so I ultimately decided to dump the actual bitmap font into a hex array and do the rendering myself.

I am hoping (perhaps naively) that rendering to a canvas element will inspire people to do creative things. It'd be awesome to combine this with something like three.js and create 3D ANSI art (by interpreting darkness as depth, for example).

I wrote libfake437 (http://libfake437.googlecode.com) to create this effect in SDL, but your version is cooler and more general. Does it draw the low characters (smiley faces and stuff) correctly?

Yes, it draws every character properly.

Awesome. Good times, good memories. Lots of my BBSing was done on slower modems, though - it would be cool if you could render them as an animated GIF with regions slowly typing into view... :)

Not sure if you're aware, but the big "fork me on github" link at the top right isn't pointing at github.com/atdt, it's pointing at github.com/you.

Eep, thanks. Fixed.

similarly, i wrote an XPM renderer in javascript: https://github.com/bsdf/libxpm.js

Reply on news.ycombinator.com