Lesson 4: Shapes and Parameters

Overview

Question of the Day: How can we use parameters to give the computer more specific instructions?

In this lesson students continue to develop their familiarity with Game Lab by manipulating the width and height of the shapes they use to draw. The lesson kicks off with a discussion that connects expanded block functionality (e.g. different sized shapes) with the need for more block inputs, or "parameters". Students learn to draw with versions of ellipse() and rect() that include width and height parameters. They also learn to use the background() block.

Purpose

This lesson gives students a chance to slightly expand their drawing skills while continuing to develop general purpose programming skills. They will need to reason about the x-y coordinate plane, consider the order of their code, and slightly increase their programs' complexity. This lesson should be focused primarily on skill-building.

Assessment Opportunities

  1. Use and reason about drawing commands with multiple parameters

    See level 8 in Code Studio.

Agenda

Lesson Modifications

Warm Up (5 min)

Activity (40 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Use and reason about drawing commands with multiple parameters

Preparation

  • Review the level sequence in Code Studio

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Vocabulary

  • Parameter - An extra piece of information passed to a function to customize it for a specific need

Introduced Code

Support

Report a Bug

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.

Warm Up (5 min)

  1. ellipse()
  2. rect()

Shapes of Different Sizes

Discussion Goal

Goal: This discussion introduces the vocabulary word "parameter" and also helps students understand the need for parameters. Students will be seeing versions of the ellipse() and rect() block in this lesson that have additional parameters. Students may say they want inputs for the size of the shapes, their color, etc. During this conversation tie the behaviors the students want to the inputs the block would need. For example, if you want rectangles to be a different size, the block will need an input that lets the programmer decide how large to make it.

Prompt: The rect block has two inputs that control where it's drawn - the x and y position. If you wanted these commands to draw different sizes of rectangles, what additional inputs would you need to give these blocks?

Discuss: Students should brainstorm ideas silently, then share with a neighbor, then share out with the whole class. Record ideas as students share them on the board.

Remarks

If we want our blocks to draw shapes in different ways they'll need more inputs that let us tell them how to draw. The inputs or openings in our blocks have a formal name, parameters, and today we're going to be learning more about how to use them.

Key Vocabulary: Parameter - An extra piece of information passed to a function to customize it for a specific need

Question of the Day: How can we use parameters to give the computer more specific instructions?

Activity (40 min)

Programming with Parameters

Group: Put students into pairs for the programming activity.

Transition: Move students onto Code Studio.

Wrap Up (5 min)

Journal

Discussion Goal

Student answers will vary, but they should all follow the pattern of giving more specific information for how to carry out a task. If students have trouble thinking of something, you may want to give some examples for things a computer could do, such as ring an alarm (with a parameter for a certain time) or play a song (with a parameter for the song title).

Question of the Day: How can we use parameters to give the computer more specific instructions?

Prompt: You use parameters to control your shape's location and size. Can you think of any other situations in which parameters might be useful?

Share: Allow students to share our their ideas.

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Shapes and Parameters - (Map Level - download as pdf)

Student Instructions

View on Code Studio

Student Instructions

Rectangle Size

These rect blocks have two more parameters that you can use to control the size. Notice that the noStroke() block turns off the stroke (border) for shapes.

Do This

  • Look at the code and try to figure out how the last two inputs in rect work.
  • Change the numbers in the second rect to make red rectangle longer than the blue one.
View on Code Studio

Student Instructions

Do This

  • Write code that makes an orange ellipse behind the green one.
  • Don't worry about the exact size as long as the green ellipse is entirely inside the orange one.
View on Code Studio

Student Instructions

Background

Sometimes you'll want to fill the entire screen with a color. For that, you can use background. It covers everything on the screen with the color you choose.

Do This

  • Run the code to see background work.
  • Change the background from yellow to orange.

Challenge: There is a purple square that is covered up by the background. Can you change the order of the code so you can see both the purple and blue squares?

View on Code Studio

Student Instructions

Background

background() will draw on top of everything already in your drawing, so it's important to think about the order of your code.

Do This

  • Use background() to make a "black" background behind the green circle.
View on Code Studio

Student Instructions

Debug - Using 4 Parameters

This program uses the four parameter version of rect() and ellipse() to draw a simple scene.

Do This

  • Debug this program and correct the error so that the grass extends across the entire bottom.
  • Hint: You only have to change one number. Which parameter makes your rectangle (the grass) wider?
View on Code Studio

Student Instructions

None


Choose from the following activities:
a
Debug: Hidden Shapes

Reveal the picture under the red circle.

b
Debug: Missing Shapes

The picture isn't appearing, what's wrong with the code?

c
Finish the Scene

Be creative and finish the drawing however you want!

View on Code Studio

Student Instructions

Debug: Hidden Shapes

The code below should be making a pretty picture, but right now only one ellipse is showing up.

Do This

  • Debug the code so the picture shows on the right.
View on Code Studio

Student Instructions

Debug: Missing Shapes

When the code below is run, nothing shows up.

Do This

  • Debug the code so that an image shows up.
View on Code Studio

Student Instructions

Finish the Scene

The scene below seems to be incomplete. Be creative and finish the drawing however you want!

  • Assessment
  • 8
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Use arguments to change the way a method or command runs.

Assessment Criteria:
Extensive Evidence

The programmatic drawing appears exactly as it does in the example.

Convincing Evidence

The programmatic drawing is approximately the same as that in the picture, and the cloud's width and height have been changed.

Limited Evidence

The cloud's height, width, or position has been changed, but it may not be wider than it is tall, or it may be moved to somewhere else on the screen.

No Evidence

No changes have been made to the code, or the changes are unrelated to the instructions.

Student Instructions

Debug - Using 4 Parameters

Now that the grass is working, let's add a cloud to the sky. Unfortunately, it looks a little funny right now.

Do This

  • Debug this program to make the cloud wider than it is tall, like in the image.
  • Hint: You'll need to change two parameters. Which ones set your cloud's width and height?
View on Code Studio

Student Instructions

Check out one or more of these extra blocks that you can use to make your pictures more interesting.


Choose from the following activities:
a
New Block: Regular Polygon

Learn how to create polygons with any number of sides.

b
New Block: Shape

Learn how to create any shape you want.

c
New Block: Line

Learn how to draw lines.

d
New Block: Arc

Learn how to draw arcs.

e
Make a Shape Scene

Now that you have some new blocks, decide what you'd like to draw with them.

View on Code Studio

Student Instructions

Regular Polygons

As of now you have just been drawing ellipses and rectangles. But now there is a new block to help draw other shapes!

Do This

  • Read the code that makes the the current image.
  • Use the regularPolygon block to finish the code so it matches the picture on the right.
View on Code Studio

Student Instructions

Shape

As of now you have just been drawing ellipses and rectangles. But now there is a new block to help draw other shapes!

Do This

  • Read the code that makes the picture.
  • Use the shape block to finish the code so it matches the picture.
  • Play around some more with the shape block and see what you can make.
View on Code Studio

Student Instructions

New Block: Line

As of now you have just been drawing ellipses and rectangles. But now there is a new block to help draw just lines!

Do This

  • Read the code that makes the picture.
  • Use the line block to finish the code so it matches the picture (it only uses straight lines!).
  • Play around some more with the line block and see what you can make.
View on Code Studio

Student Instructions

New Block: Arc

The arc() commands works just like ellipse() except it has two extra parameters. These parameters specify two different angles that are used to create the arc.

Do This

  • Read the code and see how the 'arc' block works. Pay close attention to the last two parameters in each arc() command.
  • Play around with the 'arc' block once you think you know how it works!

Hints: For both angles, 0 degrees is to the right. 90 degrees is down. 180 degrees is to the left. 270 degrees is up. The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse.

View on Code Studio

Teaching Tip

This creative task allows students to use their new knowledge to achieve a goal that they set for themselves, or to tinker with the code without a specific set goal.

Student Instructions

Make a Shape Scene

Now that you have some new blocks, decide what you'd like to draw with them.

Do This

  • Draw a scene. You can use the scenes below for inspiration.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.