This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Maciej Wiercioch
almost 10 years

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

Answer 5380e0b3548c35f642002622

1 vote

Permalink

Thanks a lot! I was looking for this!

points
Submitted by Gabrielle
almost 10 years

2 comments

Maciej Wiercioch almost 10 years

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

Gabrielle almost 10 years

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

Answer 545a70ee282ae32b2f004cd8

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;
    }
}
points
Submitted by Adam Paylor
over 9 years

1 comments

Adam Paylor over 9 years

doesn’t matter i found it but thanks anyway