I hate to give the game away in the first sentance, but the lesson was perfect, it had to be. I knew from the moment I woke up this morning this first lesson in Processing had to run smoothly as it was their first lesson with it, their first exposure to code. It may not have been make or break with them, but a bad introduction to coding could put them off for years. Luckily their ICT teachers have been teaching them how to use good tools like Scratch and Opus, so they were already familar with things like variables so we could speed through some of it a lot quicker.
I simply talked them through the interface, how the variable, set-up, and draw areas of Processing work with eachother. The full example is below, but it’s important to note we did it in stages, purposely missing things out to cause “problems” which we set about solving.
Now bearing in mind these were 13-14 year old kids who inhabit a full on multimedia world and computers are pretty much part of their everday life, it was still nice to know that having the ability and being empowered to do even the most basic tasks in Processing (like draw a box on the screen), was still really enjoyable. It was like watching lights flicker on as I said to “experiment” with the different values in the code, but they worked it all out very quickly.
Processing was chosen for several reasons for this project.
1) It’s free and runs and outputs to most operating systems including a webpage.
2) There is also Mobile Processing which means lessons learnt in this environment can be moved to mobile phones and other mobile devices.
3) There is also Arduino which is based on Processing for controlling external devices like motors, solenoids, lights & robotics.
So in the space of an hour they learnt about integers, variables, loops, how to output to the debugging console and to load a font and display all the information to a screen. Next week we will show them how to load a graphic and move it around the screen, no prizes for guessing where we are heading. And yes I am aware all this does is count down from 300 and keeps going, thats because this small example forms part of a much larger project.
This work forms part of my Masters Degree and soon my PhD and will all be written up shortly for others to read in it’s entirety. I am also very glad that several other schools have now taken up my offer to run this 8 week after school course for their students.
Below is the code, but to get it to work, you will.
1) Start processing, and save immediately, call it whatever you want, you do this so it will create a folder.
2) Create a font in the drop down tools menu, size 24, type Arial MT, that way the code will find it and load it correctly. From the folder you just created by saving.
//Timer
//Copyright Room 1 Studios 2009
//Matthew C. Applegate – Pixelh8
int counter;
PFont fontA;
void setup(){
counter = 300;
size(300,300);
fontA = loadFont(“ArialMT-24.vlw”);
textAlign(CENTER);
textFont(fontA, 24);
}
void draw(){
background(0);
counter=counter-1;
delay(100);
println(counter);
text(counter,150,150);
}
