2. Using Functions

Learning to code means we're learning a language that the computer understands. We can use this computer language to ask the computer to complete certain tasks.

Look at the provided code and make a prediction. Press Run to see what this code does!

We wrote a simple program that asked the computer to add 4 and 2, and it did. WeScheme can handle adding any numbers you can think of. It also knows subtraction (-), multiplication (*), and division (/).

You may have noticed that the plus sign (+) went ahead of the numbers. In this language, the function always goes in the front! You'll see this again later with some image functions.

Take a few minutes to get comfortable with using functions in WeScheme. Use the Interactions Area (on the right) and press Enter after each line of code to see the result!

Type the code for $10 - 3$ and press Enter.

Type the code for $5 * 103$ and press Enter.

Type the code for $3 \div 4$ and press Enter. Notice that you can click on the result!

4. Reading Code

The program (star 50 "solid" "blue") is an example of a function application.
Every function has a contract: which tells us the name of the function, how many and what kind of inputs it requires, and what it function will produce.

The contract for this function isstar : Number String String -> Image!

Inputs can be many different things, but we'll just focus on three right now:

Numbers, such as 3, 10.82, -105, 0, and so on

Strings are things in quotations like "solid", "purple", "Walrus", and so on

Images, such as

The functionstar requires three inputs.

The Number50 represents the radius of the star.

The String"solid" represents the style of the star.

The String"blue" represents the color of the star.

The parentheses tell the computer that we want to apply the function to these inputs.

Try leaving out one of these inputs and press Run. What happens?

5. Debugging

You've seen that star is a function that takes three inputs: a Number for the radius of the star, a String for the style, and a String for the color. What if a programmer forgets one of these, or uses the wrong datatype?

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 carefully.

Click on the colored parts of the error, and see the corresponding code blink!

8. Defining Values

You've already learned a lot of ways to create images in WeScheme. Now we're going to learn a way to define them as a value so that we can make them appear without retyping all the code! It's like giving names to parts of our code to make them easier to use.
In the provided code, we've definedCodingIs to be (text "Awesome" 50 "red").

Click the Run button and then type in CodingIs into the Interactions window, on the right.

Did you see the image appear? If not, make sure you typed it exactly as shown, including capitals!

Use the new define keyword to name a few Images, Numbers, or Strings.
Be careful with your parenthesis!

11. Layering Multiple Images

What if we want to layer more than two images? Perhaps we'd like to add another star to our star-and-square image from before.

What happens if we try to combine three images using overlay, without breaking the contract?

The contract for overlay is:overlay : Image Image -> Image
In the provided code, we've given the combined star-and-square image a new name - StarSquare.
We combined two images into one, now we'll combine that image with another image!

Create a new image of a solid white star of radius 75 called WhiteStar.

Use overlay to layer the white star you created on top of StarSquare.

We combined two images into one, then combined that image with another image!

Create: Can you create images of these flags using what you've learned?

The flag of Japan

The flag of Switzerland

The flag of Holland

Challenge: There is another way to 'overlay an overlay' with only one line of code. Can you figure it out?

13. Create!

Is there a country you've always wanted to visit? Do you have family in another country? Or, would you rather create your own personal flag? Use what you've learned during this Hour of Code to create what you'd like!

We've included below a list of some of the functions we've used in this Hour to help you out.
If you'd like to save and share your image, you can right-click on it to save it to your computer.Share your creation on social media! Tag it with @BootstrapWorld on Twitter!

14. A Wintery Puzzle

We've provided a put-image puzzle here for you to build a snowy scene!Click here to open it in a new window!
Change the coordinates and press Run to move the different elements around!
Use what you've learned about creating images to add your own elements to the scene!

An Hour of Code is a great way to get started with programming, 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!

Bootstrap is brought to you by Jennifer Poole, Emmanuel Schanzer, Kathi Fisler, Shriram Krishnamurthi, Emma Youndtsmith, and Ed Campos. Special thanks to Program by Design.