Processing – Getting Started

The Processing Development Environment

Processing is an open-source programming language built around Java, with a simplified syntax and Integrated Development Environment (IDE).  It was developed by Casey Reas and Benjamin Fry at MIT Media Lab in 2001, for the purpose of enabling visual designers and artists who weren’t programmers to learn the fundamentals of computer programming using electronic sketchbooks.

I think I first came to this coding language after watching my son code a project for university using Java, about the same time the ICT working group at my school made a decision to install Po-Motion in our sensory area following successful trials in classrooms (more on that in another post). Feedback on Po-Motion was good but a few comments had been passed about how it would be great if we could make our own sensory type apps. I stumbled across Matt Pearson’s site AbandonedArt.org shortly after this and knew I was hooked.  There is a restrained beauty to much of the Generative Art produced in Processing and after showing colleagues, we felt that students with autism would engage with it. Equally important it seemed to me, it would be possible for us to start coding in Processing to produce simple Interactive applications, for our students to use.

If you want to get started and you haven’t got hold of it already, you will need to download Processing from here at processing.org/download/.  At this time I recommend the 1.5.1 stable release with Java (although most people probably have Java installed on their machines).  The release is available with or without Java for 32 bit Windows, Linux and Mac OS X, so select the flavour of your choice, download, scan and install. I would accept the default options for installation.  Navigate to where you have installed Processing and run the program.  If everything went well you should be presented with the Processing development environment, similar to the screenshot above but minus the labels I’ve added to show the parts of the IDE.

If you can’t wait and have Processing open, enter the following in the text area:

ellipse(50, 50, 80, 80);

The “Run” button

Once this is entered click the button that looks like a “play” button on the left end of the toolbar area

If everything went well this is what you should see.

Processing the default “Display Window”
showing the result of entering ellipse(50,50,80,80);
into the text editor.

Ok I’ll be honest with you, a line of code producing a white ellipse might leave you a bit deflated for your first tutorial attempt but stick with it as its great stuff to get started with and if you feel the need to pick up something extra, I can’t recommend this book too highly, especially as it is short and relatively inexpensive.

Reas and Fry on O’Reilly, “A hands on Introduction to making interactive graphics” an excellent little book that does exactly what it says on the cover

There are several things going on that Processing is doing for us, which I will attempt to explain.

The line of code above means draw an ellipse with the following parameters, which are declared in brackets, the center is 50 pixels from the left and 50 pixels down from the top, (this is the ellipse x,y coordinate position) these values are separated by commas, the last two values make this ellipse have a width of 80 pixels and a height of 80 pixels, (so in fact it will draw a circle).  If you got a neat white circle on a grey background in a small box, congratulations as you might well have written your first piece of computer code, if you got an error, don’t worry,  as you will get used to seeing these especially as computers are fussy about the punctuation such as commas, missing brackets and the semicolons at the end of lines.  The semicolon ; after this piece of the code is important and tells the program to carry out this instruction, try to leave it out and you will see an error returned in the console area of the IDE.

There are two other things happening here which we didn’t have to code, by default Processing returns a display area of 100 pixels by 100 pixels unless we declare otherwise and sets a grey background unless we specify a different colour, changing these values are covered in the tutorials on the Processing website.

Try replacing the ellipse part of the instruction with line or rect so it reads   line(50, 50, 80, 80);           again click the “Run” button in the toolbar and observe the results.

I doubt that producing white ellipses or lines will cause Matt Pearson and Bill Gates to lose a lot of sleep but from an educational perspective in SEN it is golden, as additional code changes allow you to create interactive applications that provide the opportunity for shape and colour recognition, number counting, grouping and size distinction as well as allowing interaction.  All of this helps build confidence and the opportunity for communication.  Starting to code your own applications to engage students who find communication difficult can be done by simply adapting the code on the Processing tutorials, where you can add more colour, shapes, interaction and sound to aid in student engagement, or seek out some, that other coders generously provide for download which can be used for engagement and interaction.  A remarkable site where a lot of these are available is openprocessing.org, which has some sketches made by designers and members of the Processing online community.  Please check it out, there are a lot of sketches on the site that are inspirational and can be enjoyed for their own sake.  Hopefully this post has encouraged you to download processing and start the tutorials and perhaps even have a go at coding something yourself.

There are some excellent tutorials on the processing website to get you started at processing.org/learning/, don’t be put off, dive in with the “Getting Started” tutorial and start to produce your first sketches.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s