Lesson 2: Plotting Shapes

We saw a lot of different programs yesterday, and you started to think about what types you might want to create. When we create a program, one of the things we need to do is draw everything on the screen. We're going to try that with a "student" computer today.

[pull-right]

[/pull-right]

Ask one or two volunteers to come to the front of the room and act as "computers" for the activity. They should sit with their backs to the board so that they cannot see what is being projected. Give each volunteer a blank sheet of paper.

Display: Project Sample Share Drawing - Exemplar where it can be seen by the class.

You will need to explain to our "computer" how to draw the picture. In the end, we'll compare the drawing to the actual picture.

Give the students a minute or two to describe the drawing as the students at the front of the room try to draw it. After one minute, stop them and allow the students to compare both pictures.

Prompt: What are the different "challenges" or problems we're going to need to solve in order to successfully communicate these kinds of drawings?

Discuss: Students should silently write their answers in their journals. Afterwards they should discuss with a partner and then with the entire class.

Discussion Goal: This discussion is intended to bring up some challenges that students will need to address in the next few lessons, such as how to specify the position, order, and color. The students don't necessarily need to decide how they would specify such things but recognize that they will need a method for doing so. Students who have just come out of the HTML unit may make connections to how HTML helped solve similar problems.

There were several challenges we needed to solve in this activity. We need to be able to clearly communicate position, color, and order of the shapes. We're going to start exploring how to solve this problem.

Question of the Day: How can we clearly communicate how to draw something on a screen?

Group: Place students in pairs.

Transition: Have one member of each group open a laptop and go to the contents for this lesson. There is a single level with a Game Lab tool.

Prompt: Working with your partner, take two or three minutes to figure out how this tool works. Afterwards be ready to share as a class.

Discussion Goal: Rather than doing a live demo of the tool, use this discovery-based strategy to let students explore the tool themselves. Afterward, use the debrief to ensure all students are aware of the key features of the tool. The most important components are the grid and the fact that the mouse coordinates are displayed below the drawing space.

Discuss: After pairs have had a chance to work with the tool, run a quick share-out where students discuss features they notice.

Location of the Origin: The origin of this grid, as well as the origin in Game Lab, lies at the top left corner. This reflects the fact that documents tend to start at the top left, and ensures that every point on the plane has positive coordinates.

Drawing Shapes

Distribute activity guides to each pair, ensuring that one student (Student A) receives Version A and the other student (Student B) receives Version B. Students should not look at each other's papers.

Set Up: In this activity, students will try to recreate images based on a partner's directions. The student who is drawing will use the shape drawing tool on Game Lab to draw the shapes. Students should keep their drawings hidden from one another throughout the activity. While completing a drawing the instruction-giver should also not be able to see the computer screen.

Drawing 1: Each member of the pair should complete their first drawing, taking turns giving instructions and using the tool. These drawings do not feature any overlapping shapes, but students may need to grapple with the fact that circles are drawn from the middle and squares from the top left corner. Additionally, students may just struggle with the direction of the Y-axis.

Discuss: Give pairs a couple of minutes to discuss any common issues they're noticing in trying to complete their drawings.

Drawing 2: Each member of the pair should describe their second drawing to their partner. These drawings feature overlapping shapes and so students will need to consider the order in which shapes are being placed as well as when they should change the color of the pen.

Draw Your Own: If time allows, give students a chance to create their own drawing to communicate to their partner.

When to Move On: Determine whether this last activity is worth the time in your schedule. Giving students a chance to create and communicate their own drawing can help reinforce their knowledge, but if students are obviously achieving the learning objectives of the lesson without it then you can also just move to the wrap up to synthesize their learning.

When we make images, we need a way to communicate exactly where each shape goes. The coordinate plane helps us to do that. Our coordinate plane has two coordinates, x and y. The x-coordinate tells us how far our shape is from the left of the grid. The y-coordinate tells us how far our shape is from the top of the grid. The black dots on the shapes help you be very specific about how the shape is placed on the grid.

Question of the Day: How can we clearly communicate how to draw something on a screen?

Prompt: Have students reflect on each of the following prompts:

Students should be able to explain the coordinate system of Game Lab. Make sure the students understand that it was important to note not only where the shape was positioned on the coordinate system, but the exact point of the shape (corner or center) that falls on that point on the grid.

Students should also explain that the code needs to set a color and specify the shape to be drawn, and that the order of the code determines which shape is on top.

The second prompt may be used to reinforce that the grid system students saw today is different from the one they may have seen in a math class. They should see, however, that both solve the same problem. Finally, this discussion can lead into a teacher explanation of why the grid in Game Lab is "flipped" from ones they may have seen previously.

• What things were important in communicating about position, color, and order of the shapes in this activity?
• What's a way you have seen similar problems solved in the past?

Discuss: Have pairs share their answers with one another. Then open up the discussion to the whole class.

At the beginning of class we saw that communicating how to draw even simple shapes can be pretty challenging. The grid we learned about today is one solution to this problem but there are many others that could've worked. In fact, a lot of you probably noticed that the grid in Game Lab is "flipped". Computer screens come in all different shapes and sizes, as does the content we show on them. We need to agree on one point where all the content can grow from. Since we read starting at the top left corner, the grid on a computer screen starts at the top left corner as well. There's also the benefit of not having to use any negative numbers to talk about locations on the screen. Don't worry if this flipped grid is a little tricky still. We'll have plenty more time to work on it in coming lessons.