Students compose the image functions they’ve learned, applying their knowledge of coordinates to position differently-shaped and transformed images to create flags of varying complexity.

 Prerequisites Relevant StandardsOK Select one or more standards from the menu on the left (⌘-click on Mac, Ctrl-click elsewhere). Oklahoma Standards OK.8.AP.C.01 Develop programs that utilize combinations of nested repetition, compound conditionals, procedures without parameters, and the manipulation of variables representing different data types. Lesson Goals Students will be able to: Put one image on top of another, using the `put-image` function. Decompose complex images into parts. Combine and manipulate images to create more complex images. Student-facing Goals I can put one image on top of another. I can make complex images like flags. Materials Preparation Make sure all materials have been gathered. Decide how students will be grouped in pairs. Key Points For The Facilitator The `put-image` function treats the second image as the first quadrant of a cartesian plane. Having students sketch their flag on a sheet of graph paper drives this point home, and makes the programming easier. This is an excellent opportunity to introduce students to indenting code. The difference between poorly-indented flag code and well-indented flag code is extremely noticable.
Glossary
contract

a statement of the name, domain, and range of a function

## 🔗Putting Images Together 15 minutes

### Overview

Students learn about the `put-image` function.

### Launch

You already know how to place one image on top of another, using the `overlay` function.

Open the Flags Starter File , and click Run.

There’s some code in the Definitions Area you haven’t seen before. For now, just focus on lines 4 and 5 in the code. What do these lines of code do?

Evaluate `dot` and `blank` in the Interactions Area. What do you get?

How could we overlay the `dot` on top of the `blank` rectangle image? What image do we get back?

As you’ve seen, `overlay` stick two images together, so that the center of the first image is placed exactly on top of the center of the second image. But what if we want to put the dot somewhere besides the center?

### Investigate

• Type `japan` into the Interactions Area. What do you get back?

• Take a look at the code on line 7. What function is being used here?

• Try changing the `150` to `50`, then click Run. How does this image change?

• Try changing the `50` to `0`, then click Run. How does this image change?

• What is the Contract for `put-image`? (Write it in your Contracts page!)

• What does the `put-image` function do?

The `put-image` function works like `overlay`, but instead of placing the centers of each image on top of one another, it translates the center of the top image by some distance in the x- and y-direction.

Think of the bottom image as a sheet of graph paper

The numbers in `put-image` specify a point on that graph paper, with the center of the top image being placed there.

The width of the rectangle is 300 and height is 200. Estimate: What coordinates for the `dot` would create each of the following images?

### Synthesize

Could we completely replace `overlay` with `put-image`? Why or why not?

## 🔗Making Flags 25 minutes

### Overview

Students focus on decomposing complex images into simple ones, and using `put-image` to combine them.

### Launch

Let’s dig into the process for how the `japan` was made:

1) Decompose the Image

We observe that the Japanese flag is made up of two simpler images: a blank rectangle and a red dot.

2) Define those parts

We define `dot` and `blank`. Once we’ve defined those images, we test them out in the Interactions Area to make sure they look right!

3) Find the Coordinates

For each image, calculate what the x- and y-coordinates of the center should be. TIP: this is a lot easier if you have a sheet of graph paper handy!

4) Build the Image

We stack the parts on top of the bottom image using the coordinates we found. TIP: don’t cram all the code into one line! If you break it up into new lines (for example, hitting "Return" before the x-coordinate and after the y-coordinate), you’ll notice that the code forms a "staircase" pattern.

### Investigate

1. Turn to Decomposing Flags (Page 19), and choose ONE flag to focus on. On the blank lines below, describe the parts that make up that flag.

2. Once you’re done, return to the Flags Starter File and define those parts.

3. Then, compose those parts using `put-image`, and make your flag!

 Ratio and Proportion Have students define the `WIDTH` and `HEIGHT` of their flags as values, and then replace the numbers in each flag with expressions relative to width and height. For example, if the `dot` in the Japanese flag is at (150, 100), those numbers would be replaced with WIDTH / 2 and HEIGHT / 2.

### Synthesize

Which flags were the easiest to make? The hardest?

Why is it useful to define each part of the flag first, before stitching them together?

These materials were developed partly through support of the National Science Foundation, (awards 1042210, 1535276, 1648684, and 1738598). Bootstrap:Integrated Oklahoma by Jen Poole is licensed under a Creative Commons 4.0 Unported License. Based on a work at www.BootstrapWorld.org. Permissions beyond the scope of this license may be available by contacting schanzer@BootstrapWorld.org.