Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

Overview
This is the third and final unit in the trimester long Computer Science Introduction class. It is intended to be taught during the last 5-6 weeks
of the trimester. Students build on coding experience as they program animations, interactive art, and games in Game Lab. The unit starts
off with simple shapes and builds up to more sophisticated sprite-based games, using the same programming concepts and the design
process computer scientists use daily. In the final project, students develop a personalized, interactive program. Each lesson is intended to
be completed in one 50-minute class session. Unit 1 Chapter 1 should be completed before starting this unit.

Demographics
This timeseter long introductory course is open to all students in grade 7 and grade 8. Class size is limited to 28 students. (This limit may
change in accordance with COVID-19 protocols as determined by the Derry Cooperative School Board.)

Diverse Learners and Differentiation

Strategies for meeting the needs of all learners include allowing students to choose the content of their projects. Rubrics are defined, but
you may choose to add or alter requirements for a class or individual students. These requirements could include extra challenges for those
who should go further, or they could provide scaffolding for students who need more guidance. Project plans should be reviewed to ensure
that students are choosing a level of difficulty that is appropriate for them. Lastly, challenge levels provide students who have already
mastered the lesson content with new challenges and extension code, giving them more options to express themselves creatively in the
programming environment. As those students take on these more difficult activities, teachers can provide targeted support to students who
are still working toward mastery of the lesson objectives. For some tasks, you may find students need differing amounts of time to complete
tasks. This could be because a student needs additional time and support to master a concept, or because a student has given themselves a
challenge and would like to see their idea through to completion. In either case, being flexible with deadlines and helping students set
individual goals for their work can help meet the unique needs of each student.

Career Connection
Students will be able to identify how computer science is used in a field of entertainment. They build on their coding experience as they
program animations, interactive art, and games in Game Lab. Students begin to understand and appreciate their strengths and interests by
experiencing the drawing tool in Game Lab. Discussion focuses on careers available in the gaming industry such as game designer, animator,
audio engineer, writer, and video game tester, etc.

Page 1 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

Cross-Curricular Ties
Invite the art teacher to come talk to students about elements of visual art and principles of design as well as careers that combine
computer science and visual art.

Community Involvement
Once students have completed this unit, consider hosting a Family Coding Night so that students can share what they have learned with
parents and siblings. This could be as simple as a Gallery Walk where students share their work with each other or it could be as complex as
students coding with family members.

Assessment
Student work will be assessed at various levels on Code Studio according to the criteria detailed in these rubrics.

Standards Day 1 Programming for Entertainment

CSTA K-12 Computer Science Standards (2017): Content Objective: Students will be able to identify how computer
IC - Impacts of Computing science is used in a field of entertainment.
2-IC-21 - Discuss issues of bias and accessibility in the design of Supplementary Materials: Activity Guide, Exemplar
existing technologies. Question of the Day: How is computer science used in
AP - Algorithms & Programming entertainment?
2-AP-10 - Use flowcharts and/or pseudocode to address complex Practice/Application: During this activity student groups will do
problems as algorithms. some light research into the role that CS and programming play in
2-AP-11 - Create clearly named variables that represent different various fields of entertainment. The primary goal of this activity is to
data types and perform operations on their values. broaden students' perspectives about how programming can be
2-AP-12 - Design and iteratively develop programs that combine used to make fun or entertaining things. Some of the fields that
control structures, including nested loops and compound students could research (such as art, animation, and games) can be
conditionals. directly connected to programs they will write later in this unit,
2-AP-13 - Decompose problems and subproblems into parts to while others may serve more as an inspiration for how the skills that
facilitate the design, implementation, and review of programs. they learn here may be applied in different domains.
2-AP-16 - Incorporate existing code, media, and libraries into Review and Assessment: In the activity guide, look at the
original programs, and give attribution. "Interesting Fact or Use" section of the second page and make sure
2-AP-17 - Systematically test and refine programs using a range of students have identified a use of computer science in their chosen
test cases. fields.

