Beauty Through Processing


This is the introduction to programming we use in Design Engineering to prepare students for the Change a Space project. We use Processing, a variant of Java with a bunch of easy to use libraries (built-in commands) made for art, music, and visualization. Processing is free and comes with an IDE (developer’s environment, or a place to type in and run your programs) that’s helpful and quickly learned.

The course is loosely modeled on an MIT course where the students’ final projects go up on a huge billboard. In our case the projects go up on monitors around the school, courtesy of Riverdale’s friendly tech department.


Any fairly recent computer


Thus far, most of the students who’ve done this project started with no programming experience and some with a fair amount of apprehension. This is a good time for the calming of nerves. I like to point out that the class is about solving problems. So far we’ve been using tools and materials so solve problems – how to make a clock hand move a certain speed, how to make things stick together and line up.  You’ve had to learn to use unfamiliar tools, and you did. Now we’re going to solve problems with algorithms – lists of instructions for a computer. The tools are different, but it’s pretty much the same procedure, same part of your brain. We’re going to start out by learning to use some tools.

Sometimes there will be an experienced programmer or three in the class. It’s important to give these kids something challenging to do on their own while the rest of the class catches up so they aren’t bored and don’t make the rest of the class feel stupid. Another option, depending on the kids, is to get them to help teach.

The assignment is to make something beautiful. It’s nice to show a few examples of what Processing can do, including how it’s used a lot in music videos.

The first step is to download Processing at and install it. Have students open it up and explain that the drawing canvas (the screen) works like a sheet of graph paper, where 0,0 is top left. From here I take a friendly back-and-froth approach to a standard Processing tutorial. Here’s a sample:

The Processing language is just like the English language, or any other language. Look at the side-by-side translation:

English: draw a dot at x=12 and y=12
Processing: point(10,12);
English: draw a line that starts at 0,0 and ends at 220,220
Processing: line(0,0,220,220);
Have the students type in the second line and press the triangular Play button. Absent any typos, a rectangle should pop up. Explain that little things like punctuation make a big difference in computer languages. One missing semicolon will usually keep an entire program from working.
The next jump is how to use the dictionary (reference) for the language. You can open in a browser, or cmd- or right-click on a word in your code and Processing will look it up for you.
Task: have students figure out how to draw an ellipse using the reference.
Drawing an ellipse isn’t that impressive, but what about drawing hundreds of ellipses a second?
Here’s how to make your program run over and over again so it can do just that. Note that text after a double slash (//) is ignored by Processing, it’s just for humans. No need to type it in.
void setup() { // stick stuff that runs once in the setup() function.  
  size (400,400); // set the canvas size (x,y)

void draw() { // everything inside the draw() function runs over and over again
  ellipse(200,200,200,200); // draw the same circle over and over again. Still boring!

Also note that functions (little programs) are like sandwiches- the top piece starts with void (for now), the function name, two parentheses, and an open curly, like this:

void myFunction() {
    // stuff inside the function

…and ends with a close curly. Everything between the curlies is the meat of the function. This is where you put your statements, each of which ends with a semicolon.

Things get interesting when you start using variables. Let’s define one in setup():
int x = 0; // int stands for integer, the type of variable we’ve just created
The value of x can be changed (that’s why it’s called a variable). For example, if you put the line below in your draw() function, what would happen?
x = x + 1;
Can anyone figure out how to make the circle move using x?
int x = 0;
void setup() { 
  size (400,400);

void draw() { 
  ellipse(x,200,200,200); // what does the x do here? Try running the program
  x = x + 1; // what effect does this have on x?
This last bit should make a circle cross the screen, finally some gratification. From here you can see about making the circle move diagonally. Who can make that work? Have them figure it out and explain it to the class. What about making the circle grow?

Let’s add color. Colors are defined by three numbers – Red, Green, and Blue (RGB). It’s like mixing paint. There’s a color picker built-in to Processing: Tools -> Color Selector
Set the stroke (line color) and fill (filled-in color), like this:
stroke(39,160, 230); // nice blue
fill(87, 230, 39) // a bright green
You can also set the background color:
background(188, 239, 230); // purple
Can anyone figure out how to make the circle change color using x?
Here’s a fun one: generate a random number:
float r; // define the variable. A floats variable has decimals, e.g. 4.3232
r = random(255); // random number between 0 and 255
Can you figure out how to make your circle change color randomly? How about drawing circles of random size? At random positions?
Task: Make something beautiful using what you’ve learned so far.
This continues through the language. We cover all the way up to using objects. By the time we’ve spent two weeks on the language, students are ready to create something beautiful for the public, and the code they write isn’t that different from the code that makes their phones work. It’s a powerful feeling.
There are tons of Processing tutorials and examples on the web that people have spent a lot of time on if you want to bone up.


Share & Print

0 0 100 0

No Comments

Leave a Reply