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.
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.
- Introduction to Processing – make a nametag
- Understanding shapes and coordinates
- Colours in RGB
- Mzansi messages – shapes, colours and text
- Variables – custom-made Pacman
- ‘If’ statement
- Pacman in functions
- Pacman portraits
- Keypress interactions – Pacman moves around
- Making Pacman move around – over background images
- Using a ‘for’ loop to create a pattern
- Using a pixel array and ‘for’ loop to celebrate African gamers on Africa Day
- A new Pacman game by Robin, age 12
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.