1. Welcome to Bootstrap's Hour of Code!

On the right, you should see an embedded version of our Parley Editor, which works like a chat program...

• The code we've written appears in the blue bubble.
• The text function takes in 3 inputs: a message, a size, and a color.
• The Editor automatically runs each line of code you submit and responds with the result.
• If there's an error, the Editor will get stuck until you fix it.

1. Try clicking on the code and editing the message.
2. Then hit "Enter" or click the Update responses button in the top left to re-run the code.

You can also always click 🔄, to reset the editor to where it was the first time you saw any card.

2. Coding Images

star(50, "solid", "blue")

1. to add it to the editor and see the result!
2. You can also click on the code on the right to change it!

   Try changing the 50 to another number. Then hit "Enter" or click the Update responses button to re-run the code. What happens?

3. Try changing the color.

3. More Shape Functions!

Here are a few for you to try!

1. Can you write the code to make a solid, green circle with a radius of 26?
2. Can you make an outlined, red triangle of size 45?
3. Can you make two different purple squares with side-lengths of 104?

4. What about Errors?!

The error message we see here tells us that rectangle needs 4 arguments, but was only given 3.

• Think about it: What might be missing?
• Try it:Take 1 minute to see if you can figure out how to change the code to successfully build a rectangle before advancing to the next slide.

Note: The Editor needs you to fix the code that generated the error and will not be able to run new lines of code until you do!

5. What Makes Rectangles Different?

Why does rectangle need two numbers, while square only needed one?

• Think about it: What do you think will happen if you switch the order of the numbers and hit "Enter".
• Try it: Make a prediction, to test it out!

6. More Images

1. Take a moment to imagine an ellipse in your mind.
• Either write the code to generate an ellipse on your own or in the Editor.
• How would you explain what an ellipse is to someone else?
2. Can you make a tall ellipse?
3. Can you make an ellipse that looks like a circle?
4. Experiment with right-triangle.
• Why does right-triangle need two numbers, while triangle only needed one?

7. Defining Functions

Here we have defined a nose.

1. What do you think will happen if you type nose in a new line of code and hit "Enter"? Test it out.
2. What do you think will happen if you change the color of the nose and click the Update responses button to re-run the code? Test it out.
3. Define mouth to be another shape of your choosing.

8. Composing Functions

Defining functions simplifies the process of combining them.

1. What do you think this next line of code will do?

body = above(torso, base)

Make a prediction, then in the editor!

2. YOUR TURN: Can you write the code to place the head above the body?

9. Composing a Top Hat

1. Define top to be a solid black rectangle that is 50 x 30.
2. Define top-hat to put the brim below the top.
3. Can you make the same image using above?

10. Overlaying Images

1. What do you think this next line of code will do?

overlay(pupil, eye-white)

to add it to the editor and see the result!

2. Where on the eye-white does the pupil get placed?
3. What do you think we'd see if we typed overlay(eye-white, pupil) instead?
to add it to the editor and see the result! What happened?!

11. Placing Images Using Coordinates

This requires a function called put-image, which takes in two Images and two Numbers.

• The first Number is the x-coordinate.
• The second Number is the y-coordinate.
• The bottom left corner of the bottom image is (0,0).

Think about it: What image do you think the expression put-image(pupil, 10, 30, eye-white) will generate? Make a prediction!

Try it out: to add it to the editor and test it out!

12. Making Googley Eyes

1. Use put-image to place the pupil on the center of the eye-white.
2. Use put-image to place the pupil on the bottom of the eye-white.
3. Use put-image to place the pupil on the eye-white wherever you think it makes the best looking googley eye!

13. Full Pyret

On the right is a video of our classic Pyret editor in action.

• The Definitions Area on the left side contains much of the code we've written today.
• In Parley, code was evaluated as you typed it.
• In classic Pyret, code from the Definitions area is only evaluated when you click "Run".
• On the right side we have the Interactions Area, where a user is evaluating eye and googley-eye.
• Anytime we make a change to the code in the Definitions area, we need to click "Run" again. Doing so will clear all of the code from the Interactions area.

If you'd like to watch the video again, click on the screen.

when you're ready to play around with this file in the classic Pyret editor.

14. Your Task

• familiar with Pyret
• know how to define image-producing functions
• know how to compose more complex images with them using coordinates

you're ready to solve a puzzle!

When you open the file linked below and click "Run", you will see a jumbled collection of objects that need to be placed to compose a winter wonderland scene.

The pieces have been defined behind the scenes so you won't be able to change them... but you don't have to use them all and, once you have successfully created an image that will make sense to other viewers, you can use what you've learned to improve upon it by defining any additional values you like!

in a new Pyret window and click "Run" to load the initial image.