
1. From Algebra to Computer Graphics
In Bootstrap, every computer program is made up of Expressions
and Definitions. Expressions are pieces of code that produce a value.
Just like in math class, expressions can be simple numbers like 4 and 9
(4 evaluates to 4, 9 evaluates to 9, etc). They can also be more complex,
using functions to add and subtract numbers ($4+9$ evaluates to 13).

2. The WeScheme Editor
Bootstrap students use a tool called WeScheme to write programs, and we've
embedded a WeScheme editor on the righthand side of this page. (If you want,
can always open WeScheme in a new window.)
The Editor is divided into two sections:
 The Definitions Area on the left and
 the Interactions Area on the right.
Drag the gray, vertical divider to resize the Definition Area
In the editor, we've written a simple program in the Definitions Area:
(star 50 "solid" "red")
What do you think it will do?
To run the program and see the result, click the
Run Button.
 Where did the result appear?
 Try changing the number and clicking Run. What happens?
 Try changing "solid" to "outline".
 Copy and paste this program into the Interactions Area, then hitting the "Enter" key. What happens?
 Try making other stars in the Interactions Area, and then click Run. What happens?

3. Reading Code
The program (star 50 "solid" "red") is an example of a function application.
In this case, the application has four parts:
 The function star, which is being applied to three inputs.
 The number 50, which specifies the radius of the star.
 The string "solid", which specifies the style of the star.
 The string "red", which specifies the color of the star.
The parentheses tell the computer that we want to apply the function to these inputs.
If we get rid of the parentheses, the computer will just evaluate each of the four parts separately, giving us four values instead of one (you can see this written in the Definitions Area on the right).
 Click the Run button and see what happens.
 What did the function star evaluate to?
 What did the number 50 evaluate to?
 What did the string "red" evaluate to?
 What did the string "solid" evaluate to?

4. Functions and Values
In Bootstrap, our language works a lot like what you know from math class! Everything is either a function or a
value. Functions are things like + (addition),  (subtraction), * (multiplication) or / (division)...but they can also be more complex things like the star function you've already seen.
Values are things like Numbers (54, 2/3, 0.66, or 42), but you have already seen examples of Strings, such as "solid" and "red". Any value in quotation marks is a string  even "42" is a string, because it has quotes around it!
Like Numbers, String values are very simple: they just evaluate to themselves.
Notice that the computer makes all Numbers blue and all Strings green, to help
us keep track of which is which!
 Add your name to the Definitions Area as a string, and click the Run button.
 Add more string values and number values, each on their own line. What happens when you click the Run button?

5. Using What You Know
Since our programming language works just like math, you can use what
you already know to think about it. A mathematical expression is
just like our star expression: it has a function and some values.
To evaluate an expression, we apply the function to the
values that follow. The expression $4+5$ applies the addition function ($+$)
to the values $4$ and $5$, which evaluates to $9$.
For each of the expressions below, what is the function? What are the values?
 $8*4$
 $2016$
 $16/20$
We can diagram expressions in math  and in programming 
using a Circle of Evaluation.
(
*
9
4
)
Here is an example of a Circle of Evaluation, for the expression $9 x 4$. Circles of Evaluation show the structure
of an expression. All Circles of Evaluation have two rules:
 Rule 1: Each circle must have one function, which goes at the top of the circle.
 Rule 2: The inputs are written below, in order from left to right.

6. Circles of Evaluation
Circles of Evaluation are a way of seeing and reading computation. You can use the Order of Operations to build these circles.
On paper, try drawing the Circle of Evaluation for each of the following expressions:
 $6*4$
 $710$
 $5+8$
 $\frac{351}{1} $
In the image on the right, match each arithmetic expression with its circle.

7. From Circles to Code
The Circles of Evaluation are also easy to convert into code. To translate a Circle of
Evaluation into a program, we use the following steps:
 Begin with an open parenthesis (.
 Write the name of the function (+, , star, etc.) that you see at the top of the circle.
 Then translate the arguments from left to right.
 Adding a closing parenthesis ) when you're done.
