Circuit Biscuits

Lesson 4 Pupil Notes

Title

Displays, Pixels, And Graphics

Big Question

How do words and pictures become patterns of light on a tiny display?

What This Lesson Is About

Displays turn data into visible output. In this lesson we work with text, pixels, graphics, scrolling, brightness, and simple animation on the matrix display.

Key Words

  • display
  • pixel
  • bitmap
  • frame
  • RGB
  • PWM

Before You Start

  • Open the display and matrix tools.
  • Be ready to watch both the display and the output log.
  • Think about how much information can fit onto an 8x8 matrix.

What To Remember

  • displays turn data into something people can see
  • letters and icons are both patterns on a display
  • a pixel is one small picture element
  • animation is made from still frames shown quickly
  • fast switching can also change how bright a light looks

What We Did

  • sent text to the display
  • watched scrolling text
  • drew simple graphics
  • used frames to make movement
  • linked timing to brightness

Look At The JSON

If you open the output log, you may see matrix data like this:

"bitmap_rows":["00000000","00000000","00000000","00000000","00000000","00000000","00000000","00000000"]

This tells us how the picture is stored:

  • there are 8 rows
  • each row has 8 positions
  • 0 means that pixel is off
  • 1 means that pixel is on

That means the display has 8 x 8 = 64 possible pixel positions.

What To Look For

  • what is easier to read on a tiny matrix: a word or a simple icon?
  • how many pixels need to change before the picture looks different?
  • why does scrolling text feel like motion?

Try This

  • Send a short message.
  • Draw one clear icon.
  • Change a few pixels and see how much the image changes.
  • Compare a still image with a simple animation.

Why It Matters

Displays are part of communication. Engineers decide what people should notice, how clearly it should appear, and how motion or timing changes the message.

Check Yourself

  • What is a pixel?
  • Why can scrolling text look smooth?
  • How is animation made?
  • What does RGB mean on a screen?
  • How many pixel positions does an 8x8 matrix have?

Reflection

  • A message I sent:
  • An icon I made:
  • One thing I noticed in bitmap_rows:
  • Something I learned about displays: