Lesson 4: Shapes and Randomization

Overview

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. At the end of the progression students are introduced to the randomNumber() block. Combining all of these skills students will draw a randomized rainbow snake at the end of the lesson.

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. The randomNumber() block is important for the next lesson where students learn to store values using variables. This lesson should be focused primarily on skill-building. If students are able to complete the rainbow snake independently, then they have the skills they'll need for the coming lessons.

Assessment Opportunities

  1. Use and reason about drawing commands with multiple parameters

    See level 7 in Code Studio.

  2. Generate and use random numbers in a program

    See level 11 in Code Studio.

Agenda

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
  • Generate and use random numbers in a program

Preparation

  • Review the level sequence in Code Studio

Vocabulary

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

Introduced Code

Teaching Guide

Warm Up (5 min)

  1. ellipse()
  2. randomNumber(5, 10)
  3. rect

Shapes of Different Sizes

Discussion Goal

Goal: This discussion introduces the vocabulary word "parameter" and also helps motivate their use. Students will be seeing versions of the ellipse() and rect() block in this lesson that have additional parameters, as well as the randomNumber() block which has two 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 circles to be a different size the block will need an input that lets the programmer decide how large to make it.

Prompt: Our ellipse and rect blocks each have two inputs that control where they're drawn - the x and y position. If you wanted these commands to draw a wider variety of rectangles and ellipses, what additional inputs might you need to give these blocks? What would each additional input control?

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

Remarks

This was a good list of ideas. 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.

Activity (40 min)

Programming Images

Transition: Move students onto Code Studio

Share: If some students have taken extra time to work on their projects, give them a chance to share their more complex rainbow snakes. Focus conversation on which parameters students are manipulating or randomizing to create their drawings.

Wrap Up (5 min)

Journal

Prompt: Have students reflect on their development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one of the following prompts as you deem appropriate.

  • Choose one of the five practices in which you believe you demonstrated growth in this lesson. Write something you did that exemplified this practice.

  • Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?

  • Choose one practice you thought was especially important for the activity we completed today. What made it so important?

  • New Shapes
  • 2
  • (click tabs to see student view)
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

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?
  • More Parameters
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Random Numbers

randomNumber() chooses a random number between a minimum and maximum value. You can use this code instead of writing in the specific number. If you make your drawings with random numbers it will look a little bit different every time you run your program.

Do This

  • Run the program several times to see how it works.
  • Change the numbers inside randomNumber and run the code again a few times to see what changes.
  • Using Random Numbers
  • 10
  • 11
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Random Numbers

Here's the same sun from last time. Right now only the x-coordinate is random, but you can make the y-coordinate random, too.

Do This

  • Use randomNumber() for the ellipse's Y parameter so the circle is drawn in a random Y position, too.
  • As long as your circle is appearing at random X and Y positions, you can move on.
View on Code Studio

Assessment Opportunities

Key Concepts:

Generate and use random numbers in a program, use arguments to change the way a method or command runs.

Assessment Criteria:
Extensive Evidence

All circles have reasonable horizontal positions, different colors, and appear at random vertical positions, and some circles have a random size.

Convincing Evidence

All circles have reasonable horizontal positions, different colors, and appear at random vertical positions

Limited Evidence

At least one student-created circle has a new color, appears at a random vertical position, and has a different horizontal position than any others.

No Evidence

No student produced circles, or any new circles share a color or horizontal position with circles produced by the original code.

Student Instructions

Rainbow Snake

This program draws a very rare breed of rainbow snake. To make the snake draw differently every time you'll need to use random numbers.

Do This

  • Run the program several times to see how the starter code works.
  • Add at least three new different colored circles to your rainbow snake.
  • Use randomNumber() to make the rest of the snake's body move up and down like the first three.

Challenge: Can you make size of some of the circles random, too?

  • Levels
  • Extra
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Free Play

Use what you've learned to create whatever you like. When you're finished, you can click to send your creation to a friend, or to send it to your Projects Gallery.

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.