Hour of Code

Grades K–4: make pixel art with code

In this Hour of Code activity, students design pixel art and train a robot to paint the picture using code. It is free, runs in the browser, and needs no sign-up.

About 9 Dots. 9 Dots is a nonprofit that partners with schools to bring computer science to every student, starting in kindergarten. If you’re interested in bringing 9 Dots to your school, please fill out the form below.

PixelBot follows the code on the right to paint the picture on the left.
For teachers

Leading this with a class? Get the facilitation guide

A lesson plan for running the PixelBots activity with your class: timing, discussion questions and tips for helping students who get stuck.

Open the teacher guide
Suggested timing

Your hour at a glance

  1. 10 minWarm-Up
  2. 8 minLoops Exploration
  3. 10 minDesign Your Animal
  4. 22 minCode Your Animal
  5. 10 minShare & Reflect
Warm-Up · 10 min

Warm-Up: your first 9 Dots challenge

Help PixelBot paint an orange line using step, turn and paint blocks.

Open in a new tab

Your code blocks

Move Step block: green with a footprints icon Step Moves PixelBot forward one square, in the direction it is facing.
Move Turn right block: green with a clockwise arrow and the letter R Turn right Turns PixelBot a quarter turn to its right. It stays on the same square.
Move Turn left block: green with a counterclockwise arrow and the letter L Turn left Turns PixelBot a quarter turn to its left. It stays on the same square.
Paint Paint block: purple with a paintbrush icon Paint Colors the square PixelBot is standing on. You choose the color.

How to code in PixelBots

1Build your code Add blocks in order. PixelBot follows them from top to bottom, one block at a time. Tip: trace the path on the grid with your finger.
Paint block in the code area with its color menu open, showing 11 colors including orange
2Choose a color Click the color box next to a paint block to open the color menu, then pick the color.
▶
3Check your code When you’re ready, click the green play button. Wrong square? Change a block and try again.
A list of steps in the right order is called an algorithm. PixelBot follows your blocks one at a time, from top to bottom, so order matters: step then paint colors a different square than paint then step.
Loops Exploration · 8 min

Loops: write it once, repeat it

A loop tells a computer to repeat a sequence. Instead of writing the same code over and over again, write the sequence once inside a loop, and say how many times you’d like the code to repeat.

1Say it: find the repeat

Read the code out loud: “step, paint, step, paint, step, paint.” Hear it? The same two blocks happen again and again.

Six lines of code: step, paint, step, paint, step, paint. Each step and paint pair is circled and numbered 1, 2 and 3. 1 2 3

Six lines of code to paint three squares.

2Loop it, then count it

Put one step and one paint inside a loop block. Then count the repeats you circled and type that number in the loop’s box.

A loop block set to 3 with one step block and one paint block inside it 3 repeats

Three lines of code do the same job. Want five squares? Just change 3 to 5.

Look for patterns Before you code, look at your picture. Where do colors repeat? A long trunk, a row of stripes, or a mane of the same color are all great places for a loop.
Noticing what repeats is called pattern recognition. Coders look for patterns so they can write shorter code that is easier to read and fix.
Your turn

Solve the warm-up again, this time with a loop

1Say it: read your warm-up code out loud. Which blocks repeat? 2Loop it: clear your code, add a loop, and put one step and one paint inside. 3Count it: count the orange squares, type that number in the loop and press play.
Did your code get shorter? Count your lines before and after.
Back to the warm-up
Your challenge · 32 min

Your challenge: design and code your favorite animal

Great coders plan before they build. Design your picture first, then write the code, then make it shorter with loops.

1Design it10 min

Use Edit Goal to color your animal on the grid. Start with the big shapes, then add eyes, ears and other details. See how

2Code it22 min

Use step, turn and paint blocks to tell PixelBot how to paint your design. Go one row at a time and press play often.

3Loop challenge

Wherever colors and blocks repeat, swap them for a loop. Can you use at least two loops?

Your animal is made of small squares, and your code is made of small steps. Breaking a big job into small pieces is called decomposition. It’s how coders solve big problems.

Need an idea? Try one of these.

Elephant

A big blue body and floppy pink ears. Can you use a loop for the long trunk?

Rhino

A tough grey face with a big horn and pointy ears. Rows and rows of grey make this a great one to loop.

Your own idea

A cat, a fish, a dragon? Pick any animal you love and make it yours.

Step 1 tutorial

How to design your animal in PixelBots

  1. 1
    Open the drawing grid. Click the Edit Goal button. Blue Edit Goal button with a paintbrush icon
  2. 2
    Pick a color. Click the color square at the top left, then choose a color from the menu. Color menu open below the color square, showing 11 colors including red, pink, orange, yellow, green, blue, purple, brown, grey, black and white
  3. 3
    Paint. With the paintbrush selected, click a square on the grid to paint it. Pick a new color any time. Paintbrush button
  4. 4
    Fix a mistake. Click the eraser, then click a square to erase it. To paint again, click the paintbrush. Eraser buttonPaintbrush button
  5. 5
    Save it. When your animal is done, remember to click Save. Now PixelBot knows what to paint. Blue Save button
Watch it: a brown outline first, then yellow for the ears.
If PixelBot paints the wrong square, that’s a bug. Finding and fixing it is called debugging. Every coder does it, even the experts, so a bug just means you’re learning.

Code your animal with PixelBots

Open in a new tab
Finished early? Make your code even shorter, add a background color behind your animal, or trade with a partner and guess each other’s animal from the code alone.
Share & Reflect · 10 min

Share & Reflect

Every coder shares their work. Show your project to a partner and tell them how you made it.

Share

Share your project with a partner

Partner 1 Presenter Show your animal and your code. Tell your partner about it using the sentence starters below.
Partner 2 Listener Look at the animal and the code while your partner talks. Listen for how many loops they used.

Presenter sentence starters

Finish each sentence out loud as you show your project.
  • “The animal I designed is ________.”
  • “I wrote ________ lines of code.”
  • “I used ________ loops in my code.”

Want to learn more about 9 Dots?

Tell us a little about yourself and we will follow up with ways to bring computer science to your school or family.