Ch. 1
Ch. 2

# Lesson 3: Drawing in Game Lab

## Overview

Students are introduced to Game Lab, the programming environment for this unit, and begin to use it to position shapes on the screen. They learn the basics of sequencing and debugging, as well as a few simple commands. At the end of the lesson, students will be able to program images like the ones they made with the drawing tool in the previous lesson.

## Purpose

The main purpose of this lesson is to give students a chance to get used to the programming environment, as well as the basic sequencing and debugging that they will use throughout the unit. Students begin with an introduction to the GameLab interactive development environment (IDE), then learn the three commands (`rect`, `ellipse`, and `fill`) that they will need to code the same types of images that they created on paper in the previous lesson. Challenge levels provide a chance for students who have more programming experience to further explore Game Lab.

## Objectives

### Students will be able to:

• Use the Game Lab IDE to plot different colored shapes on the screen.
• Sequence code correctly to overlay shapes.
• Debug code written by others.

## Preparation

• Read the Forum
• Prepare projector or other means of showing videos if you wish to watch as a class

## Vocabulary

• Bug - Part of a program that does not work correctly.
• Debugging - Finding and fixing problems in an algorithm or program.
• Program - An algorithm that has been coded into something that can be run by a machine.

## Introduced Code

• ``` fill(color) ```
• ``` ellipse(x, y, w, h) ```
• ``` rect(x, y, w, h) ```

# Teaching Guide

## Warm Up (5 minutes)

### Programming Images

Discussion Goal

Goal From Unit 2, students may remember that a computer can only understand what to do if you use a particular language in order to communicate with it. For Web Development, that language was HTML. Computers can't "figure out" what you mean in the same way that a human can, and they are usually much more specific in how they follow instructions.

Remarks

In the last lesson we created images on the computer by organizing squares and circles on a grid. For each image you wanted to create, you had to lay those images out manually, and if you wanted to recreate an image it was a lot of work. Today, we're going to program the computer to draw those images for us. Based on what you know about computers, what do you think will be different between telling a person about your image and telling a computer about your image?

Allow students time to think individually and discuss with a partner, then bring the class together and write their ideas on the board.

Remarks

In order to give instructions to a computer, we need to use a language that a computer understands. In the last unit, we used HTML, which is great for making web pages. To make our animations and games, we will use a version of Javascript that uses blocks. The environment that we'll be programming in is called Game Lab.

## Activity (30 minutes)

Teaching Tip

Pair programming is a great way to increase student confidence and foster the practices of collaboration and communication. You can read more about how to use Code Studio's pair programming feature here.

Teaching Tip

Students that are new to programming often have some common misconceptions they run into. In order to prevent those keep reminding students about the following things

• One command per line
• Commands run in order from top to bottom
• Order of inputs into shape commands matter
• Each input into shape commands are separated by commas
• (0,0) is in the upper left corner of the display
• All x and y values on the display are positive

### Simple Drawing in Game Lab

Group: Place students in pairs to program together.

Transition: Send students to Code Studio.

Support: As students work on the levels you can help them but encourage them to try to spend some time figuring things out themselves first. If you need help supporting students, see the exemplars in the teacher answer viewer. When students hit the challenge levels, they can choose to pursue one or more of the challenges, return to improve upon previous levels, or help a classmate.

## Wrap Up (10 minutes)

### Share Drawings

Goal: Students get to see the variety of different things you can create with just simple shape drawings.

Share: Once students have completed their drawings have them share their drawings with the class. One way to do this is with a gallery walk.

### Exit Ticket

Goal : Students share tricks they learned as they went through levels.

Prompt: Today you learned how to draw in Game Lab for the first time. What type of advice would you share with a friend who was going to learn about drawing in Game Lab to make it easier for them? Write it down on a piece of paper.

Collect: Collect answers from students and pick out a few that might be helpful for all students to hear. Share those at the beginning of the next class.

View on Code Studio

# Tour of Game Lab

Depending on the age and comfort level of your students, you may choose to use this level to tour the environment as a whole class. Make sure that students can find the level instructions, coding area, display area, and block drawers. This is also a good opportunity to point out some of the useful resources like documentation and the blocks to text button.

View on Code Studio

# Explore Game Lab

Welcome to Game Lab, where you can create interactive animations and games!

You've already practiced the basics of putting shapes on a grid. In Game Lab, you'll do the same with the display area on the left.

# Do This

• Look at the line of code in the workspace below these instructions ( Show me where ) and discuss with your partner where you think the shape will be drawn on the grid.
• Click to run the program and see what happens. ( Show me where )
• Change the numbers inside the block, then try running the program again.
• Try to place the rectangle near the bottom right of the screen.
View on Code Studio

# Place Squares in Corners

A big part of using Game Lab is understanding position. Remember you can always turn on the grid or hover with the mouse to help find the x and y position you want.

# Do This

• Place two rectangles exactly in the corners of the screen, just like the picture.
View on Code Studio

# fill(color)

You can also make your rectangles different colors with `fill`. It will set the color for every shape that comes after it in the code.

# Do This

• Look at the code that sets the color. ( Show me where )
• Change the color from blue to yellow.
• Add a new square by dragging a `rect` block into the code area below the fill command ( Show me where ). The new square can go any location on the screen you like.
View on Code Studio

# Order Matters

In Game Lab, it matters what order your code is in. New shapes are drawn on top of the ones that came before, covering up the shapes that are drawn first. You can see the difference when you use more than one color in your code.

# Do This

• Look at the code that draws the two rectangles. The first is drawn red, and the second is drawn blue.
• Change the red rectangle's color to green.
• Change the order of the code so the green rectangle appears on top.
View on Code Studio

# ellipse

You can use `ellipse` to make a circle.

# Do This

• Look at the code that makes the ellipse.
• Add a new ellipse of a different color.
View on Code Studio

Teaching Tip

This is a good puzzle to use as an assessment of whether or not students understand the basics of sequencing and positioning shapes in Game Lab.

# Debugging

Often, code doesn't work the first time it runs, and programmers have to debug it. The code below is supposed to make the picture on the right, but the programmer got confused about which order the code should be in, as well as how to put a square in the right place on the screen.

# Do This

• Look at the code in the workspace.
• Change the code so it makes the picture on the right.
• (You'll need to move one line of code AND change the coordinates of the square.)
View on Code Studio

# Simplified Shapes

The `rect` and `ellipse` commands that students were introduced to in this lessons are simplified versions of the full commands that they will see later. This allows the class to focus solely on the placement of shapes on the coordinate plane before also worrying about the width and height of those shapes.

View on Code Studio

# Challenge: Draw an Image

Check with your teacher before starting any of the challenges.

In the previous lesson you and your partner created several interesting images. See if you can recreate one of them using code.

View on Code Studio

# Challenge: Face

Check with your teacher before starting any of the challenges.

Write a program that uses `rect`, `ellipse`, and `fill` to create the face on the right. The colors used are "lightblue", "red", and "lightgreen". Once you've finished, add your own personal touches to the image.

View on Code Studio

# Challenge: Shape of Shapes

Check with your teacher before starting any of the challenges.

Using only the `rect` and `ellipse` commands, can you draw a new shape, such as this triangle made out of circles?

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

# 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

#### 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-19 - Document programs in order to make them easier to follow, test, and debug.