Skip to content
October 18, 2009 / Ben Chun

Beyond Programming

I’m really happy with my Introduction to Programming class this year because I feel like I’m finally finding a balance between specific technical concepts and broader design ideas. Not only is this important for keeping the class interesting, but it’s also how I actually want to do my work. The goal is not to turn kids into assembly-line coder drones. My purpose is not to teach a particular subject. What I actually want to share is a general way of thinking and approaching problems. The way of working that I want to teach about can take a variety of forms and it appreciates the many facets involved in a complete solution to a real-world problem.

Computational thinking and analysis is a tool my students can apply everywhere, all the time. But we have to understand that traditional design disciplines as well as newer fields like experience design and HCI play crucial roles along with programming in making computers and programs and networks have meaning and significance in our lives. I’ve wanted to convey this since I started teaching CS, but haven’t started to feel successful until this year.

It’s been fun to bring this idea to life in my class. I’m using Processing which is a great environment for teaching programming because it makes visual output easy without dressing up the bare text of the code. Too many tools explicitly designed for teaching programming try to hide the code inside visual metaphors or hide abstract syntax in natural-sounding languages (that inevitably fall into the uncanny valley of comprehension), when I think that succinct code like you’d find in a widely-used programming language is actually the more easily graspable representation.

It’s just that people also need more than that. They need to see the result of changes to the code in some visual terms, and Processing does that admirably. You type “ellipse”, and you’re going to see an ellipse. Add a “fill” command, and you’ll see the color change. Two lines of code and you’re learning visually. What could be a more direct way to understand that we’re giving the computer instructions, and that those instructions have to follow a specific format? The great thing is that we never have to abandon or tear down what they learn on day one. Even as we advance to defining our own functions and using fancy object-oriented design features of the language, “ellipse” is still the way to draw an ellipse on the screen. Oh, and the syntax is pretty much Java, so it gives them a head start on preparing for the AP Computer Science class as well.

After getting through some of those basics at the start of the year, I showed Luxo Jr. as an example of how a non-human character can create emotional expression and identification. Then we played with the Tickle example in Processing. I challenged the students to try to create something that was emotionally expressive without using human or animal characters. They learned about programmatic animation (repeated drawing) but there was also a non-technical goal to refer to. There were feelings. There was a point. There was a reason to work with the code. And I made teenage boys talk to me about emotions. So there were several points.

Having multiple levels of depth to a project also helps immensely with differentiation. If I ask a class of students to simply meet a checklist of programming tasks — as I’ve done in the past — then the top students will race to finish and I have a classroom management or at least engagement problem on top of the effort it takes to try to drag some of the others through. It’s stressful, and stress is the vibe-killer. My classroom works best when I’m happy.

Given a larger aesthetic or artistic challenge, those top students still want to compete, but will tend to take as much time as is available to try to out-do each other with more complex or skillful work. I’ve also noticed that sometimes the “top” students have trouble with the more open-ended creative assignments, and I push back on them when they ask me for an idea of what they should do. I either make up something off the top of my head that seems insanely hard or I just shrug and let them struggle with it. For those students, it’s good for them to struggle every once in a while. It keeps them human. They almost always come up with something cool.

The week after Luxo and Tickle, we played with jacksonpollock.org (and some other similar sites) to see how programmers can create environments for creative expression. I had the kids write about how limitations and constraints inspire creativity. If you have a tool like Photoshop in front of you, it’s possible to create nearly any image. But there are so many options that it’s hard to know where to start. On the other hand, if you have paint dripping off a virtual brush from the moment you open your eyes, you really can’t do anything but move it around. Instant engagement and instant creativity.

Their assignment was to create an expressive environment — some kind of visual output linked to the mouse movement — that deliberately constrained the user in order to help inspire creativity. Of course, even after I said not to recreate MS Paint, I had a couple kids do exactly that. Which was okay from a programming perspective since it showed their skill development, but I dinged them for it anyway and told them they had to add some kind of a twist. One student made it so the brush will change size on its own while you paint. Another decided to restrict the color palette. But the creations that got the most peer recognition were much more original.

I’ve always wished I had taken classes from or worked under John Maeda when I was at MIT, and I realized recently that if I had done that I might have met Casey Reas and Ben Fry while they were first creating Processing. I wasn’t very focused at the time, and I left Boston when I graduated in 2000 to come work for Macromedia on Flash. I thought I was going to be building a tool for computational artists. It turned out not so much, and it took me another few years to even learn what it meant to be a professional programmer in a corporate environment.

But the ideas that Maeda, Reas, and Fry made salient are central to what I’m trying to accomplish now. Using visualization to explore the relationship between computation, complexity, and beauty is still incredibly intriguing. The success of Processing makes it possible for a high school class in 2009 to take that exploration much further than I did as an undergrad just ten years ago. Of course the goals are different, and I’m not under the impression that they’re going to learn how to program in 7 days. But let’s also not underestimate the power of the tools and the environment to help make learning easier and ease those initial frustrations that turn off so many people from computer science. The tools matter. Processing isn’t just a free, cross-platform, open source, Java-syntax programming environment — there’s also a runtime called Processing.js that lets you display your creations in a browser, and a WordPress plugin called Processing JS that makes it easy to paste code into a post and just have it work.

Once I discovered these tools, I really hit my stride. I started playing around with programming ideas for myself, for fun — something I haven’t done for years. It started with an attempt to recreate the Jackson Pollock simulator in Processing, and has resulted in what I think are a few really compelling assignments exploring repetition and variation (as a visual design principle and as implemented by classes in object-oriented programming), the massive scale of computation (enabled by the use of loops), and emergent behavior (due to combining simple behavior of objects with loops and arrays). This series of assignments not only leads the students through fundamental concepts in control flow, data structures, and object design, but also gives a visual reason to learn each concept up front, and lets them explore larger thematic and creative ideas while learning syntax.

One student actually asked me — after learning about classes and for loops, but before I introduced arrays — if it was possible to use a number as a variable. I asked him why he wanted to do that and he explained that he wanted to create new instances of a class using a loop, but he kept running into a problem because he couldn’t figure out how to get the variable he was assigning to change within the loop. If you’re a programmer, you know he was asking about arrays. He just didn’t know the word for them yet. I told him that we’d soon learn how to solve his problem, and while he went away hungry to figure it out, I left the conversation floored. When was the last time you had a student anticipate the next topic you were going to teach before they even knew it existed? He asked me a couple more times that week to show him how to use arrays (he figured out what they were called) but I managed to keep redirecting him into the current assignment. I knew that when we finally got there, he was going to be excited. But I didn’t expect him to say after class that it was the best day of his life because of what he learned.

Yeah, he’s a little dramatic. It still feels great. My students will be sharing their emergent behavior projects with each other on Monday. And then we’ll start the first video game design project of the year. Stay tuned.

3 Comments

Leave a Comment
  1. Eric Nguyen / Oct 18 2009 9:27 pm

    Awesome, Ben. I love getting the compressed download on everything your class is up to. Congrats on hitting your stride.

  2. Ben Chun / Oct 19 2009 8:39 am

    I just re-read this and realized it’s a total Processing fanboy post. Hopefully the other part about teaching something bigger than programming isn’t lost in the pool of drool-aid.

  3. Marc Bejarano / Oct 19 2009 10:01 pm

    hi, ben. don’t be so hard on yourself. i liked the post and it’s inspiring to see a fellow alum actually doing something important with his skills. teach on, brother! :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: