Pixel Art

This Codemakers activity is ideal for any age of participants. Using both unplugged and plugged formats, youth will explore collaboration, communication, and creativity skills while learning about pixels. This activity is designed to show youth how computer science can support the arts.

Intended Audience: Grades K-12
Duration: 60 minutes

Activity 1: Giant Pixel Art

To Do in Advance

  1. Assemble the largest grid you have space for on the ground using green painters tape (for easy removal). Using the tape, number the x (horizontal) and y (vertical) coordinates. Tip: it may be helpful to label the x axis and the y axis to help participants remember which one is which.
  2. Cut foam sheets or coloured paper to size of grid (so that each piece is relatively the same height and length of the squares in your grid.
  3. Using the grid you made, create a pixel image that utilizes the same number of coordinate spaces. Ensure that the image you create can be replicated by the colours of foam or paper you have. (See the materials section for suggested images).
  4. Label the backs of the foam with the coordinates (x,y) – to assist younger students or those who are new to coordinates.

Tip: create a few sets of Giant Pixel Art images and store in a zippered bag with a printout of the completed image.

Activity Procedure

  1. Tell participants that today they are going to think like computers in order to create a giant image on the floor. They are going to need to work together because each of them will represent 1 pixel in a giant image comprised of many pixels.
  2. Introduce participants to the concept of an image or icon being a collection of many little elements, or pixels. The more pixels, the more information or data in the image (and generally, the clearer the picture). Video games are a good example of how increasing the number of pixels has increased the quality and/or realisticness of gaming over the years. Video games originally were developed in 8 bit (this means that only 256 colours were available to them) where today we use 16 and 24 bit pixels which equal up to 16,777,216 colours (or what we call true colour).
    • Interesting facts:
      • The word pixel is based on a contraction of pix (“pictures”) and el (for “element”)
      • A megapixel (MP) is a million pixels
  3. Have students review that the x axis is horizontal and the y axis is vertical. When they get their coordinates (like in Battleship) the first number refers to the x axis, the second refers to the y axis.
  4. Give participants their foam pieces. Have participants take turns locating their coordinate and placing their foam piece in the correct square.
  5. Have participants hypothesize what the final image will be before it is created.
  6. Take an image of the final pixel picture and tweet it to @ActuaCanada and share with other Actua network members across the country. Use #Codemakers hashtag to help share your pixel creations. What image will your camp create?

Activity 2: Pictures as Numbers Challenge

To Do in Advance

  1. One Time Use: (Benefit: will allow you to display finished work)
    • Hang two very large pieces of white paper (ideally bulletin board paper size).
    • Create a simple grid outline on the paper in pencil.
  2. Reusable: (Benefit: no need to create grid paper each week)
    • Create a large grid on a whiteboard using electrical tape.
    • Create a pixel image that both groups will need to create. See the materials section for suggestions. Decide if the images will be 2 colour (i.e black and white) or multicolor. 2 Colours will be easier/faster to create.
  3. Divide participants into two groups.

Activity Procedure

  1. Explain that computers have a way of sending images in a fast and effective manner. We have been doing this ever since the fax machine. The process a computer uses to make this data transmission fast is called “image compression.” The type of image compression we will do today is called “Run-length encoding”
  2. Ask participants to predict how “Run-length encoding” might work, based on its name and the fact that they know this is a type of image compression. Remind them to think about the Giant pixel art they just created and some of the ways they hypothesized sending the information in the reflection part of the activity. Do any of their ways sound like they could describe “run-length encoding?”
  3. Show students that runs of pixels can be counted and summed by colour, for the full length of each row in an image. Take a look at the image below. It’s 7 rows high and 21 columns long.
  4. The first row is all black. If we communicated this information pixel by pixel we’d read:
    • black black black black black black black black black black black black black black black black black black black black black (21 times)
  5. If we read it using run-length encoding we’d read: 21 Black or 21B.
  6. This reduces us from 21 data points to 2.
  7. The second row has black and pink pixels. Have students read out the data pixel by pixel:
    • black, pink, pink, pink, black, pink, pink, pink, black, pink, black, black, black, pink, black, pink, black, pink, pink, pink, black.
  8. Now have students work in pairs to communicate the pixels using run length encoding:
    • 1B, 3P,1B, 3P, 1B, 1P, 3B, 1P, 1B, 1P, 1B, 3P, 1B
  9. How many data points did we reduce this to? (13 data points)
  10. Repeat for a few rows, to ensure everyone understands how to calculate and communicate run-length encoding.
  11. Show the participants the two large grids on the wall or whiteboard. Explain that one instructor is going to be the “sender computer” and the paper will be the “receiver computer”. The instructor or sender computer will communicate the run lengths to participants one colour at a time. The participants will relay this information to the paper and colour in the corresponding squares as quickly and as accurately as possible, until all the squares have been filled and the image is rendered.
  12. Have students line up in two equal groups facing the paper on the wall. Have each instructor stand at the start of the line with the grid answer key.
  13. Countdown to start the relay. See which group finishes quickest. See which group finished most accurately.

Tip: as an extension to this activity you could have groups repeat the process with one group using run-length encoding, while the other uses pixel by pixel communication and time the difference.

Extensions & Modifications

Extensions

  • Create a giant pixel image with more pixels (>1 pixel per participant)
  • Participants work individually.
  • Give participants 3 minutes to work together to create the image. Try faster and faster after shuffling the foam pieces.
  • Do not label the x and y axis to test participant memory of which axis is which.
  • Create a legend of coordinates = to binary code for colours. Have participants match colour foam choice to binary representation before placing on the grid.
  • Have campers take turns in the instructor’s role.
  • Have students decode encrypted activity instructions prior to commencing.

Modifications

  • Create a giant pixel image with fewer pixels (1 per pair of participants)
  • Participants work in partners (one as the x, one as the y and meet in at their (x,y) coordinate to earn their color foam and place in the correct spot.
  • Provide participants with the coloured foam labelled with their coordinates.
  • Do not race, focus on completion.
  • Have instructors model the relay before it begins.