Processing: Code for the Visual Arts

Jacob on Software
5 min readFeb 14, 2021

As programmers, we have to use our creativity on a daily basis, utilizing our imagination to bring our ideas to fruition and solve complex problems. As noted computer scientist Maria Klawe has said, coding is today’s language of creativity. However, while computer programming allows for the expression of creativity itself, anyone who has ever worked in 0s and 1s knows that computers operate a little differently. Computer science is still very much an engineering discipline, and programmers are not encouraged to approach algorithmic complexity like Jackson Pollock.

To be sure, CS students know they should bring a “measure twice, cut once” mindset to their work. How, then, can creatives — especially those interested in the visual arts — exercise their creativity in code?

Processing

Enter Processing, a graphical library and development environment written with the visual arts in mind. Originally conceived by programmers Casey Reas and Ben Fry in 2001 through their work at the MIT Media Lab, Processing had a dual mission from its very beginning: teach designers about code and coders about design. Neither a complete design tool nor a conventional programming language, Processing occupies a middle ground, a place where visual artists could work with form and images while learning programming and engineers could write code while learning about form and images. A 2005 academic article laid out the founder’s intentions with the platform.

h/t Casey Reas

Written as a subclass of the Java programming language, Processing has three essential parts: language, text editor, and community. By synthesizing visual design with emerging programming technologies, the creators of Processing wanted to teach people to “sketch” with code (more on that later).

Processing Basics

Key to understanding Processing is the fact that it comes with its own essential integrated development environment (IDE) called the Processing Development Environment (PDE). While many professional programmers write code in such IDEs as VS Code or Atom, Processing’s PDE allows users to visualize their code with a built in display window.

h/t Processing.org

Essential to Processing is the notion that code written in the language is commonly called a sketch. The term sketch — while obviously referring to the visual orientation of the language — has a more complicated meaning. Because computer science emerged out of an engineering discipline, most computer programming paradigms insist on the aforementioned measure twice, cut once approach of writing computer programs. Experienced engineers tend to draw out abstracted ideas that represent the code they will write, and a high emphasis is placed on knowing the kind of code that will be written long before any keystrokes are made. This process is more efficient, the thinking goes. Generally speaking it’s a waste of time to code something unexpected and have to do more work to get what we wanted

With Processing, on the other hand, Reas and Fry wanted to encourage programmers to “sketch” their programs. By keeping open what direction a computer program might take, Processing allows programmers to explore different tangents they may not have if they had to know exactly what kind of program they would write before they write it. Programmers figure out what the program will do as they write it. This way, the thinking goes, programmers can ignite their own creativity and inspire others to create novel projects.

Simple Processing Programs

As Processing is intended to get those interested in the language into the sandbox and make pictures as soon as possible, the following are a few programs listed on the Processing website to demonstrate what one can do with the language. While a very common first line of, say, Javascript might be printing “Hello World!” to the console, a more common first line of Processing might look something like this:

h/t Casey Reas

This line of code would draw a straight line from one coordinate on PDE’s display window (10, 90) to another coordinate on that window (20, 80).

h/t Processing.org

Slightly more advanced Processing sketches might look something like this:

h/t Processing.org

Which creates images that look like this:

h/t Processing.org

As you might be able to imagine, the skill level for what artists can create with Processing increases rapidly, and some artists make truly extraordinary works with their computer (Side note: one of the interesting things about the Processing community is that artists tend to publish the code that corresponds to their art. While many artists try to hide their technique, the Processing community encourages sharing what’s under the hood to get more artists interested in the space).

h/t Raven Kwok

Processing Today

As was the intention of its founders, the Processing community has grown immensely since its founding in 2001, with thousands contributing to the space to both make interesting visual arts projects and teach design-oriented people about computer programming. Like any robust programming community, Processing has the advantage of having many programmers contribute to the community with code itself. Today there are hundreds of libraries and tools Processing programmers can bring to their projects. With libraries designed to create 3D animations, generate language, and even build computer vision applications, there are virtually infinite possibilities your Processing code could take you.

Moreover, Processing’s founders have stayed true to their mission of being as inclusive a community as possible, authoring numerous books on how to get involved with Processing.

h/t Processing.org

Another popular educator in the Processing space is Daniel Shiffman, whose videos on YouTube have become so popular that my algorithm constantly advertises his videos to me.

As you can see, there are almost infinite possibilities for programmers to learn about Processing and begin to bring their visual ideas to fruition. While not ideal for a production code environment, Processing encourages a different paradigm in writing code, one that could ultimately lead to more creative projects.

--

--