Coding with youngsters using pgzero on RPi: Part I

Source

An eager young coder on Step 3

Some of you will know that several-times pyweek winner Daniel Pope has put together a simple framework called pgzero to sit on top of pygame. It’s Python 3 only and is especially aimed at educational use, and we spent the last London Python Dojo coming up with examples which used it.

Its main selling point is that it supplies behind the scenes some of the boilerplate code you’d otherwise have to write to get pygame up and running in a game loop. The simplest valid pgzero game is an empty .py file! From this, pgzero will produce a blank window of the default size, which will exit if you press Ctrl-Q. Adding a few “magic” constants will get you a window of a certain width & height, with a title and its own icon. After that, just define draw() and update() and add on_<event> handlers. And you have the makings of a game. There’s a built-in Actor class which essentially acts as a sprite, and easy-to-use image & sound loading. Plus some other goodies we didn’t use.

My team was responsible for the Breakout clone at the Dojo and I took it away and demonstrated it at the next evening’s Twickenham Coding evening, a friendly meetup in a room over a pub attended by teachers, code club leaders and educators. Altho’ we’d developed on my Windows laptop, I’d already planned to use the Raspberry Pi, about which more later, and I was very pleased when it ran on the Pi without a glitch at the Twickenham meetup. The message from the teachers I showed it to (mostly at the upper-Primary range) was: still too much code. But I got some useful feedback and set to work to adapt it.

My plan was to use pgzero and the Breakout game as the basis for a short series of workshops at the boys’ club I help to run in west London. But the lads aren’t into coding as such, and I knew from past experience that they could easily lose heart and get distracted if they didn’t instantaneously produce a Call of Duty lookalike. So I aimed for two things: cutting down the code complexity so there were as few concepts as possible to get across; and breaking it up into chunks which I could present one at a time, each building on the code from the previous chunk.

The result, for the impatient, is in the piece-by-piece branch. But first, there are some yaks we need to shave.

The setup

Hardware

I was keen to use the Raspberry Pi for this.

  1. It’s cheap and so the club can afford to buy several of them; and one or two of the lads have their own
  2. It’s quite different from the (often literally) black box computers they’ll generally use so they don’t immediately see it as a mere entertainment source (ie they’re more likely to enter into a spirit of producing rather than only consuming)
  3. In later sessions I hope to introduce some simple electronics via the CamJam EduKit and similar things where the RPi excels
  4. It’s a Raspberry Pi! Everyone’s talking about them. Parents are keen on them. It creates a buzz around the activity which would be lacking if I’d used some other, equally capable, platform

We already had one RPi, an original Model B; someone tweeted that RS had Model B+ going at £16 each which is well within the budget I’d set for a couple more. Fortunately we have a number of monitors (VGA), which would otherwise have been beyond us to buy. The excellent PiHut also had the necessary accoutrements at affordable prices.

As everything was taking place in our club building, which isn’t networked, I used a spare laptop setup with lubuntu to run dnsmasq for a very easy local DHCP / DNS solution. The Pis were all wired to a simple 10/100 switch.

Expecting about 6 people, I’d planned to run in a classroom mode, with my laptop able to view individual screens if anyone needed help. I’d also thought of having my screen “broadcast” to theirs. I was a little surprised that there doesn’t seem to be a definitive way of doing this. iTalc2 looked promising, but needed a fair bit of setup. There are several commercial solutions, so presumably schools are able to budget for this kind of thing. In the end, I installed x11vnc on each of the RPis. But with only 4 boys in the end, and another tech-savvy leader, it was more sensible to physically wander around to help. I do plan to look into the reverse: broadcasting my screen. We don’t have any kind of projector at the moment, and in any case I’ve never found that a satisfactory solution for showing code.

The Software

The focus of the first sessions was the use of pgzero to produce the simple Breakout clone mentioned above. But first I had to bring the complexity of the code right down, taking advantage of the fact that pgzero hides away some of the messier boilerplate. These were first-time programmers and I would be throwing a lot of new concepts at them in a fairly short space of time. (Fortunately they’re all in Years 8 to 10 at school so I didn’t have to explain too much about coordinate systems and vectors).

