Processing for Kids : Part 3

Setup and Draw.
Teaching a 12-Year Old to Do Something Creative with Processing.
By JD Pirtle.

Part Three: Working with Images

Last week, we showed Elonzo the basics of using the Minim library to load and trigger sounds we recorded using various objects we shook, banged and tapped. This week, we did something similar—importing images we drew with pencils and markers, using them to make a simple animation triggered by mouse events.

The workflow of beginning with the hands-on creation of assets that are then used in Processing seems to work well with Elonzo’s personality and age. We sat down with paper, pencils and markers to draw two states of a basic animation, which we planned to trigger when the mouse is pressed. Before we got started, I gave the example of two drawings of an eye, one open and one closed, with the goal being to press the mouse to switch between states. Given that Elonzo is very interested in games, I hoped that the process of turning basic drawings into interactive digital events would give him some insight into the basic components of video games.

I spend most days surrounded by computer scientists, technologist and digital artists, so it’s easy to assume that there’s a common set of skills that everyone has. Obviously, this is not the case everywhere, particularly if access to computers is minimal or non-existent or if digital media creation isn’t part of school curriculum. Therefore, we didn’t want to assume too much about Elonzo’s ability or experience with creating and manipulating digital images. I taught him how to scan the drawings when they were complete and then opened the scanned images in Adobe Photoshop. We had hoped to only work with open source tools, but I’ve also endeavored to give him a realistic look at how I work. Regardless of how much I admire Gimp, I would never use it to extract the background of an image when Photoshop is available. The process of doing so in Gimp is lengthier and kind of tedious. I demonstrated how to import images into Photoshop, crop to the size we wanted and erase the background. We saved these and dragged them from a folder into our Processing sketch window.

Just as we had in the previous weeks, we started by looking at an example that had some of the functionality we desired in the sketch we would make for our images. I opened the “Sprite” example found in Basics>image. This example has some easing to cause the image to slowly follow the mouse cursor, which is really nicely done but too complex for where Elonzo is in the learning process. We went through the sketch—cutting and pasting what we needed—and talked about what is happening in each line. We briefly discussed the PImage datatype, but focused on mouse interaction and how to switch between the two states of our drawings.

Here’s the code for our basic sketch:

//basic image and mouse example
PImage pop1;
PImage pop2;

//stuff to do once
void setup() {
 //tells the computer how big the screen is
 size(600, 600);
 pop1 = loadImage("pop1.jpg");
 pop2 = loadImage("pop2.jpg");
 //draws the image at the center

//do stuff forever
void draw() {
  //colors the screen
  //if you press the mouse, this pic shows
  if (mousePressed) {
    image(pop2, mouseX, mouseY);
  //shows image if you don't press the mouse
  else {
    image(pop1, mouseX, mouseY);

And an animated GIF to show the results (a popcorn kernel popping)

I’ve been wondering how much Elonzo is retaining and understanding, so I decided to have him comment out the sketch to see what he knows. The comments he wrote (in the code above) demonstrated that he has been listening to what we’ve said (despite the constant temptation to open a browser and Google for web-based games) and seems to understand the mechanics of this very basic sketch.

We are past the halfway point in the mentorship, and his final exhibition is quickly approaching. We will be actively working on his basic game for the duration of the mentorship, introducing new concepts as they arise. It’s hard to say what Elonzo will take away from all of this, but I hope that the experience he’s having with this will give him a brief and lasting glimpse from the perspective of the creator (as opposed to the user or consumer). Chicago has a high school dropout rate of around 50%, and although I’m no expert on elementary/high school education, I imagine that kids Elonzo’s age (12) are at a critical scholastic juncture. I’m optimistic that the experience he’s having with us will influence his course of study in the next few years and perhaps some decisions he makes.

>>> Read Part 4

Teaching & article by JD Pirtle.
I feel that artists should lead humanity through the creation and utilization of the most current and yet-to-be-invented technologies and processes