Coding activity
Pixel Art Grid
Color squares on a grid to make pictures! Learn to find spots using rows and columns. Each colored square is like a pixel on a screen.
Materials and setup
- graph paper
- colored pencils
- coordinate cards
- ruler
How this changes by age
Pre-K (ages 3–4)
Color squares on a grid to make pictures! Learn to find spots using rows and columns. Each colored square is like a pixel on a screen.
Steps
- Draw a 5x5 grid on paper. Number the rows 1-5 and label columns A-E.
- Call out coordinates: 'Color the square at Row 2, Column B red!'
- Child finds the square and colors it in. Do 8-10 squares to make a simple shape (heart, star).
- Let the child give YOU coordinates to color. Can you make their picture?
- Show a finished pixel picture and say: 'Screens work the same way — tiny colored squares make pictures!'
- Tell a grown-up one thing that surprised you.
Learning objectives
- Locate positions on a grid using row and column coordinates
- Follow instructions to color specific grid squares
- Connect grid coloring to how screens display images
Kindergarten (ages 5–6)
Create pixel art using coordinates and a color key! Write instructions that tell someone which squares to color. Your instructions are like a computer program that draws pictures.
Steps
- Draw a 7x7 grid. Number rows and columns. Create a color key: R=red, B=blue, G=green, Y=yellow.
- Design a simple picture on one grid (smiley face, tree, house).
- Write instructions as coordinates with colors: 'Row 3, Col 4 = Y. Row 4, Col 3 = Y.' etc.
- Give your instructions to a family member with a blank grid. Can they recreate your picture?
- Compare the original and copy. If they do not match, find the 'bug' in your instructions and fix it.
- Tell a grown-up one thing that surprised you.
Learning objectives
- Write coordinate-based instructions to encode a visual design
- Use a color key system to represent data efficiently
- Debug instructions by comparing expected and actual results
Early elementary (ages 6–8)
Program pixel art using loops and patterns! Instead of listing every single pixel, find repeating rows and use shorthand to compress your instructions. Learn how image compression works.
Steps
- Draw a 10x10 grid. Design a symmetrical pixel art image (robot face, spaceship, geometric pattern).
- Write out every pixel instruction. Count how many lines your 'program' has.
- Find repeating rows or patterns. Replace them with loops: 'REPEAT Row 3 colors for Rows 3, 4, and 5.'
- Count your lines now. How many instructions did you save using loops?
- Challenge: design a picture that is very compressible (lots of repeating patterns) versus one that is not. Which needs more instructions?
- Discuss: 'Computers compress images the same way — finding patterns to save space. That is why small files load faster!'
- In one sentence, tell a parent or sibling what surprised you today.
Learning objectives
- Optimize pixel art instructions by identifying and using repeating patterns
- Compare the instruction count of uncompressed versus compressed image programs
- Understand the basic principle of image compression through pattern recognition
Upper elementary (ages 8–10)
Master digital image representation. Learn how computers store images as number arrays, explore color depth (1-bit, 8-bit, 24-bit), and write a program on paper that generates pixel art using nested loops, conditionals, and mathematical formulas.
Steps
- Research: How do computers store images? Each pixel has a color value. 1-bit = black or white, 8-bit = 256 colors, 24-bit = 16 million colors. Draw examples of each.
- Create a 12x12 grid. Assign each color a number (0=white, 1=black, 2=red, 3=blue, etc.). Write your image as a number array (matrix).
- Write a program on paper using nested loops: 'FOR row = 1 TO 12: FOR col = 1 TO 12: SET color based on formula.' Example: IF (row + col) is even THEN black ELSE white creates a checkerboard.
- Challenge: write a formula that generates a gradient (colors getting darker as row increases) or a diagonal stripe pattern.
- Calculate file size: a 12x12 image at 1-bit = 144 bits = 18 bytes. At 24-bit = 3,456 bits = 432 bytes. How big is a 1920x1080 photo at 24-bit?
- Discuss: 'Image formats like JPEG and PNG use clever compression to make files smaller. Your loop-based programs are a form of compression!'
- In one sentence, tell a parent or sibling what surprised you today.
Learning objectives
- Represent images as numerical arrays and understand color depth
- Write nested loop programs that generate visual patterns using mathematical formulas
- Calculate image file sizes and understand the basics of compression
Safety and evidence note
Read the full activity before beginning. An adult should supervise tools, heat, food, outdoor work, movement, and experiments as appropriate. Completion records that the activity was done; the child’s explanation, work sample, photo, or demonstration is stronger evidence of learning than a completion check alone.
Related coding activities
AI Explorers
Train a pretend 'robot brain'! Show it 5 cat pictures and 5 dog pictures, then test if it can guess a new one.
Algorithm Art
Follow step-by-step drawing instructions to create a picture. The instructions are your algorithm! Each step adds one shape or line.
API Restaurant
Play restaurant! The customer tells the waiter what they want, the waiter tells the kitchen, and the kitchen makes it. The waiter is the messenger — just like how computers talk to each other!
App Design Workshop
Design your dream app! Draw what you'd see on a phone screen. What would your app do? What buttons would it have?