Try converting the Circle of Evaluation below into code.
(
triangle
100
"solid"
"orange"
)

8. Converting to Code
Here is the Circle of Evaluation from the previous step:
(
triangle
100
"solid"
"orange"
)
You can see the same code typed out in the Definitions Area on the right.
 What do you think this program will evaluate to?
 Click the Run button  was your guess right?
 Click back in the Definitions Area, so that your cursor is right next to a parenthesis. Notice that the computer will highlight the matching parentheses for you! For more complex expressions, this will help you keep track of which expression is which.
 Try converting the other Circles of Evaluation you drew on paper into code, and typing them into the Definitions Area.

9. Debugging
star is a function that takes three inputs: a Number for the size of the star,
a String for the style, and a String for the color. What if a programmer forgets one of these?
When something like this happens, computers use Error Messages to give helpful
hints about what is wrong.
Can you see the problem in the Definitions Area, on the right?
 Click Run to see what kind of message the computer will give you.
 Read the error message out loud
 Click on the colored parts of the error, and see the corresponding code blink!
 Can you fix the problem?

10. Exploring Images
There are lots of other functions that will produce an image...but how do you use them?
Error messages are really helpful when you're starting to program. You can try experimenting with
different functions, reading the error messages, and figuring out how to use them. In the editor
on the right, we've filled in an example of an expression that uses the rectangle
function...but it has an error!
Try to figure out what the error is. For a hint, click Run and read the error message out loud.
Take a few minutes to experiment with these functions:
 circle  can you make a solid blue circle?
 triangle  can you make an outlined, red triangle?
 square  can you make a purple square?
 righttriangle  can you make a pink right triangle?
 isoscelestriangle  can you make a black isosceles triangle?
 text  can you write your name in huge orange letters?

11. Nested Expressions
(
*
(

1
2
)
(

3
4
)
)
To use multiple functions in the same expression, we can combine Circles
of Evaluation. Suppose we wanted to multiply $12$ by $34$. Here is the Circle of
Evaluation to do just that:
We've converted this Circle of Evaluation into code, and written it into the Definitions Area on the right. Click run to see what it evaluates to.
Convert the following Circle of Evaluaton into code, and type it into the Definitions Area.
(
rotate
45
(
star
50
"solid"
"red"
)
)
 What does the rotate function do?
 Try making a blue triangle, rotated so it points to the right.
 Try drawing your name in red, rotated upsidedown.

12. Combining Images
Let's explore a new function called overlay. This function takes two images as an input, and
glues them one on top of another. Here's a Circle of Evaluation that uses overlay.
(
overlay
(
star
50
"solid"
"yellow"
)
(
circle
50
"solid"
"blue"
)
)
 What kind of image will this produce?
 Finish the code on the right so that it matches the Circle of Evaluation.
 Try drawing a red triangle inside a black square.
 Try drawing a rotated red triangle inside a black square.

13. Adding Your Own Images
Bootstrap also lets you grab any image from the internet, and use it just like you would any image value.
The function imageurl takes only one string as an input, as long as that string
is an address  or URL  for an image! You can see an example Circle of Evaluation below:
(
imageurl
"http://bootstrapworld.org/icon.gif"
)
The code for this Circle of Evaluation is written in the Definitions Area on the right. Click Run
and see what happens!
 Try replacing the string value with the URL for a different image. Not all URLs are images! Make sure the address ends in .jpg, .gif, or .png!
 Try using the rotate function, to turn your image 45 degrees.
 Try to overlay another shape on top of this image.

14. Want More?
An Hour of Code is just a taste, and we hope you've enjoyed it! But of course, there's so much more to explore when it comes to computer programming! If you'd like to do more of this kind of programming  especially in a math class  check out Bootstrap to learn how to make a video game using programming in your math class!
For an extra challenge, see if you can make a flag for a country you've always wanted to visit, or where you have family. You can find out more by reading the Flags Lesson.
Teachers, you can have students bring what they've learned back into their math classroom  even without a computer! Check out our printout supplemental exercises, where students write code while practicing their Order of Operations and Function Composition skills.