Lesson 11: The Draw Loop

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please click here to access modifications that can be used during this lesson.

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.

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: Watch the video introducing the draw loop.

Pair Programming: This lesson introduces a challenging new paradigm. Consider having students pair program. Remember to give students clear instructions on when to switch driver and navigator.

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

Question to Consider with Video:

• What does the draw function do?

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 a 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 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.

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.

You can use this level as a formative assessment for students. Click inside the level to view a rubric and leave feedback to your students

You can use this level as a formative assessment for students. Click inside the level to view a rubric and leave feedback to your 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.