Hands on with Processing

You can’t learn to code just by reading about it—you need to do it. To get started, download Processing and make your first sketch.

Start by visiting http://processing.org/download and selecting the Mac, Windows, or Linux version, depending on what machine you have. This is the Processing development environment:

Run an Example

The Processing software download includes dozens of examples that demonstrate different features of the software.

You can find various examples in the upper left corner: File > Examples. Double-click an example’s name to open it. The examples are grouped into categories based on their function, such as Form, Motion, and Image. Find an interesting topic in the list and try an example!

Here is the Hue example:

Please choose another example and click “run” to see the result!

When looking at code in the editor, you’ll see that functions like fill() and rect() have a different color from the rest of the text. If you see a function that you’re unfamiliar with, you can right-click the text and choose “Find in Reference”. This will open a web browser and show the reference for that function.

The Processing Reference https://processing.org/reference/, which explains every code element with a description and examples, is very beginner-friendly. You can keep the Reference open while you’re programming. It can be navigated by topic or alphabetically.

Your First Processing Program

You’re now running the Processing Development Environment. The large area is the Text Editor, and there’s a row of buttons across the top; this is the toolbar. Below the editor is the Message Area, and below that is the Console. The Message Area is used for one-line messages, and the Console is used for more technical details.

In the editor, type the following:

ellipse(50, 50, 80, 80);

This line of code means “draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels.” If you’ve typed everything correctly, you’ll see a circle on your screen as below.

If you didn’t type it correctly, the Message Area will turn red and complain about an error. If this happens, make sure that you’ve copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, and the line should end with a semicolon.

One of the most difficult things about getting started with programming is that you have to be very specific about the syntax. You’ll get used to it with a little practice.

How to export your work?

One of the most significant features of the Processing environment is its ability to bundle your creation into an application with just one click. Select File → Export Application to package your current code as an application. This will turn your program into a freestanding application for Windows, Mac OS X, or Linux (depending on which operating system you’re exporting from).

Introduction

Lesson One: Introduction to Coding

Lesson Two: Introduction to Processing

Lesson Three: Hands-on with Processing

Further Resources