This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Animate Your Name Forum

View Course

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
about 3 years ago

How does alphabet.js work?

In alphabet.js there is defined only one object called document.alphabet.

document.alphabet is a collection of objects (representing single characters) with names coded in hexadecimal values (in the pattern A + hexValue). The code in this script is organized in this manner:

document.alphabet = {
    A79: {
        W: 75,
        P: [[64, 89, 9, -102], [57, 103, 9, -102], [5, 89, 9, -79], [16, 104, 8, -35], [51, 122, 8, -35], [23, 118, 8, -35], [31, 133, 8, 50], [46, 136, 8, 50], [34, 153, 8, 69], [28, 168, 7, 112], [21, 183, 7, 112]]
    },
    A78: {
        W: 85,
        P: [[10, 148, 8, -103], [21, 137, 8, -92], [33, 125, 7, -79], [50, 124, 7, -35], [58, 135, 7, -35], [68, 148, 7, -35], [40, 111, 7, 51], [33, 103, 7, 51], [21, 86, 7, 51], [56, 106, 7, 51], [67, 92, 7, 112]]
    },
    A77: {
        W: 98,
        P: [[24, 148, 10, -102], [67, 151, 10, -102], [34, 133, 9, -36], [61, 134, 9, -36], [76, 132, 8, -36], [16, 130, 8, -36], [14, 112, 7, 50], [40, 118, 7, 50], [58, 117, 7, 50], [82, 117, 7, 83], [86, 100, 7, 83], [51, 101, 7, 83], [11, 95, 7, 83]]
    },

    // more more more

    A3d: {
        W: 73,
        P: [[11, 91, 9, -50], [27, 90, 9, -50], [44, 90, 9, -50], [59, 90, 9, -50], [11, 127, 6, 69], [21, 128, 6, 69], [33, 129, 6, 69], [44, 129, 6, 69], [53, 129, 6, 69]]
    }
};

Here you can find list with hexadecimal value of every printable character

  • A79 - character with hex code 79 represents a y
  • A78 - character with hex code 78 represents an x
  • A77 - character with hex code 77 represents a w
  • A3d - character with hex code 3d represents an =

Every letter has two properties, W and P.

W stands for "width". A higher value of W means the character is broader. That is why W of A21 (!) is so small (35) and A51 (Q) is so large (125).

P is a collection of points (single dots on your animation). Every point has 4 values, for example [64, 89, 9, -102]. First two values are coordinates (x = 64, y = 89), they have an impact on where the dot is located. Third value (9) specifies size of the dot. Last value (-102) is not used in our project, but originally it was defining the tone selected by user color (hue).

image showing dot sizes


Return to Frequently Asked Questions


1 vote

permalink

Oh man. I was wondering what that was. So impressive. Thanx for explaining it.

1085 points
51ccbc447c82caeebb00c305_461917013
Submitted by
Joannah Stewart
about 3 years ago

1 Comment

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

Indeed it is quite smart code :) You're welcome


0 votes

permalink

I can not understand this line " That is why W of A21 (!) is so small (35) and A51 (Q) is so large (125)".Can you please elaborate for me.

672 points
5374f4e9282ae333070003ca_670784011
Submitted by
rumyhasan
about 3 years ago

3 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

Hi :) I'll try! It seems to me that this is a fairly simple matter, because it is associated with normal typing. Characters such as "!", "l", "i", "j" does not occupy much space on the paper, right? They are just narrow. But letters like "W", "Q", "H", "G" are much broader. The computer can not guess, he must know how wide is the character. Therefore in alphabet.js are specified the widths in pixels of each character we can use. Character with a code A21 is an exclamation mark, that is why width (W) of it is so small (35).

Does that help? If not, please tell me, I will try again :)

Picture Adarsh Acharya over 2 years ago

Actually i was also having confusion with that line, but you explained it here very well

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 2 years ago

Hello Adarsh, thank you very much :) I am glad this is helpful.


0 votes

permalink

I am curious if there is a way to add a line break inside of this code. I am trying to create multiple lines of text, but using /n or an html break tag only prints the characters. All text added to "main.js" in the variable "myName" is printed on a single line which runs off of the page.

165 points
Picture
Submitted by
Dave DeCay
almost 3 years ago

4 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch almost 3 years ago

Hello Dave :) No, this is not possible in current implementation. But, here -> http://www.codecademy.com/forum_questions/53051102631fe9cc7b00016d I described a workaround. I know that this is a desirable feature, so maybe I should spend few hours and add this to bubbles.js :)

571828824b7f51f26c000619_875219903 Maciej Wiercioch almost 3 years ago

Hello again Dave. I modified the script so you can use it to animater multiple line text. Here (https://github.com/AlbionsRefuge/bubbles-faq/blob/master/gists/multipleLineBubbles.js) you can find a new file (you have to use it instead of normal bubbles.js) at the top of the file I posted example how to use it :)

Picture Dave DeCay almost 3 years ago

Wow, thank you for taking the time to work on this :) I am currently working on some other projects, but I look forward to playing with this script again. I'll post up my results when I get back to it.

Thanks again for your reply and hard work sir!

571828824b7f51f26c000619_875219903 Maciej Wiercioch almost 3 years ago

I will be very happy to see the result of your efforts :) You're very welcome, that was really interesting question :)


0 votes

permalink

Ok, so just wanted to be clear---this file is necessary because it essentially lets the computer know how to create letters using the dots, correct?

My question is: How do the coordinates work exactly? Since the letters can be used to spell everything and anything, are the dot coordinates ones that are in relation to the the boundaries of the letter?

615 points
Picture
Submitted by
Yan Fan
almost 3 years ago

1 Comment

571828824b7f51f26c000619_875219903 Maciej Wiercioch almost 3 years ago

I am really sorry that I am answering so late. Your assumptions are perfectly correct. Coordinates are defined relative to boundary box of single letter. In bubbles.js there is a variable called offset, which stores total width of all added letters. And then, when we add next letter, all horizontal coordinates of this character are increased by this offset.


0 votes

permalink

Amazing

362 points
Picture
Submitted by
Adarsh Acharya
over 2 years ago

1 Comment

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 2 years ago

Yes, this is awesome piece of code :)