A learning resource fromSpread Robotics Education Foundation

Lesson 04 · 55 minutes · Design with pixels

Animate an animal

Change one picture slightly, then alternate the two frames to make a duck bob up and down.

New programming concept

Custom image

A screen picture is made from tiny dots called pixels. A custom image lets you decide which of the micro:bit’s 25 pixels are on or off.

·●●··
●●●··
·●●●●
·●●●·
·····
your own picture

Revisit: You already know sequence, pause, and forever. This lesson uses those familiar ideas with a picture you design.

Two-frame plan

Move every lit pixel down one row

Frame 1 uses the built-in duck. Frame 2 copies the duck one row lower. Small changes between frames create the movement.

AB

MakeCode steps

Build the animation

  1. 1

    Start a new project

    Name it Animated Animal.

    Open MakeCode
  2. 2

    Build inside forever

    Add show icon and choose the duck.

  3. 3

    Pause for 500 ms

    This gives your eyes time to see the first frame.

  4. 4

    Draw frame 2

    Add show leds. Copy the duck, moving each lit pixel down one row.

  5. 5

    Pause again

    Add another 500 ms pause and test the loop.

  6. 6

    Improve carefully

    Change one frame at a time. Try a rabbit, bird, fish, or your own creature.

Flashing-light note

This lesson uses repeated changing images. Keep the pauses at 500 ms or slower, and allow learners who are sensitive to flashing to use a still custom picture.

For the teacher

A calm 55-minute plan

Recall
Act out large heart, pause, small heart.

Pixel planning
Draw two frames on 5×5 paper grids.

Guided build
Make the duck animation together.

Test and adjust
Change only one frame or pause.

Gallery
Teams show how one frame differs.

Before you finish

Can you explain it?