I taught the second week in my Processing class for kids this week. Last week we focused on learning the x-y coordinate system, drawing simple shapes (ellipse, rectangles, triangles) and colors. This week I wanted to cover the basics for how users can interact with Processing.

We started with a simple circle and I talked about how this is Processing just drawing a single image on the canvas:

size(300, 300);
smooth();
fill(0, 51, 255, 140);
ellipse(150, 150, 30, 30);

Then I went over how most Processing programs actually splits the program into two parts: setup (for one-time operations) and draw (which is called over and over many times a second). I called these functions but did not explain void or what a function is. We also introduced the first piece of information from a user – mouseX and mouseY describe the current location of the mouse.

void setup() {
  size(300, 300);
  smooth();
  fill(0, 51, 255, 140);
}

void draw() {
  background(255, 255, 255);
  ellipse(mouseX, mouseY, 30, 30);
}

Here’s the sketch – move your mouse inside the canvas to see the circle follow it.

Seeing your program actually do something in reaction to your mouse is a big hook with the kids. I wasn’t sure whether I should wait till the second class for it but I think it worked well to focus on coordinates and shapes in the first class.

Once we had this program, it’s easier to talk about how the draw() function is doing two things over and over – replacing the canvas with a new background color, then draw a circle where the mouse is. What happens when we erase the line to repaint the background? The kids easily predicted that the circles would stay there. This one required some play time:

All the kids like drawing with this. But a great next step is to allow the user to choose when to draw. For that we introduced the mousePressed variable and we also get our first look at an “if” statement (only the changed draw function here, setup the same):

void draw() {
  if(mousePressed) {
    ellipse(mouseX, mouseY, 30, 30);
  }
}

Now the circles are only drawn when the mouse button is down. Again, needed lots of play time on this one as you can now easily draw pictures of faces, etc. There’s always a couple kids that MUST FILL THE ENTIRE SCREEN before anything else can occur.

Finally we experimented with using key presses (with the keyPressed and key variables) to allow the user to change what’s happening. I found changing color was pretty easy as you don’t need to introduce the concept of variables and state – the state is implicitly hidden in the processing context.

In this one press r, g, or b to choose the drawing color. Use c to clear. Hold down the mouse to draw. (We didn’t do all of those in class – some did more, some did less).

There were of course a couple kids that really good it and had time to experiment. One wanted to draw a different shape than a circle and his first request was a decagon. Ha! He settled for playing with triangles (although drawing a decagon is a great exercise in geometry) but got some really interesting variants by using a combination of fixed points and mouse coordinates. Several got interested in colors and instead of using the lists of RGB colors I had provided, they played with the color selector in Processing to make their own.

All in all I think the flow of the class went better with having a progressive set of examples to walk through and giving time to experiment between. However, I struggled with keeping everyone roughly on the same page across a pretty broad skill level. I wish I was better at teaching but I’m trying!

Next week I’ll be out of town but Jacob who’s been helping me will try to make a simple game with the kids. I haven’t planned that out yet but probably some thing like Pong or a whack-a-mole type game.