The Processing Environment

(If you have already installed Processing and know a little bit about it then skip this page!)

processing

Processing is an arts focused computer programming language and it is designed to teach computer programming through the practices of visual art and visual literacy. It was initially created to serve as a software sketchbook but has now evolved into a robust tool used by professionals and universities.

» Free,  download it here now.

» Interactive programs with 2D, 3D or PDF output

» For GNU/Linux, Mac OS X, and Windows

» Over 100 accessible coding libraries extend the core software

» Well documented, with many books available and many free multimedia training resources.

block3

getting-started-with-processing

Here we look at Processing through a thin and non-intimidating called, Getting Started with Processing

“Learn computer programming the easy way with Processing, a simple language that lets you use code to create drawings, animation, and interactive graphics. Programming courses usually start with theory, but this book lets you jump right into creative and fun projects. It’s ideal for anyone who wants to learn basic programming, and serves as a simple introduction to graphics for people with some programming skills.”

red-dot

As promised, the interface is easy and intuitive. Even more motivating is that you can produce images and customize them quickly. It is very satisfying to immediately watch lines of script create graphics in a separate Sketch window.

Side note: Processing is grounded in the standard programming language called, Java.

block3

With one line of code you can draw many different simple shapes:

one-line-of-code

With 9 lines you can create a drawing program that responds to your mouse movements with repeating shapes and gray scale color shifts:

Screen-shot-2013-07-01-at-3.44

Screen-shot-2013-07-01-at-3.40

Screen-shot-2013-07-01-at-3.41

The basic way of plotting your images through the computer is through the pixel grid system.

You must specify the dimensions of your canvas first.

Code Example:

size (480,120);

For the items you draw on your canvas you must specify their coordinates on the pixel grid system.

pixel_grid

Important: the pixel grid system (above) has its 0,0 coordinate in a different position from the conventional math grid.

pixel_grid

Here’s what it looks like to code a robot graphic image:

Screen-shot-2013-07-03-at-1.39

Note that coders insert comments preceded by //.

Code Example:

//neck

Comments help to keep you organized so you don’t get lost in a sea of text when you are debugging problems.

Screen-shot-2013-07-03-at-1.39

Now, you might be thinking that it would be easier to just draw this robot in Photoshop. Of course, in this instance of a static image that might be true. However, the goal is to code smarter, not harder and to get the computer to work for you. Old school conventions of animation use the stop-motion technique whereby artists painstakingly produce hundreds of variations of one image as a new frame. They then line the images up in an editing software like a flip-book. However, if you are programming an animation using code, tools such as variables and loops makes this type of work substantially more manageable. 

Variables store values in memory that can be used later in a program. Variables can be used several times and their values are flexible while the program is running. When using variables you don’t have to repeat lines for certain types of designs. You just instruct the computer with directions to repeat the design you want using basic math functions called loops. Loops tell the computer do the same thing over and over again.

Code Example:

Screen-shot-2013-09-06-at-2.10

Product:

Screen-shot-2013-07-03-at-6.39

Other visuals from loops and variables using similar coding strategies:

Screen-shot-2013-07-03-at-6.38

Screen shot 2013-07-03 at 6.54.30 PM

Redesigning the robot with variables would allow for quick changes in the positions and sizes of its parts. That is much easier (or at least faster) than redrawing each version of the robot. With coding all you would need to do is change a few variables to create a seemingly endless stream of visual variations. This is a more efficient path to complex imaging and animation. Of course, this is only one facet of why coding is interesting and useful. The big picture piece is that coding is for programming interactivity. For example, not only having the robot bouncing across the screen but also interacting with the robot’s movements by manipulating its actions in real time with a game controller .

robots

In-depth lessons on the fundamentals of programming in Processing are next in this category

red-dot

Also, great Processing intro video here from Jose Sanchez of the Plethora Project.