Chapter 1. Hello

Processing is for writing software to make images, animations, and interactions. The idea is to write a single line of code and have a circle show up on the screen. Add a few more lines of code, and the circle follows the mouse. Another line of code, and the circle changes color when the mouse is pressed. We call this sketching with code. You write one line, then add another, then another, and so on. The result is a program created one piece at a time.

Programming courses typically focus on structure and theory first. Anything visual—an interface, an animation—is considered a dessert to be enjoyed only after finishing your vegetables, usually after several weeks of studying algorithms and methods. Over the years, we’ve watched many friends try to take such courses and drop out after the first lecture or after a long, frustrating night before the first assignment deadline. What initial curiosity they had about making the computer work for them was lost because they couldn’t see a path from what they had to learn first to what they wanted to create.

Processing offers a way to learn programming through creating interactive graphics. There are many possible ways to teach coding, but students often find encouragement and motivation in immediate visual feedback. Processing’s capacity for providing that feedback has made it a popular way to approach programming, and its emphasis on images, sketching, and community is discussed in the next few pages.

Sketching and Prototyping

Sketching is a way of thinking; it’s playful and quick. The basic goal is to explore many ideas in a short amount of time. In our own work, we usually start by sketching on paper and then moving the results into code. Ideas for animation and interactions are usually sketched as storyboards with notations. After making some software sketches, the best ideas are selected and combined into prototypes (Figure 1-1). It’s a cyclical process of making, testing, and improving that moves back and forth between paper and screen.

Figure 1-1. As drawings move from sketchbook to screen, new possibilities emerge

Flexibility

Like a software utility belt, Processing consists of many tools that work together in different combinations. As a result, it can be used for quick hacks or for in-depth research. Because a Processing program can be as short as one line or as long as thousands, there’s room for growth and variation. More than 100 libraries extend Processing even further into domains including sound, computer vision, and digital fabrication (Figure 1-2).

Figure 1-2. Many types of information can flow in and out of Processing

Giants

People have been making pictures with computers since the 1960s, and there’s much to be learned from this history. For example, before computers could display to CRT or LCD screens, huge plotter machines such as the one shown in Figure 1-3 were used to draw images. In life, we all stand on the shoulders of giants, and the titans for Processing include thinkers from design, computer graphics, art, architecture, statistics, and the spaces between. Have a look at Ivan Sutherland’s Sketchpad (1963), Alan Kay’s Dynabook (1968), and the many artists featured in Ruth Leavitt’s Artist and Computer¹ (Harmony Books, 1976). The ACM SIGGRAPH and Ars Electronica archives provide fascinating glimpses into the history of graphics and software.

Figure 1-3. Drawing demonstration by Manfred Mohr at Musée d’Art Moderne de la Ville de Paris using the Benson plotter and a digital computer on May 11, 1971 (photo by Rainer Mürle, courtesy bitforms gallery, New York)

Family Tree

Like human languages, programming languages belong to families of related languages. Processing is a dialect of a programming language called Java; the language syntax is almost identical, but Processing adds custom features related to graphics and interaction (Figure 1-4). The graphic elements of Processing are related to PostScript (a foundation of PDF) and OpenGL (a 3D graphics specification). Because of these shared features, learning Processing is an entry-level step to programming in other languages and using different software tools.

Figure 1-4. Processing has a large family of related languages and programming environments