Introducing Processing

Its been more than a month since my last post. Second semester has been busier than I expected, leaving less time for writing than I had hoped. Now, I am a big fan of turtle graphics. It is great for teaching introductory programming, and works especially well with younger students. However it has its limitations, and I’ve been wishing for a while now that there was another graphics system that I could incorporate into Skulpt and the Runestone toolset. Last weekend, I got sucked into a bit of hacking that has turned out better than I had ever hoped.

I’ve certainly heard about the processing language over the last several years but I’ve never taken the time to look into it, or any of the derivative implementations such as processing-js, pyprocessing, or the like. Finally I decided to take a peek a few weeks ago, and I was immediately hooked. Since then I’ve been working on making processing-js accessable as a module from our browser based implementation of Python known as Skulpt. Here’s a quick example of a simple program that is animated and interacts with the mouse. Just click the run button and move your mouse around in the canvas.

A Simple Animation

Programs that use the processing module all have a similar structure to them.

The setup function can be used to initialize the size of the canvas, along with the frameRate and things like stroke color and stroke weight.

The draw function contains all of the real drawing, which can also be done by functions called from draw. Once run is called, the draw function is called n times per second according the the value set by the frameRate function. In our example the frameRate is set to 20. This will continue to loop forever, or until exit is called. Quite often you will write a program that varies over time. For this you can use the environment.frameCount value. Every time draw is called the frameCount is incremented by one.

If you want to write a program that only draws a picture one time, and then exits you can call the noLoop function from setup.

Using Processing With Your Own Classes

Here is another example that may have a bit more interest to it. Lets look at some balls bouncing around inside the container of the canvas.


And finally, here is an example that illustrates recursion quite nicely. It also illustrates a way to use the HSB color system (Hue Saturation, Brightness). This system is handy when you want to use one number to take you through the ROY G BIV color rainbow from 0 to 360 where 0 is red and 360 is back to red again. Run this example and then try changing it to add two more recursive calls that put more circles above and below the center line.


Images are also really easy to work with in processing. You can place them anywhere you like on the canvas, and then play with individual pixels. Here’s a simple color negative program apllied to my friend Goldy Gopher.

I’m looking forward to updating parts of How to think like a computer scientist, as well as Problem Solving with Aglorithms and Data Structures using Python with this new ability to create fun visual effects.

Until I get the processing module fully documented you can use This as a guide Most of the things are implemented, but if you run into something that is missing or that does not work, please let me know. Until this gets a lot more use I’m considering it beta quality.

Next Section - The Birthday Problem