Giving a Processing.js Workshop

Last Friday, I gave a workshop on Processing.js.  This workshop was aimed at girls of around 15 years of age with little to no programming background.  The challenge for this workshop was the very limited amount of time that was available (40 minutes).  I  thought I would write about my experience giving it and some changes that I would make the next time I did it.  If you are interested in the material I made for the workshop, its all on github and you can get it here.  Note that I will be making changes to it in the next few days(see below)

What I wanted to do was something cool that could be done in 40 min with girls who may not have done any programming.  I was given a lab with standard equipment (which did not include the Processing IDE).  There were two options for doing a workshop like this.  I could start from scratch or I could start with something that could be built on.  I decided on the latter because I thought being able to get something that looked really cool was important.  In the past I have helped with workshops for the same age/gender group and what I learned was that starting from scratch, not much would get done.   For most programmers,  tasks like putting together a simple web page or writing a simple script is easy even if we have never used a particular language. It is far too easy for us to underestimate how much time it would take for someone to be able to write a simple program.   Programming requires a certain amount of discipline.  Even languages like Processing which were designed to be easily accessible requires a certain syntactic awareness (spelling, capitalization, placement of ;’s and }  etc.) and all too often it is easy to make simple typos.  As we were using a plain text editor, knowing how to find syntax errors by sight was also important.  I also felt that you wanted to have a very specific goal.  “make a web page” or “make an animation” is too broad. Even something as simple as search for an image to put into a page would eat away at that time all too easily.

Thus, I decided that I wanted to have a very clear goal on what they will get when they finished.  I decided to have them put together an animated picture frame (essentially a slide show with an animated background).   The idea was simple to understand and it was clear what the goal was.  I got some photos to put into the album from my friends Raymond Wong and Samson Chan who had picked up photography as a hobby.  I wanted pictures that were pretty and fairly neutral in topic and both had recently taken pictures at various gardens and flower shows.

I then wrote a bunch of classes that would animate various objects.  In the end I had the following collection:

  • polkadots   – a circle that moves around the page
  • triangles – a triangle that moves around the page and spins
  • fireworks – essentially exploding set of particles
  • flowers – a flower shape that floats downwards
  • poem – lines of text that would be drawn diagonally downwards.

Most of these were created with random values for things like colors and positions by default.  These values could be changed via functions but could also be left alone. The picture frame could then be created by simply instantiating a bunch of these objects and drawing them in the draw() function.

My intial plan was to have a picture frame already done and have the students change things like colour of the flowers and so on.  You can see what I had thought would be a good starting point by looking here.    As a programmer, what I had done was of course create a sketch with an array of random polkadots/triangles/flowers/fireworks some text.  I handled all the initialization and drawing with loops.  The animation is busy which is ok because that is one of the things we could change.

However on the way to workshop this morning I started thinking some more about this… and I realized that I had made the mistake of being overly complex.  I was not keeping it simple because to understand something like arrays and loops took an extra step in the understanding of how programs work.   Its not necessarily hard to explain these but in 40 min, this was maybe a bit too much to ask.  Therefore in the last minute, I decided to change the main sketch.  Instead of starting with the kitchen sink, I decided to start off with a simple sketch that only ran through all the pictures. (essentially erased all but 5 lines of code.  This turned out to work pretty well and the feedback seemed positive (I’ll have to check the official feedback later 🙂 ). The students were able to add single instances of the different objects and modify things like colour or number of petals on the flowers and so on.

Here are some changes that I would make to make this workshop run smoother next time.

  • change the text that was the default text for the “poem” class (going for the code poets theme… I had used a version of the initial main sketch source as the text) and that looks very confusing for the students to change because it looked like code.
  • change the way that text was added (separate the data from the code more… currently its all part of add() statements).  It would be better if I had declared a bunch of strings or read the text in from a file because that would have made it easier for the students to modify the text
  • don’t mix american and canadian spelling of the word “colour”.  I had named all the functions to change colours on the objects setColour().  unfortunately I made the mistake of having the function take color as the argument.  Thus to call the function, the students would have to write:  obj.setColour(color(…));   The different spellings make it extra confusing.  The better approach would be to have the object just take 4 floats and set the colour inside the function

Mostly the changes are not difficult to make and I will be making them over the course of the next week.  I will also update the workshop instruction document to match the changes.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s