Bootstrap :: Hour of Code

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 right-hand side of this page. (If you want, can always open WeScheme in a new window.)
The Editor is divided into two sections:
1. The Definitions Area on the left and
2. 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")(star 50 "solid" "red")
What do you think it will do?
To run the program and see the result, click the Run Button.
1. Where did the result appear?
2. Try changing the number and clicking Run. What happens?
3. Try changing "solid""solid" to "outline""outline".
4. Copy and paste this program into the Interactions Area, then hitting the "Enter" key. What happens?
5. Try making other stars in the Interactions Area, and then click Run. What happens?
3. Reading Code
The program (star 50 "solid" "red")(star 50 "solid" "red") is an example of a function application. In this case, the application has four parts:
1. The function starstar, which is being applied to three inputs.
2. The number 5050, which specifies the radius of the star.
3. The string "solid""solid", which specifies the style of the star.
4. The string "red""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).
1. Click the Run button and see what happens.
2. What did the function starstar evaluate to?
3. What did the number 5050 evaluate to?
4. What did the string "solid""solid" evaluate to?
5. What did the string "red""red" 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 starstar 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""solid" and "red""red". Any value in quotation marks is a string - even "42""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!
1. Add your name to the Definitions Area as a string, and click the Run button.
2. 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 starstar 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?
1. $8*4$
2. $20-16$
3. $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 9x4. Circles of Evaluation show the structure of an expression. All Circles of Evaluation have two rules:
1. Rule 1: Each circle must have one function, which goes at the top of the circle.
2. 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:
1. $6*4$
2. $7-10$
3. $5+8$
4. $\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:
1. Begin with an open parenthesis ((.
2. Write the name of the function (++, --, starstar, etc.) that you see at the top of the circle.
3. Then translate the arguments from left to right.
4. 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.
1. What do you think this program will evaluate to?
2. Click the Run button - was your guess right?
3. 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.
4. Try converting the other Circles of Evaluation you drew on paper for step 6, and typing them into the Definitions Area.
9. Debugging
starstar 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?
1. Click Run to see what kind of message the computer will give you.
2. Read the error message out loud
3. Click on the colored parts of the error, and see the corresponding code blink!
4. 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 rectanglerectangle 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:
1. circlecircle - can you make a solid blue circle?
2. triangletriangle - can you make an outlined, red triangle?
3. squaresquare - can you make a purple square?
4. right-triangleright-triangle - can you make a pink right triangle?
5. isosceles-triangleisosceles-triangle - can you make a black isosceles triangle?
6. texttext - 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 1−2 by 3−4. 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" ) )
1. What does the rotaterotate function do?
2. Try making a blue triangle, rotated so it points to the right.
3. Try drawing your name in red, rotated upside-down.
12. Combining Images
Let's explore a new function called overlayoverlay. This function takes two images as an input, and glues them one on top of another. Here's a Circle of Evaluation that uses overlayoverlay.
( overlay ( star 50 "solid" "yellow" ) ( circle 50 "solid" "blue" ) )
1. What kind of image will this produce?
2. Finish the code on the right so that it matches the Circle of Evaluation.
3. Try drawing a red triangle inside a black square.
4. 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 bitmap/urlbitmap/url 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:
( bitmap/url "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!
1. 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!
2. Try using the rotaterotate function, to turn your image 45 degrees.
3. Try to overlayoverlay 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 videogame 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 print-out supplemental exercises, where students write code while practicing their Order of Operations and Function Composition skills.

1. From Algebra to Computer Graphics

2. The WeScheme Editor

3. Reading Code

4. Functions and Values

5. Using What You Know

6. Circles of Evaluation

7. From Circles to Code

8. Converting to Code

9. Debugging

10. Exploring Images

11. Nested Expressions

12. Combining Images

13. Adding Your Own Images

14. Want More?