Picture of a Pixel

Mary: remove the unused blocks and then hide everything except the five they will be using: draw picture, rgb pixel, draw pixel, paint color from pixel, and paint color. --MF, 9/9/21 (Need to figure out how to hide blocks. --MF, 9/12/21)

Still true? --MF, 11/19/21

In this activity, you'll see how pixels make up an image.

What's a Pixel?

The screen you're looking at is made up of thousands, if not millions, of pixels. Each pixel is made up of red, green, and blue light, and the screen combines pixels with different amounts of each of those three colors to make all the different colors on a screen.

Here's what a white pixel looks like up close:

A pixel (short for picture element) is the smallest programmable unit of color on a screen.

square made up of three horizontal rectangles each of a solid color: red, green, and blue

  1. Don't believe it? Watch this video of someone zooming out from a screen or this video of an iPhone under a microscope (you don't have to watch the whole video; the first three minutes are most important).

Building Pictures from Pixels

When a computer draws a picture, it's actually drawing it pixel by pixel, activating the appropriate red, green, and blue components of each pixel in the screen to replicate the picture.

  1. Open this Picture of a Pixel project, in which you can see for yourselves with how monitors build pictures from pixels, and save it to your account.

The project has a single command block:

Resolution is the level of detail in an image.

draw picture ('mystery1') with resolution: ('8')

The draw picture block takes two inputs, the name of a picture and a resolution (the number of pixels wide that the resulting image will be). Both inputs are dropdown menus, so you can click them to select a different value.

  1. Start with the "mystery1" picture and the lowest resolution (8), and click the block. The command will paint an eight-pixel wide image of the "mystery1" picture on the stage. You probably can't recognize the picture yet.
  2. Keep increasing the resolution and clicking the block. Try setting the resolution to 16, then 24, then 32, then 48, then 64, then 96, and finally 128. At what resolution are you able to recognize the image?

Eventually, with enough pixels, the picture should become quite clear. Here's an example:

Click the image for an animation.
pixelated image of a sea turtle becoming increasingly more clear. The image starts at resolution 8, then goes to 16, 24, 32, 48, 64, 96, and finally 128.
Why does the higher resolution image look dark?

These aren't really pixels, because even the block's highest resolution, 128, is much lower than your screen's actual resolution. These are models of pixels created to show you how pixels combine to make images. Each of these "fake pixels" can only be at most one third as bright as a real pixel because each part of one of these fake pixels is displayed on your screen by real pixels that each only include a third (one color) that real pixel's total possible brightness.

  1. Reset the resolution to 8 and try doing the same thing with some of the other mystery pictures. Talk with Your Partner
    1. Are some of the pictures easier to guess at low resolution than others?
    2. Do you notice any patterns with the RGB (red, green, blue) contents of the pixels and how they eventually change?
    3. What do you notice about the relationship between image resolution and how long it takes for the computer to draw the image?
In this activity, you learned that images are made up of pixels (tiny squares with different amounts of red, green, and blue), that resolution controls the number of pixels used to make up an image, and that higher resolution images are more detailed and more recognizable.