Lesson 12: The Draw Loop

Display: Show Flipbook Example - by Marnic Bos - Video.

Prompt: This video shows a flipbook to make animation. In your own words, how is it working? Why does it "trick our eyes" into thinking something is moving?

Discuss: Have students write their ideas independently, then share with partners, then share as a whole group.

Discussion Goal: This discussion should introduce some key understandings about animation. Students should understand that the key is seeing many pictures in a row that are slightly different. Introduce the vocabulary word "frame" as being one of those many pictures--a single image within an animation. Then transition to the fact that soon students will be creating animations of their own.

We're going to start learning how to make animations, not just still images. In order to do this we need a way to make our programs draw many pictures a second. Our eyes will blur them together to make it look like smooth motion. To do this, though, we're going to need to learn an important new tool.

Question of the Day: How can we animate our images in Game Lab?

Video: Show students the Introduction to the Draw Loop video in the slides.

To encourage active engagement and reflection, use one or more of the strategies discussed in the Guide to Curriculum Videos.

Question to Consider with Video:

• What does the draw function do?

Discussion Goal: The draw function runs the same code over and over in a loop, which is why it's often called "the draw loop". This creates an animation effect by changing what is drawn by a small amount each time the draw function runs. This can be compared to a physical flip book, which can animate an image by changing it slightly on each page.

Misconception Alert!

When the draw loop runs, it does not "clear" out the previous drawing, so it will continue to show anything that has not been covered up by the new draw loop. If students do not add a "background" at the beginning of the draw loop, they will still see all the images drawn to the screen previously.

Demo: If you choose, use the provided manipulatives to provide a hands-on demo for exploring how the draw loop and animations are connected.

Do This: Send students to Code Studio.

The first prediction level program is the first time they will see the "draw loop" in action.

Discuss: Students should consider and discuss:

• What will be drawn on the screen do and why?

Discussion Goal: Predictions will vary but after viewing the Draw Loop video, students should be able to predict that the program will draw an ellipse over and over and over to the screen. Students may also predict and should notice once they run the program that the ellipse is drawn in random locations on the screen. One last thing to point out is the fact that the code to give the ellipse a color is outside the draw loop and runs before the program enters the draw loop.

Guide to Programming Levels: Additional guidance for programming levels is provided in the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.

The second prediction level program has one small difference that will make it run a little differently.

Discuss: Students should consider and discuss:

• What will this program do?

Discussion Goal: Notice that the blue background is never visible because it is immediately drawn over by the red background. Also, there's only ever one yellow dot visible since as the draw loop runs over and over it is placing down new backgrounds.

Inside versus outside the draw loop

This is a good time to make sure students understand that code outside the draw loop is used to set up the program. It is for how you want your program to start. Code inside the draw loop is for things that are changing as the program is running.

Formative Assessment: This level can be used as a formative assessment. A rubric is provided in the level, and written feedback can be given to students. Click here to learn more about giving feedback to students.

Question of the Day: How can we animate our images in Game Lab?

Prompt: How does the draw loop help us make animations?

Key Understandings: There are many common misconceptions with the draw loop. Make sure students understand the following:

• The draw loop is run after all other code in your program. It does not actually matter where it is located in your program.
• The draw loop is run by Game Lab at a constant frame rate of 30 frames per second. You do not actually need to call the function yourself.
• The "frames" in Game Lab can be thought of as transparency sheets. Unless you draw a background, then all your new shapes or sprites will simply appear on top of your old ones.
• You should only have one draw loop in your program.

Review: Return to the resources students saw at the beginning of the lesson (Video, physical flip books) or under Help and Tips during the lesson. Address misconceptions that have arisen in the lesson.