ASCII Webcam Facebook Status

Here is one of many ways to achieve awesome:

  • Take any image
  • Map regions of the image into ASCII characters of equal dimension
  • Make sure your font metrics are equivalent to those of Facebook’s
  • ???
  • PROFIT

profit

yes

It is quite difficult to turn this sketch into an applet since I was using the webcam, but you can see the source code here. Originally I tried matching the font of Processing to be the same as that of Facebook but there’s too many CSS subtleties; in the end I had to write some JS to manually get the char-width of each character. Unfortunately the image starts skewing depending on your browser zoom and whether you have certain fonts installed or not, but there’s nothing to be done about such things.