6 ms·

Show HN: ANSI art renderer in JavaScript/Canvas

47 points by atdt 15y ago

atdt 15y ago
If you can get past the naivete, there is a lot of really wonderful ANSI art up on http://sixteencolors.net 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.
- aslakhellesoy 15y ago
  That's probably the first time I see ASCII art encoded as PNG images.
- comatose_kid 15y ago
  ATH1
  - atdt 15y ago
    NO CARRIER
there 15y ago
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 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 http://jcs.org/tmp/go-east/index.html (HTML version on the left, static PNG exported from ACiDDraw on the right)
- atdt 15y ago
  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).
- endgame 15y ago
  I wrote libfake437 (http://libfake437.googlecode.com 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?
  - there 15y ago
    Yes, it draws every character properly.
tptacek 15y ago
Ok, time for someone to do a Javascript version of TheDRAW.
treeface 15y ago
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.
- atdt 15y ago
  Eep, thanks. Fixed.
justinlau 15y ago
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... :)
arrakeen 15y ago
similarly, i wrote an XPM renderer in javascript: https://github.com/bsdf/libxpm.js https://github.com/bsdf/libxpm.js

47 points by atdt 15y ago

atdt 15y ago

If you can get past the naivete, there is a lot of really wonderful ANSI art up on http://sixteencolors.net 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.

aslakhellesoy 15y ago
That's probably the first time I see ASCII art encoded as PNG images.
comatose_kid 15y ago
ATH1
- atdt 15y ago
  NO CARRIER

there 15y ago

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 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 http://jcs.org/tmp/go-east/index.html (HTML version on the left, static PNG exported from ACiDDraw on the right)

atdt 15y ago
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).
endgame 15y ago
I wrote libfake437 (http://libfake437.googlecode.com 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?
- there 15y ago
  Yes, it draws every character properly.

tptacek 15y ago

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

treeface 15y ago

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.

atdt 15y ago
Eep, thanks. Fixed.

justinlau 15y ago

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

arrakeen 15y ago

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