Lesson 11: The Draw Loop

Overview

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

In this lesson students are introduced to the draw loop, one of the core programming paradigms in Game Lab. To begin the lesson students look at some physical flipbooks to see that having many frames with different images creates the impression of motion. Students then watch a video explaining how the draw loop in Game Lab helps to create this same impression in their programs. Students combine the draw loop with random numbers to manipulate some simple animations with dots and then with sprites.

Purpose

The draw loop is a core component of Game Lab. The fact that the Game Lab environment repeatedly calls this function many times a second (by default 30) is what allows the tool to create animations. This lesson has two goals. The first is for students to see how animation in general depends on showing many slightly different images in a sequence. The second goal is for students to understand how the draw loop allows them to create this behavior in Game Lab. Students should leave the lesson understanding that the commands in the draw loop are called after all other code but are then called repeatedly to create animation. Students will have a chance to continue to develop an understanding of this behavior in the next two lessons, but laying a strong conceptual foundation in this lesson will serve them well for the rest of the unit.

Assessment Opportunities

  1. Explain how the draw loop allows for the creation of animations in Game Lab

    In the wrap up discussion, check that students mention that the code in the draw loop is run over and over, whereas code outside the draw loop is just run once, at the beginning of the program.

  2. Use the draw loop in combination with the randomNumber() command, shapes, and sprites to make simple animations

    See level 9 in Code Studio.

Agenda

Lesson Modifications

Warm Up (5 min)

Activity (60 min)

Wrap Up (10 min)

View on Code Studio

Objectives

Students will be able to:

  • Explain how the draw loop allows for the creation of animations in Game Lab
  • Use the draw loop in combination with the randomNumber() command, shapes, and sprites to make simple animations

Preparation

  • Print and assemble the manipulatives
  • Prepare the video

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Introduced Code

Support

Report a Bug

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.

Warm Up (5 min)

Display: Show Flipbook Example - by Marnic Bos - Video. (Video by Marnic Bos on Youtube)

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?

Discussion Goal

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.

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

Remarks

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?

Activity (60 min)

Teaching Tip

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.

Video: Watch the video introducing the draw loop.

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

Wrap Up (10 min)

Assessment Opportunity

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.

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

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

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.

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

  • Video: Introduction to the Draw Loop
  • 2
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

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

Student Instructions

Question to Consider

  • What does the draw function do?
  • Exploration
  • 3
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Draw Loop

Here's an example of the draw loop at work.

Do this

  • Run the code and see how it works.
  • Discuss with your partner whether this looks like the flip book you saw in the video. Why or why not?
  • Skill Building
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Using the Draw Loop

Now it's your turn to do some work with the draw loop. Remember that the code inside the draw loop is run by Game Lab over and over again.

Do This

  • Add code to this program so that your drawing has orange circles being drawn, too.
  • Move on when your program looks like the picture to the right.
  • Prediction
  • 5
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

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.

Student Instructions

Predict

This program has one small difference that will make it run a little differently. Again though, remember:

  • All your code outside the draw loop is run first, one time
  • All your code inside the draw loop is run over and over forever

What will this program do? Write your prediction below.

  • Skill Building
  • 6
  • 7
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Sprites in the Draw Loop

By changing sprite properties in the draw loop, you can animate your characters.

Do This

  • Run the code to see how it works.
  • Discuss with your partner why some code is inside the draw loop and some code is outside.
  • Try changing the numbers in the random number block and running the program again.
View on Code Studio

Student Instructions

Updating Properties

This animation already is updating one sprite's x property to make it look like it's shaking.

Do This

  • Run the program to see how it works.
  • Edit the code in this program to make the second sprite shake like the first one.
  • Move on when your program looks like the picture to the right.
View on Code Studio

Student Instructions

Try out using the draw loop with these activities.


Choose from the following activities:
a
Updating Rotation

Make both aliens dance in space using their rotation properties.

b
Debug: Blurry Sprite

Debug a blurry sprite animation.

c
Debug: Repeated Animation

Some animations have multiple frames, but this one isn't working correctly.

