As I mentioned on a prior post, I started teaching a processing class to kids this past Sunday (at our local Ethical Society Sunday School). I wound up getting more kids than expected, I think about 14, between 2nd and 6th grade (and my youngest who’s a kindergartner tagged along). 4 girls, rest boys.

I started off asking about what programs they used on computers, got lots of good examples. Then I asked about all the activities they did between getting up in the morning and going to school and wrote them down as they told me ideas. Then we talked about how this was a sequence of things you were supposed to do and the order of those things mattered (brushing teeth after eating breakfast, etc). I then tried to relate that to telling a computer what to do in a program. I talked very briefly about how there are different computer languages just like there are different people languages.

I then moved into the main things I wanted to do – understand the screen as a coordinate system and draw shapes. Most of the computers we had already had Processing on them as I had emailed parents ahead of time. For those that didn’t, I had USB sticks with Mac and Windows installs on them. One of the big benefits of Processing is that it’s a single file you download and run, then it opens the editor. You type a line or two and hit play and you’ve drawn something on the screen. I can’t really imagine the process being any easier unless it was a web page (and that would have some gotchas down the line for saving files, etc).

I talked about the screen as a grid and how a pair of x and y coordinates can be used to find any point on the screen. Seems like most kids do latitude/longitude around 3rd grade in geography in school and those that had done that got the analogy immediately. Younger kids struggled a bit but caught on faster than I expected.

Next I *should* have gone over basic examples like point, line, rectangle and had each group type in a simple example and see the result on the screen. However, I had drawn out a jack-o-lantern on a grid, with basic shapes (ellipse, rectangle, triangle) and labeled the coordinates. As soon as I passed this out, they got excited and dove into it so it was a bit of a rough segue.

Some of the kids, especially the older girls, seemed to immediately get it. I know one of the girls had done some Scratch programming, and a few of the other boys had done Logo and Mindstorms. I tried to steer the older kids to figure out the program from the drawing and a list of commands. I gave the younger kids the program and had them type it in, trying it along the way. When the first ones finished, I had them go back and add color and then had them start drawing their own picture on graph paper and programming it. I was glad to have all the extra activities prepared.

One of the things I most wanted to have happen for every kid was the experience of typing something, hitting play, and seeing it come on the screen. One of the younger ones was saying “This is so boring…” and 2 minutes later he got his first feedback and same kid said “AWESOME.” That feedback cycle is the hook and it’s really easy with graphics.

Miscellaneous thoughts:

• Due to not enough computers, we grouped up – I did not anticipate the problems that would create in kids fighting over typing on the same computer. It was all ok, but hopefully we’ll have more computers next week.
• The younger kids have a tough time just typing (especially punctuation like parens) – 2nd graders did it, but it was much harder and took a lot longer.
• It would have been better if I’d had a series of progressive exercises. If they were written down, the different groups could have progressed at different rates.
• The default font size in Processing is 10 pt, which is too small. :) But other than that, I had no regrets about choice of language
• I recruited a friend (thanks Jacob!) to help out in answering questions and that was essential.

Next week I’m going to tackle the basics of user interaction – responding to mouse movements, button clicks, and key presses. To do that, we’ll also see the standard Processing structure of draw/setup functions and probably need to talk about variables a bit.

Oh, if you want your own Processing jack-o-lantern, here’s the program I wrote:

// set screen size
size(320, 260);

// set color to orange and draw pumpkin
fill(255, 153, 0);
ellipse(160, 130, 200, 160);

// set color to black and draw mouth, eyes, and nose
fill(0, 0, 0);
rect(130, 170, 60, 20);
triangle(120, 80, 100, 110, 140, 110);
triangle(200, 80, 220, 110, 180, 110);
triangle(160, 130, 140, 150, 180, 150);

// set color to green and draw a stem
fill(0, 102, 51);
triangle(160, 30, 150, 50, 170, 50);

Here it is, created from the Javascript version of Processing at Sketchpad.cc: