Image Representation

Colour by Numbers #

Images are everywhere on computers. Some are obvious, like photos on web pages and icons on buttons, but others are more subtle: a font is really a collection of images of characters, and a fax machines is really a computer that is good at scanning and printing.

This activity explores how images are displayed, based on the pixel as a building block. In particular, the great quantity of data in an image means that we need to use compression to be able to store and transmit it efficiently. The compression method used in this activity is based on the one used in fax machines, for black and white images.

Although the main activity is based on coloring a few dozen black pixels with a pencil, in live shows we like to demonstrate it on a larger scale. One way to do this is to use a can of black spray paint and a square stencil to make a giant picture pixel-by-pixel. Another is to process a photograph of (say) a teacher to the kidfax code, and have a whole class decode the mystery photo.

Posing

Activity description (PDF) #

Translations and other versions #

Videos #

Photos #

Activity explained at Fujitsu Kids event with JOI, Japan Mr. Idosaka explains the concept at Fujitsu Kids event with JOI, Japan Students' attempts at Fujitsu Kids event with JOI, Japan Examples of worksheets from Susumu Kanmune Sam demonstrates how pixels work Caitlin and Arnold talk about how the image is represented Sam fills in the rest of the image Students send the image across the playground Arnold gets enlarged Sam showing arnold Sam and Caitlin asking the students what is happening

An older version of this activity can be downloaded in PDF format here. The content is similar to the current version, but there’s some extra technical information.

More lessons and activities #

  • Francis Wyffels has created a nice variation of this activity with more images and some thinking about protocols.
  • Computer Science & Engineering for K-12 (cse4k12.org) has the following activities related to binary numbers and image representation below:
    • Bitmaps Activity where bitmaps are a way of encoding black and white images using binary numbers. A ‘0’ is used to represents a white square in the image and a ‘1’ is used to represent a black square. These worksheets provide a set of 8×8 grids where the student can draw their own black and white images and then write the corresponding binary (and hexadecimal) values.
    • Crossbin Puzzles Activity that are similar to crossword puzzles
  • [Registration and software download required] Wolfram Demonstrations Projecthas the following demonstration activities. Note: You will need to install the Wolfram CDF Playerin order to use these activities. You can either download each demonstration or use your browser to run it. Binary Run-Length Encoding which splits data into runs of zeros and ones. A list of binary distinctions can then be encoded as a list of run-lengths
  • Picture Logic has a puzzle similar to Run-length coding, but it only represents the number of black squares. You need to use some reasoning to work out where the white gaps are!
  • The Mathmaniacs website has a similar activity (lesson 3)
  • SCIENCE BUDDIES offer the following activities:
  • TEACH Engineering has the following K-12 resources in image representation:
    • How Do You Store All This Data? allows students to start seeing the data structure they will use to store their images. Students will be introduced to two dimensional arrays and vector classes. Students will be guided to see that a vector class will be the most efficient way of storing the data for their images.
    • What Makes Up A Colour? helps students learn why image colour becomes important as we distort the outer boundaries of an image and have to interpolate pixels to fill in gaps created from our algorithm. Students learn what a digital image is, what pixels are, and learn to convert between RGB and hexadecimal values.
    • RGB to Hex Conversion Activity where students practice converting between RGB and hexadecimal (hex) formats. They learn about mixing primary colours in order to get the full spectrum of colours, and they learn how to average pixel values.

If you want to find out more #

Videos #

  • Taha Ben Brahim, Ph.D. candidate in Auburn University’s Department of Computer Science and Software Engineering has programmed this activity using the Textrix robot and RobotC. View the Videos:
  • The PrintBall is a graffiti Robot. It works like a giant Ink-Jet printer using a PaintBall Gun as print-head. The PaintBall gun is mounted on a custom made pan & tilt unit, which is connected to a software programmed with PrintWare 6.0. The pan & tilt is controlled by an Atmel chip [programmed in Basic] allowing the PrintWare 6.0 software to move the two stepper motors and to trigger the PaintBall Gun. The software allows the users to load, analyse and shot images. The resolution of the image can be adjusted according to the number of steps between each points. For videos of PrintBall in action visit the above site.
  • The students at the Fall 2010 Auburn Robo Camp have demonstrated combining this image representation activity with robotics; this video shows a robot decoding a binary image file (using the Textrix robot and RobotC).

Additional resources #

Great Principles of Computer Science #

  • Recollection

ACM K12 Curriculum #

  • Level I (Grades K2) Topic 11: Understand how 0s and 1s can be used to represent information, such as digital images and numbers.