0

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
cam lover
  • 57
  • 1
  • 7
  • I can't quit grasp what you're trying to achieve. – Yoshi Mar 29 '12 at 09:54
  • Am i correct in the assumption that you are trying to implement some obscure CAPTCHA or something? – Kaii Mar 29 '12 at 09:54
  • Not really. I just want to create an animation such that, it would display a persons' name in a loop. For example "Kai" would display K first followed by A, then I – cam lover Mar 29 '12 at 09:57
  • 2
    There's no shortcut to happiness here. Take your favorite graphics editor, create a new image sized 50x50 pixels, insert a character and see which pixels it occupies. – JJJ Mar 29 '12 at 09:59
  • Or if you're not married to tables you could draw a character to a 50x50 canvas and scale it up. – JJJ Mar 29 '12 at 10:00
  • I still don't get how the described table (50x50) correlates to an alphabet? Do you have the table ready and just want to highlight certain cells in regards of some input string? – Yoshi Mar 29 '12 at 10:03
  • @camlover: Stop vandalizing your question. – ThiefMaster Mar 31 '12 at 18:21

2 Answers2

6

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')
bArmageddon
  • 8,088
  • 6
  • 22
  • 40
1

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.

Community
  • 1
  • 1
bArmageddon
  • 8,088
  • 6
  • 22
  • 40