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
over 3 years ago

Can I change the font size?

Of course you can! But you will have to dig into bubbles.js file and change it a bit. Before we start it is highly recommended to read: How does alphabet.js work?.

This piece of code in bubbles.js is responsible for drawing all the dots in our project:

if (document.alphabet.hasOwnProperty(cc_hex)) {
    var chr_data = document.alphabet[cc_hex].P;
    var bc = letterColors[ix % letterColors.length];

    for (var i = 0; i < chr_data.length; ++i) {
        point = chr_data[i];

        g.push(new Point(point[0] + offset,
            point[1],
            0.0,
            point[2],
            makeColor(bc, point[3])));
    }
    offset += document.alphabet[cc_hex].W;
}

point[0] corresponds to the x coordinate of each point, point[1] is the y coordinate and document.alphabet[cc_hex].W is the width of our whole letter. These three values affects the size of our font. So we have to modify them.

It is very important to understand that we should keep correct proportions. We do not want to make a weird looking animation where every letter is three times wider than normal but height of letter is without any change - or maybe you do!.

To make sure that we are keeping aspect ratio we will create a special variable to store a multiplier - fontSizeMultiplier. It will work in very intuitive way. If the multiplier is equal to 2 then letters are two times larger. If it is equal to 0.5 then they are two times smaller.

To reach our goal we simply have to define our variable and assign to it desired value (in our example - 0.5) and then multiply every decisive variable (point[0], point[1] and document.alphabet[cc_hex].W). This is the code after adjustments:

if (document.alphabet.hasOwnProperty(cc_hex)) {

    // definition of our variable
    var fontSizeMultiplier = 0.5;

    var chr_data = document.alphabet[cc_hex].P;
    var bc = letterColors[ix % letterColors.length];

    for (var i=0; i<chr_data.length; ++i) {
        point = chr_data[i];

        g.push(
            // multiplication of x and y coordinates by defined value
            new Point(point[0] * fontSizeMultiplier + offset,
            point[1] * fontSizeMultiplier,

            0.0,
            point[2],
            makeColor(bc,point[3])));
    }

    // multiplication of letter width by our multiplier
    offset += document.alphabet[cc_hex].W * fontSizeMultiplier;
}

Return to Frequently Asked Questions


1 vote

permalink

Thanks a lot! I was looking for this!

627 points
508e46e836cb530200000947_270469861
Submitted by
Gabrielle
over 3 years ago

2 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

You are welcome! I'm glad it helped someone :)

508e46e836cb530200000947_270469861 Gabrielle over 3 years ago

yes it's on my website : http://www.gabrielleb.fr/EN/index.html


0 votes

permalink

i tried this bit but couldn't get it to work please help me

   if (document.alphabet.hasOwnProperty(cc_hex)) {

        var fontSizeMultiplier = 0.5;

        var chr_data = document.alphabet[cc_hex].P;
        var bc = letterColors[ix % letterColors.length];

        for (var i = 0; i < chr_data.length; ++i) {
            point = chr_data[i];

            g.push(new Point(point[0] + offset,
                point[1],
                0.0,
                point[2],
                makeColor(bc, point[3])));
        }
        offset += document.alphabet[cc_hex].W;
    }
}

328 points
54359a0c282ae324af000549_98722454
Submitted by
Adam Paylor
about 3 years ago

1 Comment

54359a0c282ae324af000549_98722454 Adam Paylor about 3 years ago

doesn't matter i found it but thanks anyway