This forum is now read-only. Please use our new forums! Go to forums
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;
}
Answer 5380e0b3548c35f642002622
Answer 545a70ee282ae32b2f004cd8
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;
}
}
1 comments
doesn’t matter i found it but thanks anyway
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
2 comments
You are welcome! I’m glad it helped someone :)
yes it’s on my website : http://www.gabrielleb.fr/EN/index.html