Alphabet with Base36 and Binary

Actionscript:
  1. var canvas:BitmapData=new BitmapData(280,100,false,0xefefef);
  2. addChild(new Bitmap(canvas));
  3.  
  4. // pixel alphbet in base36
  5. var alphabet:Array=["", "67erkgi", "e3j6dss", "75rue4u", "c5ltok8", "75s2tji", "75s2tjk", "75rugj2", "95yfnf6", "21blls4", "10nt5xo", "973it1u", "85aef4u", "59lu6nl", "cnz0hbn", "67ej51o", "67eq49c", "67ej53e", "67eq7gy", "66978m4", "6ywdqpw", "95y780c", "53b00as", "8nmdpyi", "5374thm", "53avnus", "6xsfdam"];
  6.  
  7. function drawBase36(num:String, xp:int, yp:int):void {
  8.     // convert base36 to binary
  9.     num=parseInt(num,36).toString(2);
  10.     while (num.length <35) {
  11.         num="0"+num;
  12.     }
  13.     // draw letter
  14.     for (var i:int= 0; i<35; i++) {
  15.         if (num.charAt(i)=="1") {
  16.             canvas.setPixel(i % 5 + xp, int(i / 5) + yp, 0x000000);
  17.         }
  18.     }
  19. }
  20.  
  21. // draw the entire alphabet
  22. for (var i:int = 0; i<alphabet.length; i++) {
  23.     drawBase36(alphabet[i], i * 10,10);
  24. }
  25.  
  26. // draw some words
  27. var words:Array=[0,1,3,20,9,15,14,19,14,9,16,16,5,20,0,9,19,0,3,15,4,5];
  28. for (i = 0; i<words.length; i++) {
  29.     drawBase36(alphabet[words[i]], i * 10,30);
  30. }

I had lots of fun writing this. If you run it in your timeline it will draw this:


... along with the message stored in this array [0,1,3,20,9,15,14,19,14,9,16,16,5,20,0,9,19,0,3,15,4,5].

Binary can be used for representing small images. For every 0 draw white for every 1 draw black. So when the base36 numbers are converted to binary, the 1's and 0's are used to draw each letter.

An interesting side note is that counting in binary to some very high numbers will enumerate all possible two color images at a given size. There are tons of projects related to this... here is one I found with a quick google search: every icon

I also found the wikipedia entry on base36 to be interesting. Apparently base36 can be called hexatridecimal, sexatrigesimal, hexatrigesimal or alphadecimal.

This entry was posted in BitmapData, pixel manipulation, strings and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. LazyLady
    Posted November 13, 2008 at 2:41 am | Permalink

    This was indeed a beautiful snippet. Did you actually plot the alphabet by yourself?

    There was a part in this snippet which I actually think would fit as a snippet all by itself:
    [code]
    for (var i:int= 0; i<35; i++) {
    if (num.charAt(i)==”1″) {
    canvas.setPixel(i % 5 + xp, int(i / 5) + yp, 0×000000);
    }
    }
    [/code]

    A nice way to skip a nested loop, thanks for this!

  2. Posted November 13, 2008 at 11:35 am | Permalink

    Thanks LazyLady. I did plot the alphabet myself … it was actually created with iscribble a collaborative drawing program. The original image is here. I grabbed each letter and placed them in a photoshop doc, imported it into flash and created the base36 numbers from them.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*