An Hour Of Code With Bootstrap
« »

  • Welcome to the Hour of Code from Bootstrap!

    In this exploration, you get to learn how to create images using text-based code, use functions to combine images, and learn different ways to combine images to create whatever you imagine!

    Let's get started!

  • 1. Where Will We Code?

    You can always click this video link to hear these instructions aloud, along with a video of what to do at each step.

    In Bootstrap, we use a tool called WeScheme to write our programs. You can see the WeScheme editor on the right, or, you can 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.

    You can resize these areas the way you want by clicking and dragging the vertical grey line in the center.

    Drag the gray, vertical divider to resize the Definitions Area.

    The 'Run' button in the upper-left clears the Interactions Area and runs any code in the Definitions area.

    Locate the 'Run' button and press it.

    Running the provided code tells the computer to display "Hello World" in the Interactions Area.

    You can also type directly into the Interactions Area and pressing Enter.

    1. Try typing a word or phrase into the Interactions window and press Enter.
    2. Try typing the number 5 into the Interactions window and press Enter.

    Notice that when typing a word or phrase, we use quotation marks (" "), but not when typing numbers!

  • 2. Using Functions

    Watch Video
    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!
    1. Type the code for $10 - 3$ and press Enter.
    2. Type the code for $5 * 103$ and press Enter.
    3. Type the code for $3 \div 4$ and press Enter.
      Notice that you can click on the result!

  • 3. Making Images From Code

    Watch Video
    In the editor, you can see a simple program in the Definitions Area:
    (star 50 "solid" "blue")
    What do you think it will do?
    Make a prediction of what this code will do, then click the Run Button.
    1. Where did the result appear?
    2. Try changing the number and clicking Run. What happens?
    3. Try changing "solid" to "outline". What happens?
    4. Copy and paste this program into the Interactions Area, on the right, then hitting the "Enter" key. What happens?
    5. Try making other stars in the Interactions Area, and then click Run. What happens?

    Can you guess what these parts of the program represent?

  • 4. Reading Code

    Watch Video
    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 is
    star : Number String String -> Image!

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

    1. Numbers, such as 3, 10.82, -105, 0, and so on
    2. Strings are things in quotations like "solid", "purple", "Walrus", and so on
    3. Images, such as

    1. The function star requires three inputs.
    2. The Number 50 represents the radius of the star.
    3. The String "solid" represents the style of the star.
    4. 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

    Watch Video
    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?
    1. Click Run to see what kind of message the computer will give you.
    2. Read the error message carefully.
    3. Click on the colored parts of the error, and see the corresponding code blink!
    4. Can you fix the problem?

  • 6. Exploring Images

    Watch Video
    There are lots of other functions that will produce an image...but how do you use them?

    There are other shape functions that have the same contract as star, taking a Number and two Strings and producing an Image.

    circle is one of these functions. Try to make a solid blue circle!

    All the shapes below take a Number and two Strings and produce an Image. Take some time to try them out!

    Try out these functions:
    1. circle - can you make a solid, green circle with a radius of 35?
    2. triangle - can you make an outlined, red triangle any size you want?
    3. square - can you make a purple square with each side of length 104?

  • 7. More Images!

    Watch Video
    As you may have already discovered, there are some shape-producing functions that require different inputs in order to work. We've included one of those functions here: rectangle.

    What do you notice is different about the code for a rectangle?

    The rectangle function has a different contract than star.

    With the star function, we only had to give it one number, for the radius. But rectangles have two dimensions: length and width!

    Our contract for rectangle is:
    rectangle: Number Number String String -> Image

    Here are some other functions can experiment with:

    • right-triangle requires a Number for the base, a Number for the height, and two Strings for style and color
    • isosceles-triangle requires a Number for the length of the equal sides, a Number for the angle between those sides, and two Strings for style and color
    • text requires a String for the message, a Number for the size, and a String for the color
    • radial-star requires five inputs:
      1. a Number for the number of points
      2. a Number for the outer radius
      3. a Number for the inner radius
      4. a String for the style
      5. a String for the color

    Take a few minutes to try these out!
    1. right-triangle - can you make a pink right triangle?
    2. isosceles-triangle - can you make a black isosceles triangle?
    3. text - can you write your name in huge orange letters?
    4. radial-star - can you create a radial star?

  • 8. Defining Values

    Watch Video
    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 defined CodingIs 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!
    1. Type the code (define RedCircle (circle 40 "solid" "red")) into the Definitions window and press Run.
    2. Type RedCircle into the Interactions window to see it appear!
    3. Define Twinkle to be an Image of a yellow star.
    4. Create an Image of your name and call it MyName.
    5. Define the number 42 to be TheAnswer.

  • 9. Combining Images

    Watch Video
    Creating images is fun, but things really start to get interesting when we learn how to combine them!

    Check out the provided code. What do you notice?
    Press Run to see what it does!

    The beside function allows us to take two images and create a new image with the two images beside each other!

    Notice that you can still type letter1 or letter2 into the Interactions Area and press Enter to see the individual images. We didn't change the original images, we created a new one!

    Define two rectangles and combine them into a new image.
    1. RedRect should be a red, solid rectangle with length 20 and height 40.
    2. BlueRect should be a blue, solid rectangle with length 20 and height 40.
    3. Use beside to place RedRect beside BlueRect.
    4. Use define to name this new shape SplitSquare.
    5. Just for fun, let's spin that square around! Use the code (rotate 45 SplitSquare) to turn the square 45 degrees!

    In addition to beside, there is similar function called above.

    What do you expect this new function to do? Use above to combine two shapes to create this image:

  • 10. Layering Images

    Watch Video
    In addition to placing images beside or above each other, we can layer images.
    Check out the provided code. Make a prediction, then press Run to see what it does!

    This new function overlay takes two images as an input, and places them one on top of another, lined up on the centers.

    Create two images of your own and use overlay to combine them into one image. Remember, the top image must be smaller than the bottom image!

  • 11. Layering Multiple Images

    Watch Video
    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?
    1. The flag of Japan
    2. The flag of Switzerland
    3. The flag of Holland
    Challenge: There is another way to 'overlay an overlay' with only one line of code. Can you figure it out?

  • 12. Placing Images Using Coordinates

    Watch Video
    Maybe you want to place an image in a specific location on top of another image. put-image allows you to do that!

    The four inputs that put-image needs are: Image Number Number Image.

    Try running the provided code. What do you notice?

    1. The two numbers in the contract stand for the x- and y-coordinate of the first Image.
      What are the coordinates of the white star right now?
    2. Change the coordinates of the white star to move it up 50 pixels.
    3. Change the coordinates to make the star appear in the upper-left corner of the purple rectangle.
    4. Change one of the coordinates of the star to a negative number. What happens? Why?

  • 13. Create!

    Let's use what you've learned to create a flag!

    If you'd rather work in the full-sized WeScheme environment, click here to open WeScheme in a new window!

    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!

    Shapes
    1. circle: Number String String -> Image
    2. rectangle: Number Number String String -> Image>
    3. triangle: Number String String -> Image
    4. star: Number String String -> Image
    5. text: String Number String -> Image

    Changing/Combining Images

    1. rotate: Number Image -> Image
    2. beside: Image Image -> Image
    3. above: Image Image -> Image
    4. overlay: Image Image -> Image
    5. put-image: Image Number Number Image -> Image

    You can find out more by reading the Flags Lesson.

  • 14. A Wintery Puzzle

    Watch Video
    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.