Preview
In this project, we'll write a program that animates your name. When you move your mouse over your name, bubbles will scatter away and then reassemble.
To create this project, we'll first learn JavaScript, a programming language. Then we'll apply what we've learned to write this program.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
<!-- main.js -->
var myName = "Codecademy";
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];
drawName(myName, letterColors);
if(10 < 3)
{
bubbleShape = 'square';
}
else
{
bubbleShape = 'circle';
}
bounceBubbles();
Put in your name
Before we get started, let's see what the animation looks like with your name. In line 1, replace "Codecademy" with your name.
What's your name?
In order to write a program that animates your name, we need to learn the programming language JavaScript.
Let's get started by getting to know each other. What's your name?
Discover the length
Very good! You just wrote a string.
A string can contain letters, numbers, spaces, and symbols. Strings are surrounded with quotes.
These are all strings:
"Ryan"
"4"
"What is your name?"
In our code, we're using document.write() simply to display the string of your name in the preview window. The important stuff is inside the parentheses, so let's just focus on that.
To discover the length of a string, write the string within quotes. Then write a period (full stop) and the word length like this:
”Ryan".length.
Numbers
Great job! Now, let's do some math. You can add, subtract, multiply, and divide numbers in JavaScript, like this:
Addition: 2 + 3
Subtraction: 6 - 3
Multiplication: 3 * 4
Division: 10 / 5
Booleans
Nice job! Next let's look at Boolean expressions. A Boolean expression is either true or false.
For example, comparing two numbers returns a true or false result:
23 > 10 is true
5 < 4 is false
What we'll do
In the previous section, we started learning the JavaScript programming language. So far we've used:
strings (e.g. "dogs go woof!")
numbers (e.g. 4, 10)
booleans (e.g. false, 5 > 4)
In this section, we'll write a program to animate your name. Move your mouse over "Codecademy" in the preview window. You're going to make this!
Variables
So far, we've been typing in strings, numbers, and booleans into the editor. To do more complex coding, we need a way to "save" these values. We can do this using variables. A variable stores a string, number, or boolean, and gives it a specific, case-sensitive name.
Examples:
var myName = "Beyonce";
var myAge = 32;
var isEven = true
Functions
Excellent! Your name is drawn as a collection of bubbles. How did this happen?
In line 1, you created a variable named myName in which you stored a string of your name
In line 5, a function named drawName() took your name string and drew it on the screen.
Hang on, what's a function? A function takes in an input, does something with it, and then returns an output. In our code, the input was your name, and the output was the picture of your name as a bunch of bubbles.
var myName = "Ademiya Lee";
drawName(myName, blue);
Arrays
Looking good! Your name is now drawn as a collection of blue bubbles. But wouldn't it be cooler if we could use more than one color?
Variables, like myName, can store numbers or strings. But so far, we've only been able to store one number or one string at a time. Good thing we have arrays. Arrays store lists of data.
Examples:
var names = ["Beyonce", "Jay Z", "Blue Ivy"];
var blue = [196, 77, 55];
Anytime you see data surrounded by [], it is an array.
In fact, computers can understand colors as an array of numbers. In lines 1-5, I've added five colors. They are simply variables storing arrays of 3 numbers. Let's use them now to make the bubbles in your name more colorful.
Change the bubble shape
Colorful! What did we just do?
We gave the function drawName() two inputs. One was your name. The other was an array of colors. The output was a multi-colored picture of your name.
Now let's change the shape of the bubbles from circles to squares. There's a variable called bubbleShape that lets you control the shape of the bubbles.
When bubbleShape = "square", the bubbles are shaped as squares
When bubbleShape = "circle", the bubbles are shaped as circles
Decisions, decisions
Great job! Next let's use booleans to decide whether a block of code should run. Take a look at this code:
if(10 < 3) {
bubbleShape = "circle";
}
else {
bubbleShape = "square";
}
Now imagine we have a robot that starts in line 1 of this code, and walks down it line by line. If the condition (in this case, 10 < 3) evaluates to true, then the robot runs the code inside the first pair of curly braces {}, which will make the bubbles circle-shaped.
Else the condition is false (which it is, in this case), so the robot skips the code in the first block of curly braces entirely, and runs the code in the second block. Therefore, the bubbles will be square-shaped.
This is called an if/else statement.
Bounce the name
Whew! Great work with if/else statements!
Let's make the bubbles in your name more interactive. It would be cool if you could mouse over your name and cause it to move in some way. We have a function called bounceName() that shakes your name around when a mouse comes close to it. Note that bounceName() does not take any inputs, unlike drawName() which took two inputs.
Bounce the bubbles
Sweet! Your name rattles around when you move your mouse near it.
Now as cool as it is to see your name shake about, it would be even cooler to bounce the bubbles themselves. We have another function called bounceBubbles() that does this. Similar to `bounceName(), this function does not take any inputs.
Congratulations!
Awesome!! The bubbles in your name scatter about and regroup when you move your mouse over them.
You started this track learning JavaScript, and some of the basic ingredients to make a program, such as strings, numbers, and booleans.
Then you connected those concepts together with variables, arrays, and an if/else statement to wire a program that animates your name. Congratulations on all your hard work!!
We want to thank Google, Rob Hawkes, and Mark Brenig-Jones & Emile Petrone. This course was inspired by and built on their work.
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var myName = "Ademiya Lee";
var letterColors = [red, orange, blue];
bubbleShape = "circle";
drawName(myName, letterColors);
bounceBubbles();
