Color-a-Pixel Activity Poster Generator

Andrew Clark, Institute for Global Environmental Strategies

November 2024

Step right up to help collaboratively solve the mystery, and learn something new about remote sensing in the process!

One of the most rewarding aspects of public outreach events, for both science educators and their audiences alike, are those small personal connections that occur around hands-on activities and demonstrations. Those activities which can draw participants in with a sense of mystery, curiosity, or anticipation naturally put audiences into the essential mindspace of scientific investigation, primed for learning. Opportunities abound for the formulation of questions, both by the learner and by the skilled facilitator.

Not all scientific fields lend themselves immediately to obvious activities or demonstrations without some form of possibly bulky, or delicate, or expensive instrumentation. Space-based remote sensing might seem like one of those disciplines, perhaps requiring specialized cameras, optical filters, and digital displays to draw a crowd with “hey wow” technologies. And while I know I would certainly love to play with a multi-spectral imager, understanding the principles underpinning such a device is essential to appreciating the view it can provide, and the value of the global records captured by satellite sensors over the decades.

The diversity of age ranges, interests, and backgrounds of public audiences at outreach events requires an activity which does not presuppose any technical knowledge, but can be interacted with by nearly everyone, and easy-to-use and adaptable by a range of educators. The Color-a-Pixel activity described is designed with those requirements in mind. All that is needed is a black and white printer, crayons, and a flat sturdy surface. For larger installations or events, a large-format printer or an order from a print shop makes for a more seamless experience.