Page 2 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

2-AP-19 - Document programs in order to make them easier to Wrap Up: Based on what you saw today, both in your research and
follow, test, and debug. the example apps, share what kinds of programs are you most
interested in learning to create.
NH Visual Arts Standards:
Curriculum Standard 1
Apply appropriate media, techniques, and processes.
Curriculum Standard 2
Identify and apply the elements of visual art and principles of
design.
Curriculum Standard 3
Select and apply a range of subject matter, symbols and ideas.
Curriculum Standard 7
Understand the range of careers in the field of visual arts and
identify careers associated with this field.

Common Core Standards

W.6 Use technology, including the Internet, to produce and publish
writing and link to and cite sources as well as to interact and
collaborate with others, including linking to and citing sources.

Day 2 Plotting Shapes Day 3 Drawing in the Game Lab

Content Objective: Students will be able to reason about locations Content Objective: Students will be able to use a coordinate
on the Game Lab coordinate grid and communicate how to draw an system to place elements on the screen and sequence code
image in Game Lab, accounting for shape position, color, and order. correctly to overlay shapes.
Supplementary Materials: Activity Guide (A), Activity Guide (B), Supplementary Materials: Drawing in Game Lab, Game Lab:
Exemplar (A) Adding Colors , Drawing Shapes
Question of the Day: How can we clearly communicate how to Vocabulary: Bug - Part of a program that does not work correctly.
draw something on a screen? Debugging - Finding and fixing problems in an algorithm or
Practice/Application: The primary purpose of this lesson is to program.
introduce students to the coordinate system they will use in Game Program - An algorithm that has been coded into something that
Lab. Students may have limited experience with using a coordinate can be run by a machine.
grid or may struggle with the "flipped" y-axis in Game Lab. The Introduced Code: rect(x, y, w, h), ellipse(x, y, w, h), fill(color)

Page 3 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

drawing tool also forces students to think about other features of Supplementary Materials:
Game Lab students will see when they begin programming in the Question of the Day: How can we communicate to a computer
next lesson. These include the need to consider order while how to draw shapes on the screen?
drawing, the need to specify color, and the fact that circles are Practice/Application: The main purpose of this lesson is to give
positioned by their center and squares by their top-left corner. By students a chance to get used to the programming environment, as
the end of this activity, students should be ready to transfer what well as the basic sequencing and debugging that they will use
they have learned about communicating position to the throughout the unit. Students begin with an introduction to the
programming they will do in the next lesson. GameLab interactive development environment (IDE), then learn
Review and Assessment: See the final reflection questions. This the three commands (rect, ellipse, and fill) that they will need to
objective will also be assessed in the next lesson, within the context code the same types of images that they created on paper in the
of programming in Game Lab. previous lesson. Challenge levels provide a chance for students who
Wrap Up: Students share responses to the following questions: have more programming experience to further explore Game Lab.
What things were important in communicating about position, Review and Assessment: See level 9 in Code Studio, in particular
color, and order of the shapes in this activity? What's a way you the placement of the square in the picture. See level 9 in Code
have seen similar problems solved in the past? Studio, in particular that the square is displayed in front of the
circles.
Wrap Up: Students share their responses with the class: 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?

Day 4 Shapes and Parameters Day 5 Variables

Content Objective: Students will be able to use and reason about Content Objective: Students will be able to:
drawing commands with multiple parameters. Identify a variable as a way to label and reference a value in a
Vocabulary: Parameter - An extra piece of information passed to a program and use variables in a program to store a piece of
function to customize it for a specific need. information that is used multiple times
Introduced Code: background(color) Vocabulary: Variable - A label for a piece of information used in a
Supplementary Materials: Shapes and Parameters program.
Question of the Day: How can we use parameters to give the Introduced Code: var x;, var x = __;
computer more specific instructions? Supplementary Materials: Naming Variables, Variables,
Practice/Application: This lesson gives students a chance to Introduction to Variables (video)
slightly expand their drawing skills while continuing to develop Question of the Day: How can we use variables to store
general purpose programming skills. They will need to reason about information in our programs?

