Creating Simple Animations

Active learning works for this topic because students grasp animation mechanics best when they manipulate variables in real time rather than reading about them. Hands-on programming lets them see how small changes in code directly alter visual outcomes, making abstract concepts like frame rates and loops tangible.

• JC 2
• Computing
• 4 activities
• 30 min–45 min

Learning Objectives

1. Design a sequence of code to animate a character performing a simple action, such as walking or jumping.
2. Analyze the impact of changing frame rates on the perceived smoothness and speed of an animation.
3. Evaluate different approaches to implementing object-boundary collisions in a 2D animation.
4. Create a program that simulates a bouncing ball, adjusting its trajectory based on screen boundaries.

⏱ 30 min·Pairs

Pair Programming: Bouncing Ball

Pairs initialize a ball's position and velocity variables. In a draw loop, update position by adding velocity, then reverse velocity if the ball hits screen edges. Test iterations to adjust bounce realism and speed.

Prepare & details

How do animations make programs more engaging?

Facilitation Tip: During Pair Programming: Bouncing Ball, have students swap roles every five minutes to keep both engaged with debugging and creative iterations.

⏱ 45 min·Small Groups

Small Groups: Walking Character

Groups use an array of sprite states for leg positions to simulate walking. Animate the character moving right by updating x-coordinate and cycling frames based on time. Add terrain collision for challenge.

Prepare & details

What are the basic steps to make an object move on screen?

Facilitation Tip: For Small Groups: Walking Character, assign each group a unique starting point to reduce copying and encourage individual problem-solving approaches.

⏱ 35 min·Individual

Individual: Path Follower Challenge

Each student codes an object to follow a curved path using sine or cosine functions for y-position. Vary speed with timers and add rotation. Share code snippets for class remix.

Prepare & details

Create a simple animation of a character walking or an object bouncing.

Facilitation Tip: In the Individual: Path Follower Challenge, provide starter code with comments that guide students to focus on one movement logic at a time.

⏱ 40 min·Whole Class

Whole Class: Animation Critique Circle

Students run their animations simultaneously. Class discusses engagement factors like timing and smoothness. Vote on most effective and suggest one code improvement per animation.

Prepare & details

How do animations make programs more engaging?

Facilitation Tip: During the Whole Class: Animation Critique Circle, give students sentence starters for feedback, such as 'I noticed your ball bounces every 3 seconds, which makes the motion feel...'

Teaching This Topic

Start with concrete examples by showing a simple animation and asking students to identify the loop and variable controlling speed. Avoid overwhelming them with too many new commands at once; teach one concept like collision detection before combining it with others. Research suggests students learn animation best when they can test their hypotheses immediately, so structured trial-and-error time is essential.

What to Expect

Successful learning looks like students confidently adjusting animation variables to achieve predictable motion, explaining their choices with clear reasoning about timing and boundaries. They should also critique peers’ work using specific code-based observations, not just visual impressions.

Watch Out for These Misconceptions

Common Misconception

During Pair Programming: Bouncing Ball, students may assume the animation needs a new image for every bounce.

What to Teach Instead

Have each pair modify only the position and direction variables in their loop, then time how long it takes to create a natural bounce. Ask them to reflect on how few manual changes were actually needed.

Common Misconception

During Small Groups: Walking Character, students might believe higher frame rates automatically make animations smoother.

What to Teach Instead

Ask groups to test three frame rates (10 FPS, 30 FPS, 60 FPS) and record how smoothness changes between each. Discuss why improvements level off after 30 FPS on most devices.

Common Misconception

During the Individual: Path Follower Challenge, students may expect objects to move exactly like real-world physics.

Assessment Ideas

Quick Check

After Pair Programming: Bouncing Ball, show students two short code snippets with different frame rates. Ask them to predict which will appear smoother and justify their answer by referencing the frame rate values in the code.

Exit Ticket

After Small Groups: Walking Character, give students a scenario: 'Animate a character moving from the left side of the screen to the right.' Ask them to list three programming steps, including one for movement and one for timing, based on their group’s approach.

Peer Assessment

During Whole Class: Animation Critique Circle, have students share their bouncing ball animations and provide feedback on two aspects: how well the ball bounces off edges and whether the speed remains consistent. Partners should suggest specific variables to check, like the bounce angle or speed multiplier.

Extensions & Scaffolding

• Challenge: Students add a second object that interacts with the first, such as a paddle that deflects the bouncing ball.
• Scaffolding: Provide a partially completed code template with missing variables labeled for the Walking Character animation.
• Deeper exploration: Ask students to research how animation frame rates affect file sizes and propose an optimal rate for a specific use case, like a mobile game.

Key Vocabulary

Frame Rate (FPS)	The number of animation frames displayed per second. A higher frame rate generally results in smoother motion.
Sprite	A small bitmap graphic that is moved across the screen as part of a larger scene. In animation, sprites are often used for characters or objects.
Animation Loop	A programming construct, often a 'while' or 'for' loop, that repeatedly executes code to update the position or appearance of objects, creating the illusion of movement.
Collision Detection	The process of checking if two or more objects in a program have intersected or are about to intersect. This is crucial for making objects react to boundaries or each other.
Tweening	The process of generating intermediate frames between two key frames to create smooth transitions and motion. In programming, this is often achieved through code that interpolates values.