The premise is very simple- start with a satellite image of your choosing and run it through the web-based activity generator tool (https://color-a-pixel.streamlit.app/). The tool will aggregate the original image pixels and remap the colors to the closest-fit colors in the standard 120-color Crayola crayon palette. The tool will output a grayscale PDF containing a grid of ½ inch squares. Each square contains a number indicating the appropriate color to use when filling in the squares. Initial trials led to the design decision to use the ½ inch size, as that size was large enough to permit legible color codes, and is large enough to be filled easily by all age ranges.

Julianna Robbins, California State Library, tries out the Color-a-pixel activity at a workshop. (Photo credit: Theresa Schwerin, IGES).

When a learner participant approaches the activity, the apparently “random” grid of numbers does not reveal what the image may depict. Throughout the event, as participants collaboratively and collectively color in the grid, the image is gradually revealed. In testing, we found learners returned throughout the day to check on progress and color in more squares, offering multiple opportunities for interaction. That kind of repeat engagement is rare and valuable!

Top: A partially-completed Color-a-Pixel activity poster. Bottom Left: The source image. Bottom Right: the image at source resolution with pixel colors remapped to the Crayola palette. Bottom Center: The image rescaled to 72×48 pixels with remapped colors.

The Color-a-Pixel activity can be thought of as a rasterized take on the classic “paint by numbers”. But even that concept of rasterization can be a lead-in for discussions about image resolution, angular resolution, and digital imaging in general. The replacement of colors with numbers also presents an opportunity for messaging as simple as satellite images are data to discussions of how digital digital images are captured, transmitted, and reproduced. For more advanced audiences, it can progress into wavelengths, band-mapping, and more.

Currently, the tool generates a poster-sized PDF (3 feet wide by 2 feet tall) – large enough to fill a good portion of the kind of folding table commonly used for activity booths, while leaving room for the crayons and any additional materials. Plans are to enhance the tool with with the ability to select a size that can be more easily tiled across standard 8.5”x11” paper, which can then be either taped together on the back side of the pages, or handed out as an individual activity in a classroom-type setting (assuming a sufficient supply of crayons). After individual completion of the pages, they can be combined to reveal the full image.

Let’s take a quick look at the tool itself (again, https://color-a-pixel.streamlit.app/). Instructions are included along the way, but here are a few additional pointers and reminders.

When selecting your Color-a-Pixel activity image, it’s a good idea to pick a recognizable area, preferably one that is relevant to your audience or location. For example, one of our trials took place at a North Carolina educators workshop, so we selected an image of the region around Kitty Hawk, Outer Banks, NC. A great place to start your search for images is with the Landsat Image Galleries or the other resources suggested at the end of this post.

A well-suited image should contain recognizable shapes (even at low resolution) and a diversity of colors. Choosing carefully will provide greater visual interest and make for a more interesting coloring experience. It’s best if the area has distinguishable geographic features like a body of water, coastline, or a distinct change in vegetation (e.g. forested vs urban, desert vs farmland, or the ecological gradients that come with mountainous terrain). The source image does not need to be exceptionally high resolution- no need to find the largest possible image, since the end result will only be 72×48 pixels.

After clicking the “Generate” button, wait a few seconds and you will see an image of the grayscale grid and a preview of how the grid will appear once it has been colored in. Underneath each, there is a download button. The grid will be a large PDF file, suitable for a poster-sized print 3 feet wide and 2 feet tall at 300 DPI. All other downloads are formatted as PNG images.

To help you evaluate your selection, the tool also generates a legend with color frequency, indicating how many squares use each color. If there’s a color that is strongly over-represented, it might not be the best image for the activity.

Before abandoning an initially unbalanced image, try toggling the “Attempt Image Enhancement” setting, which performs some minor alterations to saturation, contrast, and black point. It is currently not very sophisticated, but it might help! Be sure to click the “Generate” button again after activating the toggle.

Another point to consider is that the tool currently generates a grid that is 72 squares wide and 48 squares tall. That’s only 72×48=3,456 “pixels.” It might sound like a lot, but consider an HD TV: 1920×1080=2,073,600 pixels, or 4K TV: 3840×2160=8,294,400 pixels! So if you start with a very high resolution image with lots of small details, recognize in advance that those details will be lost. Instead, try using the interactive cropping tool to select a specific and recognizable region of interest.

Above, an example of comparison images generated by the tool. Left is 720 x 480 pixels, right is 72 x 48 pixels. If printed “full size” with 1/2 inch square pixels, the left image would be 30 feet wide by 20 feet tall and the right image would be 3 feet wide by 2 feet tall.

A few words about the tool – it is currently in beta, and may change (for the better!) at any time. The field testing images above illustrate that it has already gone through a few iterations. As you might guess from looking at the URL, the tool leverages Streamlit to deploy a web interface for a script written in Python. The cloud deployment is a free service, and it comes with some limitations to available processing power, bandwidth, and RAM. You might feel that things are running slowly, but be patient, and keep an eye on the status messages. Unless you see an error, rest assured that things are being processed in the background.

So if you are looking for a new activity to engage your audience at a public event, consider giving the Color-a-Pixel activity a try!

Additional Tips and Suggestions:

If this is a one-off activity:

    • Download and print out (in color, if possible) the Labeled Legend.
    • From a 120-color box of crayons, select those colors which are listed in the legend, and place them atop the legend, which should be positioned near the poster.
    • Have participants:
      1. select a blank grid square
      2. pick up the appropriate crayon from the legend
      3. color in that square
      4. return the crayon to its location on the legend.

If this is an activity that you plan to do multiple times with different images:

    • Start with 3 or 4 120-color boxes of crayons.
    • Label the crayons with the corresponding numbers listed here.
    • Place the label around the bottom of the crayon not the middle (so it doesn’t need to be re-labelled as the crayon is used up).
    • Because the colors of any image are mapped to the same 120 Crayola crayons, the same labeling scheme will apply to any image. Having labels affixed to the crayons themselves makes it (much) easier for folks to find the crayon that matches any given grid square

Where to find satellite imagery:

The activity can use any image file (up to 3MB; PNG, JPG, or JPEG). Following are sources for downloading satellite images of Earth:

Check out the Color-a-Pixel Activity Poster Generator 

This resource was created by Andrew Clark at the Institute for Global Environmental Strategies (IGES) under NASA award # NNX16AE28A for the NASA Earth Science Education Collaborative (NESEC).