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
-
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
- Shapes and Parameters - Slides
Vocabulary
- Parameter - An extra piece of information passed to a function to customize it for a specific need
Introduced Code
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)
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?
- Lesson Overview
- 1
Teaching Tip
Shapes and Parameters - (Map Level - download as pdf)
Student Instructions
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
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.
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
backgroundwork. - 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?
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.
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?
Student Instructions
None
Choose from the following activities:
Reveal the picture under the red circle.
The picture isn't appearing, what's wrong with the code?
Be creative and finish the drawing however you want!
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.
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.
Student Instructions
Finish the Scene
The scene below seems to be incomplete. Be creative and finish the drawing however you want!
- Assessment
- 8
Assessment Opportunities
Use arguments to change the way a method or command runs.
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?
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:
Learn how to create polygons with any number of sides.
Learn how to create any shape you want.
Learn how to draw lines.
Learn how to draw arcs.
Now that you have some new blocks, decide what you'd like to draw with them.
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
regularPolygonblock to finish the code so it matches the picture on the right.
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
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
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.
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.