How can I display letters using html table cells as colored pixels?

Question

Let's say I have an html table (50 x 50 cells) with a yellow background. I would like to use the background colors of the cells to print letters (A-Z) (e.g. some cells blue and most cells yellow) in an animated loop, using jQuery. I can create a table and a pointer which can loop through all the cells of the table such that it can change the background color of a particular cell (x,y) to different color. However, I don't understand which cells to highlight to form a particular letter. For example, to display the letter "A" on the 50 x 50 grid, which cells do I need to change to a new background color such that I get the letter A displayed on the screen with the cells, and so on for all the other letters. Is there any pattern for this?

Answer 1

Create the cells with a loop such as:

for(var i=65;i<=90;i++) {
    console.log(String.fromCharCode(i));
 }

(65 is the char code for A, 90 for Z). in the loop, attach id with the char. something like "charA", "charB". Than you can access the fields searching the id <"char" + letter>.

if you know only the (x,y) in the 50x50 grid, calculate which letter it is with:

String.fromCharCode(65+y*50+x);

Or take the value of it from the elment itself

$(this).val();

Or from attribute you attach to it:

$(this).attr('letter')

Answer 2

Use Canvas (Edit: only for the generation of the letter coordinates in the 50x50 grid, no usage of canvas afterwards).

• For each letter possible, print the char on a 50x50 html5/javascript canvas in black and white using something like: http://typeface.neocracy.org/examples.html

• Then access the canvas in each pixel to check if it black or white, and save it in multidimensional javascript arrays. getPixel from HTML Canvas?

• print the output and create javascript code or JSON object that saves those coordinates for your use.

After that you'll have all you need: the coordinates for each letter, and (bonus) with a font of your choice.