Responding to an issue on the pgzero tracker, I’ve submitted a PR for a pure Python implementation of the pygame Rect class. The ostensible need was to allow for floating-point size and position changes. But a secondary effect, of more immediate use to me, was the possibility of adding arbitrary attributes to a Rect instance, such as colour and direction.

So the boys were working off my fork of the pgzero repo, installed via “pip install -e .” to track the development version. They were also unwittingly working off the piece-by-piece branch of my fork of the breakout code, although I was feeding it to them a piece at a time. I’d made use of the pgzero Rect to be able to add colour and direction as attributes, which did away with the awkward global variables of the original codebase. The result, though I say it myself, is about as stripped back as you can get while still actually doing something. The global blocks setup is a little clumsy, but the alternatives I tried were no better.

The Workshop

I’d set up our own Raspberry Pis and for the one lad who brought his own I did the necessary config while they were playing football outside. I persauded them all to close down Minecraft (”Look! It’s got Minecraft!”) and Mathematica (it’s got a shiny red icon, just asking to be pressed…).

I got them all to open a terminal window and cd to ~/work/breakout where I’d cloned and then started a new branch with no files. They ran IDLE3 and started a new file called “breakout.py” (or “Breakout.py” or “bereakout.py” depending on the skill of the typist). I got them to run pgzrun against their new file and use Ctrl-Q to exit the resulting window. So far, so good.

From this point on, I fed them one step at a time on paper from the piece-by-piece branch. I’d considered other options: projecting the code, having them “git checkout” to the right tag, even reading it out or live-coding it myself. But this seemed the most trouble-free option and, basically, it worked.

After they’d got each update working, I highlighted a few new or repeated features. (”That’s a name; you defined that earlier”, “That’s a function; you run all that code in one go by using the function name”) etc. One of our other club leaders, Albert, is also a professional coder (PHP) and was very able to help so between us we kept the pace going despite the variations in typing ability.

At the end of the first session they’d reached step 6 out of 12.

Takeaways

What worked?

  • The pacing was basically about right. One of the steps had a little too much code in it, but I needed to have a change of some sort at the end of each step, and there really wasn’t anything I could do about it
  • I was very pleased the way in which the boys worked out the obvious typing bugs; they very quickly spotted when uppercase/lowercase was wrong or when they’d misspelt a name. I very rarely had to point out anything obvious.
  • Step 4 (when the bat responds to the on-mouse-move event) was the winner. Simple as it was, the boys loved the interaction. When someone got it slightly wrong (bat.centrex = y) causing the bat to move horizontally as the mouse moved vertically, they all wanted to try it. When I suggested they swap both coordinates (bat.centrey = x; bat.centrex =y) they’d have stayed there for ages.
  • I encouraged them to change things (the screen size, the colours etc.) and I was pleased that one lad, after I’d explained how names work, changed his “bat” and “ball” names to something else — altho’ this caused problems later when I was helping him debug as I couldn’t tell which object was which!
  • Although I’d had planned for a two-hour session, the 90 minutes we ended up with was about right

What didn’t work?

  • I should have brought step 4 in a little earlier, perhaps creating the bat before the ball and then letting it move
  • Several times I had to draw things up on the whiteboard to illustrate the coordinate system etc. This probably would have worked better with a screen broadcast from an IDLE session.
  • I had intended to have them try things out in IDLE, starting from a “from pgzero.builtins import *”. This didn’t really happen, although I did get them to do some experiments with the modulo operator when explaining the colour looping for the blocks.

Conclusion

Overall, I was very happy with the way it worked. I had four non-programmers dive in and basically enjoy themselves. I’m hoping to use the next session to finish the game and get them to play around with bells-and-whistles (make it go faster, have a bat on each side-wall etc.). After that I hope to connect up some simple LED / buzzers to react to the game.

FWIW I’d love to do a networked version where the ball disappears off one screen and appears on the next. Each person’s ball could be colour-coded and a ball will only destroy blocks of its own colour, so you have to use balls from your neighbour’s games to finish your own. Or something. I love the idea of the social aspect that would introduce, as well as the fact that someone could have two or even more balls in play on their own screen.