d
Debug: Sprite Not Moving

Debug why the sprite is not moving even though we update its position in the draw loop.

View on Code Studio

Student Instructions

Updating Properties

This level combines some of the skills you've already seen. It's drawing ellipses in the background and also updating sprite properties. This time it's changing the sprite's sprite.rotation property.

Do This

This animation already is updating one sprite's rotation property to make it look like it's shaking

  • Run the program to see how it works.
  • Add code to this program to make the other alien shake just like the first.
  • Move on when your program looks like the picture to the right.
View on Code Studio

Student Instructions

Debug: Blurry Sprite

What I expected it to do What it is doing instead
shake around blurry shaking

Do This

  • Run the program to see the bug.
  • Use the clues to try to find the bug.
  • Once you've found it, fix the program so it tuns like the image on the right.
View on Code Studio

Student Instructions

Debug: Repeated Animations

This "bubbly" sprite should have multiple frames of animation that repeat, but it seems to stop almost immediately.

What I expected it to do What it is doing instead
Sprite animates smoothly Sprite has after-image and stops animating

Do This

  • Run the program to see the bug.
  • Use the clues to try to find the bug.
View on Code Studio

Student Instructions

Debug: Sprite Not Moving

Debug why the sprite is not moving even though we update its position in the draw loop

What I expected it to do What it is doing instead
shake around not moving at all

Do This

  • Run the program to see the bug
  • Use the clues to try to find the bug

::: details [Hint if you get stuck] Where is drawSprites() placed in the code? :::

::: details [Another hint] Is the screen being cleared at the beginning of the draw loop? How do we normally clear the screen? :::

  • Assessment
  • 9
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Use loops to repeat behavior within a program.

Assessment Criteria:
Extensive Evidence

The sprite animates as described in the instructions. Other set up, such as creating the sprite, happen outside of the draw loop, and there are no extra blocks.

Convincing Evidence

The sprite animates, but there may be small problems with the scene, such the wrong sprite or text being in front. There may be other errors, such as creating sprites inside the draw loop or having extra calls to drawSprites or other extra code.

Limited Evidence

The sprite animates, but there are major problems, such as leaving a "trails" of previous locations behind or text or other parts of the scene disappearing.

No Evidence

The sprite does not animate.

Student Instructions

Updating Properties

This level is very similar to the last, but this time, you'll add in the draw loop yourself.

Do This

  • Add the draw loop block to the bottom of this program.
  • Move any blocks that need to be inside the draw loop.
  • Move on when your program looks like the picture to the right.
View on Code Studio

Student Instructions

Try out these draw loop challenges.


Choose from the following activities:
a
Challenge: Extend Your Scene

Use the draw loop to make your sprite from last lesson move.

b
Free Play

None

View on Code Studio

Assessment Opportunities

Key Concepts:

Use loops to repeat behavior within a program.

Assessment Criteria:
Extensive Evidence

The sprite animates as described in the instructions. Other set up, such as creating the sprite, happen outside of the draw loop, and there are no extra blocks.

Convincing Evidence

The sprite animates, but there may be small problems with the scene, such the wrong sprite or text being in front. There may be other errors, such as creating sprites inside the draw loop or having extra calls to drawSprites or other extra code.

Limited Evidence

The sprite animates, but there are major problems, such as leaving a "trails" of previous locations behind or text or other parts of the scene disappearing.

No Evidence

The sprite does not animate.

Student Instructions

Extend Your Scene

This is the sprite scene you made in the last lesson. You'll now be updating it a little bit to use the draw loop and sprite properties.

Do This

  • Add a draw loop to your program (you should only have one).
  • Use the lasso selector (click, hold and drag) to select the code that will be updated each time and place it inside your draw loop. Ctrl-Z will let you undo any mistakes you make.
  • Add code to your program that updates your sprites' sprite.x, sprite.y, or sprite.rotation properties so that they move. You'll need to update them with randomNumber().
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-11 - Create clearly named variables that represent different data types and perform operations on their values.
  • 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
  • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 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.