instagram

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

Function Composition, defining-values

Relevant Standards

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?

  1. 🖼Show image

  2. 🖼Show image

  3. 🖼Show image

  4. 🖼Show image

Complete Combining Images (Page 18).

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). CCbadge 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.