Approximating Physical Media

Approximating Physical Media with Coordinate Grids

How well does this... ...approximate this?

In the next unit, Unit 4: Digital Media Processing, you will investigate different ways that bits may encode different types of media. Additionally, you will learn to use a new, more powerful programming language called Processing to perform image processing. As a teaser, this activity includes a pre-written application in Processing that allows the user to create a point-by-point approximation of an image.

The Processing Application

First, you will have to open the Processing application, which should already be installed on your computer (the icon for Processing resembles the image to the right). If you cannot find the Processing application, search your computer for “Processing.” If the Processing application has not been installed, you will have to download it from the Processing Download page. Note that you do not need to donate anything to download Processing—simply click the $0 option and then Download.

Activity Instructions

Next, download this activity’s Processing source file:

Click to Download: PictureGridDrawingActivity Unzip the file named PictureGridDrawingActivity.zip and locate the .pde file in the resulting folder. Open the source code within Processing by selecting Open in the File menu and navigating to the PictureGridDrawingActivity.pde file. As Processing is a text-based language, the code will look much different than Scratch. However, the constructs are much the same.

  1. Take a second to browse through the source file, and look for any keywords that you may recognize from Scratch.

  2. To execute the program, press the play button.

  3. Click Upload Picture, and choose an image file to load into the program window. Next you will “digitize” this image by redrawing it along a grid.

  4. Select Toggle Grid, and with the grid on, click carefully on grid intersections in order to place points. Place points around your image in order to represent it as best you can. To remove an unwanted point, click it again.

  5. The Toggle Line function will cause the next series of points placed to be directly connected with lines. Note: Clicking dots will toggle them on and off (as a sort of “UNDO” feature). This means that there can only be one line leaving and entering each dot.

  6. Try to create a point-by-point representation of your image simply by creating the points that define/outline its major features.

  7. Toggle both the grid and the image so that they are not shown. Show the result to some of your peers. Can they discern the original image from your representation?

  8. Try it with a new grid size. Adjust the granularity of the grid with the +|- buttons. Attempt the drawing/guessing activity once again with the new grid. How does this change the effectiveness?

The short tutorial below demonstrates how to run and work with the source file in the Processing application. Note that this program has a limited set of features. It may not perform every task you would like it to in order to best create your representation. You will have to experiment with the program to create your representations.

https://www.youtube.com/embed/P37_1h_kJbY