More Processing … this time for Kids

mapcoords mapcoords ms_pacman

Mozilla is running a free online collaborative course to explore new ways of teaching digital literacies through making and learning together. It’s called Teach the Web This leads up to the Mozilla #makerparty, which celebrates the web and making, two of my favourite things.

I’ve joined a group who are discussing ‘Creative Coding with Canvas’ and so am hoping to get some new ideas and tips about how to teach coding-shy design students and newbies about the HTML Canvas element. As my contribution to this group, I thought I’d share an introductory programming course that I’ve been running with a group of teens at the Ikamva Youth branch in Makhaza, Cape Town.  They call themselves the Ikamvacoders – what an inspiring group of young people.

Hard-working Ikamvacoders take a break
Hard-working Ikamvacoders take a break

The course introduces some basic programming topics using Processing and Processing.js, a language designed for visual expression. Processing is based in Java, but now makes it easy to export procedural art, interactive sketches, simple games and animations to Javascript, via processing.js, which uses  the HTML5 canvas element. Processing now also provides a very effective and easy Android mode.

Learning Processing from Pacman

Processing comes with absolutely beautiful tutorials, clearly explained examples and extensive online resources. In my experience, although these resources are aimed at non-programmers, they are generally pitched a bit high for absolute beginners, particularly for kids. The Ikamvacoders asked whether they could learn how to build a simple 2D game. This led me to develop some absolute beginner Processing tutorials around a Pacman theme.

As you’ll see the tutorials are still quite sketchy, and I hope to have some time to put in some extra explanatory details which I handle verbally in my classes. But the examples all work and they should provide a good starting point for anyone who wants to take this visual approach to teaching programming.

The Ikamvacoders also want to make web portfolios and I’m looking forward to introducing them to some of the new Mozilla tools, so that they can start publishing their own work using tools such as Thimble and Popcorn Maker, which look perfect for kids and teens working at this introductory level.

Future goals – mobile Processing

I’m extremely impressed with how the Ikamvacoders have taken to  Processing, but its frustrating that they have so little access to computers, so little time to practice their skills. Overall my objective is to investigate mobile interfaces to developing Processing sketches. These need to work on the phones even when they are out of airtime (this happens a lot of the time). This kind of app will allow them to tinker and mess around more,  even when they’re not at the computer.

If I have time, I’ll also post about a similar course I run with media students at the University of Cape Town, where the focus is on webmaking for journalists.

Programming with Processing – CFMS course

I convene a Production Programme in Interactive Media at the Centre for Film and Media Studies at the University of Cape Town. The second semester of the course centres around an Introduction to Programming unit. This is definitely the most difficult part of the programme for the students, as it is where the course shifts from a design course to one which emphasizes the need for students to grapple more seriously with the development, systems and coding of online media.

When I started teaching this course, I taught ActionScript. This was easy for students in certain ways, but I never felt it really produced the kind of technical learning that I aimed to facilitate. Apart from the cost of the software, the fact that Flash was a closed proprietary system did not assist the students with learning from other programmers’ code. The visual interface also meant many code-shy students were able to avoid really engaging with scripting, and the distributed code could be extremely confusing. Finally, the programme is built for industry workflows, and thus also assumes that the user is a skilled scripter who is familiar with concepts such as object orientation. Last year, with the assistance of Lyndon Daniels, who put together some open content learning materials I ditched Flash and shifted the curriculum to the Processing language.

Robot mini game by Paige Aupiais
Robot mini game by Paige Aupiais

This alien game by Paige Aupiais is an example of the kind of mini game which students are able to develop after four weeks (16 hours) of classes in Processing. While it is not a playable game just yet, it does show how Processing makes it possible to master basic concepts such as variables and operators, functions, controlling program flow with loops and conditional statements, and even objects and classes  (You’ll need to have Java installed on your machine if you want to try out Paige’s game.)

So where did this wonderful little language and ecosystem originate?  Processing is a language that was developed by Ben Fry and Casy Reas, initially as part of an award-winning project intended to introduce programming to visually trained artists and designers.

Processing works as a kind of wrapper for the Java language  which simplifies students’ first experience of programming and also makes it (relatively) easy to program visual output. This makes it an excellent introduction to programming for artists and designers since it immediately gives complete novices the ability to generate graphical effects and interactions. (In Processing, Hello World is a one-line sketch which draws a shape such as a line, ellipse, or rectangle.) Unlike other beginner environments though, when the training wheels are ready to come off, students have access to the massive resource of libraries developed for the Java language, such as for example the OpenGL libraries, and to the physical computing possible with the Arduino micro-processor.

Another key advantage is the active and helpful community centred around the site, the detailed reference materials, demos, and downloads. This community is particularly helpful to beginner programmers because many other users are novices who are likely to be asking beginner questions.

Basic programming concepts do not change very much between languages and so the course provides a foundation of ‘procedural literacy’ for keen students who want to launch into an exploration of other languages or of scripting in object-oriented languages.

The Return of Pacman by Robin Combrink
The Return of Pacman by Robin Combrink

That said, Processing has several disadvantages in comparison to Adobe’s Flash, another environment where non-technical beginners often first dip their toes in the water as scripters. The absence of a visual interface or timeline for Processing means it is more suitable for producing procedural images than for conventional drawing or animation workflows. Another is the disappointments and difficulties associated with publishing Processing sketches. The need for a Java plugin (less common than the Flash player), the slow loading times and relatively processor-intensive Java applets are all additional hurdles for beginners and their users.

Here the Processing.js project (a sister project to is a response to the widespread support for Javascript by most browsers. Processing.js conforms to web standards, and is immediately viewable in modern browsers without the need to install any plugins. The example above is a mini game created by my son Robin (twelve). He has recently taken an interest in programming (mostly by looking over my shoulder as I prepare for class) and wrote this little game. I published it for him as a Processing.js sketch, using the HTML5 canvas element.

Source code: here

Built with Processing