Page 4 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

the x-y coordinate plane, consider the order of their code, and Practice/Application: This lesson is the first time students will see
slightly increase their programs' complexity. This lesson should be variables in the course, and they are not expected to fully
focused primarily on skill-building. understand how variables work by its conclusion. Students should
Review and Assessment: See level 7 in Code Studio. leave this lesson knowing that variables are a way to label a value in
Wrap Up: You use parameters to control your shape's location and their programs so that they can be reused or referenced later. In
size. Students share other situations in which parameters might be the following lesson students will be introduced to random
useful. numbers, in which they will see a more powerful use for variables.
Using variables to manipulate drawings is a surprisingly challenging
skill that requires a great deal of forethought and planning. While
students will use or modify many programs in this lesson, they are
not expected to compose programs that use variables to modify the
features of a drawing. In later lessons, students will expand their
understanding of variables and more advanced ways they can be
used.
Review and Assessment: See the reflection prompt in the Wrap
Up. See Level 7 in Code Studio.
Wrap Up: Students consider the following prompts: What is your
own definition of a variable? Why are variables useful in programs?
Have students silently write their ideas before sharing in pairs and
then as a whole group.

Day 6 Random Numbers Day 7 Sprites

Content Objective: Students will be able to generate and use Content Objective: Students will be able to create and use a sprite
random numbers in a program and update a value stored in a Vocabulary: Property - A label for a characteristic of a sprite, such
variable. as its location and appearance
Introduced Code: randomNumber Sprite - A character on the screen with properties that describe its
Supplementary Materials: Random Numbers location, movement, and look.
Question of the Day: How can we make our programs behave Dot notation - the way that sprites' properties are used in Game
differently each time they are run? Lab, by connecting the sprite and property with a dot.
Practice/Application: This lesson introduces randomness, which is Introduced Code: drawSprites, var sprite = createSprite(x, y)
important both as a way to make programs more interesting, but Supplementary Materials: Animation Tab, Sprites, Introduction to
also to motivate the use of variables. In the middle of the activity, Sprites (video), The Animation Tab (video)
students are exposed to a variable that is updated multiple times in Question of the Day: How can we use sprites to help us keep track

Page 5 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

the program, expanding their understanding of how variables can of lots of information in our programs?
be used. Practice/Application: Keeping track of many shapes and the
Review and Assessment: See level 6 in Code Studio. See level 4 in different variables that control aspects of those shapes can get very
Code Studio. Check that students have updated the value of complex. There will be lots of variables with different variable
"petalSize" between drawing the two flowers. names. Instead, computer scientists created something called an
Wrap Up: Allow students to share what sorts of random things they object which allows for one variable name to control both the shape
might like in their programs. and all its aspects. In Game Lab we use a certain type of object
called a sprite. A sprite is just a rectangle with properties for
controlling its look. Properties are the variables that are attached to
a sprite. You can access them through dot notation.
Using the Animation Tab, students can create or import images to
be used with their sprites. Later on, these sprites will become a
useful tool for creating animations, as their properties can be
changed and updated throughout the course of a program.
Review and Assessment: See levels 10 and 11 on Code Studio.
Wrap Up: So far we've been able to change a sprite's location and
image. What else might you want to change about your sprites?
Allow students to share their ideas.

Day 8 Sprite Properties Day 9 Text

Content Objective: Students will be able to use dot notation to Content Objective: Students will be able to place text on the screen
update a sprite's properties using a coordinate plane and use arguments to control how text is
Vocabulary: Property - A label for a characteristic of a sprite, such displayed on a screen.
as its location and appearance. Question of the Day: How can we use text to improve our scenes
Introduced Code: y, scale, x, rotation and animations?
Supplementary Materials: Sprite Properties Practice/Application: This lesson introduces text, which students
Question of the Day: How can we use sprite properties to change will need as they begin to build more complex programs (e.g. games
their appearance on the screen? with scoreboards). This is the last type of element that students will
Practice/Application: In the last lesson, when students were be placing on the screen. After this, students will focus on how they
introduced to sprites, they focused mainly on creating a sprite and can control the movement and interactions of these elements.
assigning it an animation. This lesson starts to dig into what makes Review and Assessment: Use Level 5 as an assessment for
sprites such a powerful programming construct--that they have students. Click inside the level to view a rubric.
properties that can be modified as a program is running. This lays Wrap Up: You've drawn with both text and shapes on the screen.

Page 6 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

the foundation for much of what students will be doing in the rest What are two ways drawing with text is similar to drawing shapes?
of the unit in terms of accessing and manipulating sprite properties What is one way that drawing with text is different from drawing
to create interesting behaviors in their programs. with shapes? Allow students to share their answers.
Review and Assessment: See Code Studio level 5.
Wrap Up: What is one way sprite properties are the same as
variables? What's one way that sprite properties are different from
variables? Allow students to discuss in pairs or small groups before
sharing out to the entire group.

Day 10 Mini-Project: Captioned Scenes (Day 1 of 2) Day 11 Mini-Project: Captioned Scenes (Day 2 of 2)
Content Objective: Students will be able to use a structured Content Objective: Students will be able to use a structured
process to plan and develop a program. process to plan and develop a program.
Supplementary Materials: Planning Guide, Rubric, Exemplar Question of the Day: How can we use Game Lab to express our
Question of the Day: How can we use Game Lab to express our creativity?
creativity? Practice/Application: When the work is complete, hold a “Gallery
Practice/Application: This lesson is a chance for students to get Walk”. Allow students to walk around the room and see the pictures
more creative with what they have learned. Some students may that each of their classmates has coded. Celebrate all of the
spend more time in the animation tab drawing than programming. different ideas that students were able to implement with the same
Encourage students to spend time on parts of the activity that basic code.
interest them, as long as they meet the requirements of the Review and Assessment: Use the project rubric attached to this
assignment. lesson to assess student mastery of learning goals.
The open-ended nature of this lesson also provides flexibility for the Wrap Up: What was one especially creative way you saw someone
teacher to decide how long students should spend on their work, else use the blocks today? Have students share what they
depending on the scheduling demands of the particular course appreciated about their classmates' projects. Do this "popcorn"
implementation. style, with each student who responds choosing the next person.
Discuss with students the ethics of game design. Are they creating
their scene for fun or for creative expression? Should works of art
be held to higher standards than something that is just for fun?
What responsibility do they have to balance their rights to free
expression with the tastes of consumers and yet be concerned
about the effects their content has on their audience? Do you think
game design should be protected as free speech under the First
Amendment?

Page 7 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

Day 12 The Draw Loop Day 13 Sprite Movement

Content Objective: Students will be able to: Content Objective: Students will be able to:
Explain how the draw loop allows for the creation of animations in Use the counter pattern to increment or decrement sprite
Game Lab and use the draw loop in combination with the properties and identify which sprite properties need to be changed,
randomNumber() command, shapes, and sprites to make simple and in what way, to achieve a specific movement.
animations. Supplementary Materials: The Counter Pattern, Game Lab:
Introduced Code: World.frameRate, function draw() {} Animating with Sprites (video)
Supplementary Materials: Random Dot Flipbook, Random Sprite Question of the Day: How can we control sprite movement in
Flipbook, Flipbook Example (video), The Draw Loop, The Draw Loop Game Lab?
(video) Practice/Application: This lesson builds on the draw loop that
Question of the Day: How can we animate our images in Game students learned previously to create programs with purposeful
Lab? motion. By either incrementing or decrementing sprite properties,
Practice/Application: The draw loop is a core component of Game such as sprite.x, students can write programs that move sprites in
Lab. The fact that the Game Lab environment repeatedly calls this expected patterns, instead of the randomization that they used in
function many times a second (by default 30) is what allows the tool the past. The animations that students learn to create in this lesson
to create animations. This lesson has two goals. The first is for lay the foundation for all of the animations and games that they will
students to see how animation in general depends on showing make throughout the rest of the unit.
many slightly different images in a sequence. The second goal is for Review and Assessment: See Level 8 in Code Studio.
students to understand how the draw loop allows them to create Wrap Up: You've seen two ways to create animations with the draw
this behavior in Game Lab. Students should leave the lesson loop: random numbers and the counter pattern. What is one type of
understanding that the commands in the draw loop are called after movement that you'd want to use random numbers for? What is
all other code but are then called repeatedly to create animation. one type of movement that you would want to use the counter
Students will have a chance to continue to develop an pattern for? Are there any movements that might combine the
understanding of this behavior in the next two lessons, but laying a counter pattern and random numbers? Allow students to discuss
strong conceptual foundation in this lesson will serve them well for with a partner before sharing with the entire class.
the rest of the unit.
Review and Assessment: 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

Page 8 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

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.
Wrap Up: How does the draw loop help us make animations?

Day 14 Mini-Project: Animation (Day 1 of 2) Day 15 Mini-Project: Animation (Day 2 of 2)

Content Objective: Students are asked to combine different Content Objective: Students are asked to combine different
methods that they have learned to create an animated scene. methods that they have learned to create an animated scene.
Students first review the types of movement and animation that Students first review the types of movement and animation that
they have learned, and brainstorm what types of scenes might need they have learned, and brainstorm what types of scenes might need
that movement. They then begin to plan out their own animated that movement. They then begin to plan out their own animated
scenes, which they create in Game Lab. scenes, which they create in Game Lab.
Supplementary Materials: Planning Guide, Rubric, Exemplar Question of the Day: How can we combine different programming
Question of the Day: How can we combine different programming patterns to make a complete animation?
patterns to make a complete animation? Practice/Application: Students will continue to work on their
Cross-Curricular Practice/Application: This is a chance for animation project. Hold a “gallery walk” when the work is complete.
students to get more creative with what they have learned. Some Review and Assessment: Use the project rubric attached to this
students may spend more time in the animation tab drawing than lesson to assess student mastery of learning goals.
programming. Encourage students to spend time on parts of the Wrap Up: What was one interesting way that you saw sprite
activity that interest them, as long as they meet the requirements of movement used today? Have students share what they appreciated
the assignment. about their classmates' projects. You may want to do this "popcorn"
style, with each student who responds choosing the next person to
share.

Page 9 of 10
Course: Computer Science Introduction Unit: Drawing and Animation Grade Level: 7 or 8

Resources
Code.org. (2021). Code.org. Computer Science Discoveries Unit 3 Interactive Animations and Games ('21-'22).
https://studio.code.org/s/csd3-2021.
Computer Science Teachers Association (2020). Standards for Students. Retrieved from https://www.csteachers.org/page/standards.
New Hampshire PBS. (n.d.). NH standards: The Arts: Knowledge Network. New Hampshire PBS. https://nhpbs.org/kn/vs/visualartfw.asp#2.
Common Core State Standards Initiative. (2021). English language Arts standards " writing " Grade 6-8. English Language Arts Standards "
Writing " Grade 6-8 | Common Core State Standards Initiative.
http://www.corestandards.org/ELA-Literacy/WHST/6-8/#CCSS.ELA-Literacy.WHST.6-8.6.
Takahashi, D. (2004, December 27). Ethics of game design. Gamasutra.
https://www.gamasutra.com/view/feature/130594/ethics_of_game_design.php?print=1.

Page 10 of 10