Pixel Art Animation: Make a Blob Bounce
Students start from a small blob that already bounces in four frames. They add something to one frame, watch it blink, and find out how animation works in the first few minutes. By the end of class, every blob has a look of its own and one part that moves, and the class walks the room to see them all play.
At a glance
Essential question
How can a few still pictures look like they are moving?
Objectives
Students will be able to:
- explain that an animation is a sequence of still drawings, called frames, shown quickly in order
- add a detail to a sprite on every frame so it moves with the sprite instead of blinking
- make one part of a sprite move by drawing it a little differently on each frame
- describe how the frame rate changes the speed of an animation
- describe how a computer stores a picture as a grid of pixels, each saved as one color code
Vocabulary
pixel, sprite, frame, animation, frame rate (FPS), onion skin, squash and stretch, color code
Standards
1A-DA-05, 2-DA-07, VA:Cr2.1.4a, VA:Cr2.1.5a, VA:Cr2.1.8a, MA:Cr3.1.4a, MA:Cr3.1.5a, MA:Cr3.1.8b
Time and materials
45 minutes, grades 4-8.
- One computer or Chromebook per student; a mouse helps
- A projector
- The worksheet and exit ticket, one copy each per student
- The rubric, one copy per student if you grade the animation
Prep
Make copies of the worksheet and exit ticket. Before class, open mytekdev.com/try/pixelart?lesson=make-a-blob-bounce&ref=tpt-pixelart once on a student Chromebook to see the starter, a 16 by 16 blob in four colors, and to check that your school's filter allows it. No account is needed.
Assessment
- Formative: the questions under What to look for, asked while students work, and the exit ticket (answer key included).
- Summative: the finished animation, scored with the rubric out of 12.
Technology and privacy
Runs in any browser, Chromebooks included, with nothing to install. Students need no account and no email: the link works signed out, and nothing they make is stored on our server unless they choose to save it to an account. If your school blocks new sites, ask IT to allow mytekdev.com.
mytekdev.com/try/pixelart?lesson=make-a-blob-bounce&ref=tpt-pixelartmytekdev.com/tools/pixel-art/lessons/make-a-blob-bounce/startEach student gets their own copy, and the same link reopens it next time. How to set up a classLesson sequence
| Minutes | Stage | What you do | What students do |
|---|---|---|---|
| 0 to 5 | Warm-up Hook | Show the title, essential question and Today I can slides (about 1 minute). Then project the bouncing blob and ask: "How many drawings make this bounce?" Take guesses, then show the next slide with the four frames and name them: up, down, squash, stretch. | Guess, then count the frames. Read the essential question on the worksheet. |
| 5 to 12 | Direct instruction (I do) Model it | Show the vocabulary slide. Then, on the projector, add a hat to frame 1 only and play it: the hat blinks, because it is on 1 of 4 frames. Show the FPS slider (at 8 FPS, each frame shows for 125 milliseconds), then turn on onion skin. Then explain how the picture is stored: each of the 256 squares is one color code, like #5CCF6B, the blob's green, and the four frames can be saved as an animated GIF or as one sprite sheet. | Watch, and answer out loud: why does the hat blink? |
| 12 to 20 | Guided practice (We do) First change together | Have students open the link or scan the QR code on the worksheet. The app opens with a sixty-second guide; let them follow it. Then fix the blink together, frame by frame. Before you move on, check that no screen is still blinking. | Add one thing to frame 1 and see it blink. Write why in worksheet step 2. Then draw it on frames 2, 3 and 4, wherever the blob is. |
| 20 to 37 | Independent practice (You do) Make it yours | Walk the room and ask the questions under What to look for. Repeat the two rules: every change on all 4 frames, and one part that moves on its own. | Give the blob a look of its own. Sketch the moving part in the worksheet boxes, then draw it frame by frame. |
| 37 to 45 | Closure Showcase and exit ticket | Gallery walk: students leave their blobs playing and the class walks the room. Ask the essential question again, then hand out the exit ticket. | Point out the part that moves on its own. Answer the exit ticket on their own. |
What to look for
Ask these while students work. A student who has understood the lesson can answer them without help:
- How many drawings make this bounce? What would it look like with only two?
- At 8 frames a second, how long is each drawing on the screen?
- Why does your change blink when you only drew it on one frame?
- Show me the onion skin. What is it telling you?
- Pick one color in your blob. What is its color code, and what do the three parts stand for?
- Make it bounce higher without touching the FPS slider.
Cross-curricular extensions
- Art: a 16 by 16 self-portrait, then a second frame where the eyes close.
- Science: a life cycle (egg, caterpillar, chrysalis, butterfly) with one frame per stage.
- Math: at 8 FPS, each frame shows for 1/8 of a second. How long does one 4-frame bounce take? (1/2 second) At 12 FPS? (1/3 second)
- Computer science: export the blob as a PNG sprite sheet, a format many game engines use for animated characters.
Vocabulary
| pixel | One square of a digital picture. Each pixel is one color. |
| sprite | A small picture of a character or object, used in games and animations. |
| frame | One still drawing in an animation. |
| animation | Frames shown quickly one after another, so the picture looks like it moves. |
| frame rate (FPS) | How many frames are shown each second. FPS means frames per second. At 8 FPS, each frame is on the screen for 1/8 of a second. |
| onion skin | A faint view of the frames just before and after the one you are drawing. |
| squash and stretch | Flattening a shape when it hits something and stretching it when it moves fast, so motion looks lively. |
| color code | A short code for one color, like #5CCF6B. It tells how much red, green and blue to mix. |
Differentiation
English learners
- Post the vocabulary with a picture for each word: one frame, four frames side by side, the onion skin.
- Model each step on the projector before students try it, and point at the button as you name it.
- Let students answer the exit ticket's last question with a labeled drawing.
Students with IEPs or 504 plans
- Where the IEP allows a modified assignment, shorten the goal to one change on all four frames; the moving part becomes an extension.
- Pair students: one draws, one checks each frame in the preview, then they swap.
- Offer a mouse, and zoom the canvas so each pixel is bigger.
- Read the exit ticket aloud, or let students answer by pointing at their screen.
Students who need more support
- Give a sentence starter for worksheet step 2: "My change blinks because..."
- Turn on onion skin from the start, so students can see where to draw on each frame.
- Check in at minute 25: is the change on all four frames yet?
Students ready for more
- Add a fifth frame where the blob lands and wobbles.
- Make the moving part lag behind the body, the way a hat flies up a moment late.
- Color codes: find the blob's green with the color picker (#5CCF6B). Split it into red, green and blue (5C, CF, 6B) and change each to a number from 0 to 255 (92, 207, 107). Then: the blob uses 4 colors, and some squares are empty, so each square has 5 choices. How many bits does one square need, at least? (3 bits: 2 bits make only 4 patterns, 3 bits make 8.) How many bits for one 16 by 16 frame? (3 x 256 = 768 bits.)
Adapting for other grades
Younger students: For grades 2 and 3, skip the color code part of the model, model the first change one frame at a time while students copy each step, and score only the first two rubric rows (out of 8; 6 or more meets the objectives).
Older students: For grades 9 to 12, after students finish their animation, have everyone do the color code question under Students ready for more; it meets CSTA 2017 3A-DA-09. Ask for a fifth frame and a written explanation of the timing.
Pixel Art Animation: Make a Blob Bounce
Student worksheet
Name: ______________________________ Date: ______________
Open the app: scan the QR code, or go to mytekdev.com/try/pixelart?lesson=make-a-blob-bounce
Essential question: How can a few still pictures look like they are moving?
- Change one thing. Pick a color from Current colors and add something to the blob: a hat, spots, a face.
- Watch the preview. Your change blinks. Write down why:
- Fix the blink. Draw it on frames 2, 3 and 4 too, wherever the blob is in that frame.
- Make one part move. Pick one part (eyes, a hat, an antenna) and draw it a little differently on each frame.
Plan the moving part. Sketch it in each box first. Change it a little from box to box.
| 1 Up | 2 Down | 3 Squash | 4 Stretch |
|---|---|---|---|
1. What did you add to the blob, and what part moves?
2. If you added a fifth frame, what would you draw in it?
Pixel Art Animation: Make a Blob Bounce
Exit ticket
Name: ______________________________
1. The blob bounces in 4 frames. With only 2 frames, the bounce would look: (A) exactly the same, (B) choppier, with bigger jumps between drawings, (C) slower and smoother.
2. You draw a hat on frame 1 only. When the animation plays, the hat: (A) stays on the whole time, (B) never shows up, (C) blinks on and off.
3. Name two different ways to make the blob bounce faster.
Answer key: exit ticket
| Question | Answer | Why |
|---|---|---|
| 1 | B | Fewer drawings means each step covers more distance, so the motion jumps. |
| 2 | C | The hat is on 1 frame out of 4. It shows for 1 frame, then it is gone for 3. |
| 3 | Any two of: raise the FPS; take out a frame; draw the blob moving farther between frames | Full credit for any two. Raising the FPS is the answer most students give, since the lesson shows it. |
Rubric
Score each row from 1 to 4.
Name: ______________________________
| Criteria | 4 Exceeds | 3 Meets | 2 Approaching | 1 Beginning |
|---|---|---|---|---|
| Change on every frame | The change is on all 4 frames and follows the blob exactly, with no blinking. | The change is on all 4 frames, with a small jump in one place. | The change is on 2 or 3 frames, so it blinks. | The change is on 1 frame only. |
| A part that moves | A part moves on its own across all 4 frames, a small even step each time. | A part moves on its own across all 4 frames, with one uneven jump. | A part changes on some frames, but not all 4. | No part moves on its own yet. |
| Explains how it works | Explains why a change blinks, how frame rate changes the speed, and what onion skin shows, with an example from their blob. | Explains why a change blinks and how frame rate changes the speed. | Explains one of these with help. | Cannot yet explain why the blob looks like it moves. |
Total: ____ / 12. A score of 9 or more meets the objectives.
Standards
The arts standards fit this lesson best. For computer science, it uses the 2017 CSTA standards, which many state standards are still based on: CSTA's 2026 standards leave out data encoding, and their animation standards require coding.
| Framework | Code | Grades | Standard | How the lesson meets it |
|---|---|---|---|---|
| CSTA 2017 | 1A-DA-05 | K-2, continued in 3-5 | Store, copy, search, retrieve, modify, and delete information using a computing device and define the information stored as data. | The sprite is data students modify and save. |
| CSTA 2017 | 2-DA-07 | 6-8 | Represent data using multiple encoding schemes. | Each pixel stored as one color code, and the same frames saved as a GIF or as a sprite sheet. |
| NCAS Visual Arts | VA:Cr2.1.4a | 4 | Explore and invent art-making techniques and approaches. | Students explore drawing pixel by pixel and invent a look of their own for the blob. |
| NCAS Visual Arts | VA:Cr2.1.5a | 5 | Experiment and develop skills in multiple art-making techniques and approaches through practice. | Students practice drawing within a 16 by 16 grid and four colors. |
| NCAS Visual Arts | VA:Cr2.1.8a | 8 | Demonstrate willingness to experiment, innovate, and take risks to pursue ideas, forms, and meanings that emerge in the process of art-making or designing. | Giving the starter a look of their own. |
| NCAS Media Arts | MA:Cr3.1.4a | 4 | Structure and arrange various content and components to convey purpose and meaning in different media arts productions, applying sets of associated principles, such as balance and contrast. | Students arrange their added part on each of the four frames so it stays clear against the moving blob. |
| NCAS Media Arts | MA:Cr3.1.5a | 5 | Create content and combine components to convey expression, purpose, and meaning in a variety of media arts productions, utilizing sets of associated principles, such as emphasis and exaggeration. | Students add a part that moves on its own, and keep the starter's squash and stretch, a form of exaggeration. |
| NCAS Media Arts | MA:Cr3.1.8b | 8 | Refine and modify media artworks, improving technical quality and intentionally accentuating selected expressive and stylistic elements, to reflect an understanding of purpose, audience, and place. | Fixing the blink, and timing the bounce. |
Checked October 2026 against: CSTA 2017 progression chart, CSTA 2017 to 2026 crosswalk, NCAS Visual Arts at a Glance, NCAS Media Arts at a Glance.
Optional: save student work in a free class
The whole lesson runs at the link on the worksheet, with no accounts and no sign-up. Before they close the tab, students can download their animation as a GIF.
To keep students' work, and see every student's blob in one place, make a free class. It takes about ten minutes, once, and covers every lesson in this series: mytekdev.com/tools/class-setup
Students in a class open mytekdev.com/tools/pixel-art/lessons/make-a-blob-bounce/start instead of the worksheet link. Each one gets their own copy of the bouncing blob, and the same link reopens it next time. A student who started at the worksheet link and then signs up keeps what they made.
The PixelArt app is built on Piskel by Julian Descottes, open source under the Apache License 2.0.