Processing: A Programming Handbook for Visual Designers and Artists

Casey Reas
Ben Fry
Foreword by John Maeda
Copyright Date: 2014
Edition: 2
Published by: MIT Press
Pages: 672
  • Cite this Item
  • Book Info
    Book Description:

    The visual arts are rapidly changing as media moves into the web, mobile devices, and architecture. When designers and artists learn the basics of writing software, they develop a new form of literacy that enables them to create new media for the present, and to imagine future media that are beyond the capacities of current software tools. This book introduces this new literacy by teaching computer programming within the context of the visual arts. It offers a comprehensive reference and text for Processing (, an open-source programming language that can be used by students, artists, designers, architects, researchers, and anyone who wants to program images, animation, and interactivity. Written by Processing's cofounders, the book offers a definitive reference for students and professionals. Tutorial chapters make up the bulk of the book; advanced professional projects from such domains as animation, performance, and installation are discussed in interviews with their creators.This second edition has been thoroughly updated. It is the first book to offer in-depth coverage of Processing 2.0 and 3.0, and all examples have been updated for the new syntax. Every chapter has been revised, and new chapters introduce new ways to work with data and geometry. New "synthesis" chapters offer discussion and worked examples of such topics as sketching with code, modularity, and algorithms. New interviews have been added that cover a wider range of projects. "Extension" chapters are now offered online so they can be updated to keep pace with technological developments in such fields as computer vision and electronics.InterviewsSUE.C, Larry Cuba, Mark Hansen, Lynn Hershman Leeson, Jürg Lehni, LettError, Golan Levin and Zachary Lieberman, Benjamin Maus, Manfred Mohr, Ash Nehru, Josh On, Bob Sabiston, Jennifer Steinkamp, Jared Tarbell, Steph Thirion, Robert Winter

    eISBN: 978-0-262-32185-3
    Subjects: Technology, Art & Art History

Table of Contents

  1. Front Matter
    (pp. i-vi)
  2. Table of Contents
    (pp. vii-xii)
  3. Foreword
    (pp. xiii-xiii)
    John Maeda

    At MIT, the full-time graduate studio that I once administered attracted a uniquely gifted lot: people who had a fundamental balance issue in the way they approached the computer as an expressive medium. On the one hand, they didn’t want the programming code to get in the way of their designs or artistic desires; on the other hand, without hesitation, they wrote sophisticated computer codes to discover new visual pathways. The two sides of their minds were in continual conflict. The conclusion was simple for them: Do both.

    Hybrids that can fluidly cross the chasm between technology and the arts...

  4. Preface
    (pp. xv-xx)
  5. 1 Processing…
    (pp. 1-7)

    Processing relates software concepts to principles of visual form, motion, and interaction. It integrates a programming language, development environment, and teaching methodology into a unified system. Processing was created to teach fundamentals of computer programming within a visual context, to serve as a software sketchbook, and to be used as a production tool. Students, artists, design professionals, and researchers use it for learning, prototyping, and production.

    The Processing language is a text programming language specifically designed to generate and modify images. Processing strives to achieve a balance between clarity and advanced features. Beginners can write their own programs after only...

  6. 2 Using Processing
    (pp. 9-20)

    The Processing software can be downloaded from the Processing website. Using a web browser, navigate click on the link for your computer’s operating system. The Processing software is available for Linux, Macintosh, and Windows.

    The Processing Development Environment (PDE) consists of a simple text editor for writing code, a message area, a text console, tabs for managing files, a toolbar with buttons for common actions, and a series of menus. When programs are run, they open in a new window called the display window.

    Pieces of software written using Processing are calledsketches. These sketches are written...

  7. 3 Draw
    (pp. 21-37)

    Drawing a shape with code can be difficult because every aspect of its location must be specified with a number. When you’re accustomed to drawing with a pencil or moving shapes around on a screen with a mouse, it can take time to start thinking in relation to the screen’s strict coordinate grid. The mental gap between seeing a composition on paper or in your mind and translating it into code notation is wide, but easily bridged.

    Before making a drawing, it’s important to think about the dimensions and qualities of the surface to which you’ll be drawing. If you’re...

  8. 4 Color
    (pp. 39-49)

    Working with color on screen is different from working with color on paper or canvas. While the same rigor applies, knowledge of pigments for painting (cadmium red, Prussian blue, burnt umber) and from printing (cyan, yellow, magenta) does not translate into the information needed to create colors for digital displays. For example, adding all the colors together on a computer monitor produces white, while adding all the colors together with paint produces black (or a strange brown). A computer monitor mixes colors with light. The screen is a black surface, and colored light is added. This is known as additive...

  9. 5 Variables
    (pp. 51-63)

    What is data? Data often consists of measurements of physical characteristics. For example, Casey’s California driver’s license states that his sex is M, his hair is BRN, and his eyes are HZL. The values M, BRN, and HZL are items of data associated with Casey. Data can be the population of a country, the average annual rainfall in Los Angeles, or your current heart rate. In software, data is stored as numbers and characters. Examples of digital data include a photograph of a friend stored on your hard drive, a song downloaded from the Internet, and a news article loaded...

  10. 6 Flow
    (pp. 65-82)

    The programs we’ve seen so far run each line of code in sequence from top to bottom. They run the first line, then the second, then the third, and so on. The program stops when the last line is run. It’s often beneficial to change this order—sometimes skipping lines or repeating lines many times to create movement. Although the lines of code in a program are always positioned in an order from top to bottom on the page, this doesn’t necessarily define the order in which each line is run. This order is called theflowof the program....

  11. 7 Interactivity
    (pp. 83-101)

    The screen forms a bridge between our bodies and the realm of circuits and electricity inside computers. We control elements on screen through a variety of devices such as touch pads, trackballs, and joysticks, but the keyboard and mouse remain the most common input devices for desktop computers.

    The computer mouse dates back to the late 1960s, when Douglas Engelbart presented the device as an element of the oN-Line System (NLS), one of the first computer systems with a video display. The mouse concept was further developed at the Xerox Palo Alto Research Center (PARC), but its introduction with the...

  12. 8 Repeat
    (pp. 103-114)

    The early history of computers is the history of automating calculation. A “computer” was originally a person who did math by hand. What we know as a computer today emerged from machines built to automate tedious mathematical calculations. The earliest mechanical computers were calculators developed for speed and accuracy in performing repetitive calculations. Because of this heritage, computers are excellent at executing repetitive tasks accurately and quickly and therefore at drawing accurately and quickly.

    Iterative structures are used to shorten lines of repetitive code into a more compact, but equivalent expressions. Once a line (or a group of code) is...

  13. 9 Synthesis 1
    (pp. 115-123)

    There are similarities between learning a programming language and learning a new spoken language. Initially, one learns basic elements of the new language—such as simple words and grammar rules—and mimics short phrases. Learning to communicate ideas and express emotions within the language takes more time. Similarly, the first step in computer programming is to understand the basic elements such as comments, variables, and functions. The next step is to learn to read and modify simple example programs. Later, one begins to write programs from scratch. The most interesting and difficult stage of learning to program comes later, as...

  14. 10 Interviews: Image
    (pp. 125-141)
    Manfred Mohr, LettError, Jared Tarbell and Benjamin Maus
  15. 11 Text
    (pp. 143-148)

    This poem was generated from software written by Margaret Masterman and was featured in the 1968 Cybernetic Serendipity exhibition at the Institute of Contemporary Arts (ICA) in London. This exhibition exposed the public to examples of software-generated poems, music, and drawings. While the poem may or may not conform to your ideas about great poetry, the exhibition was important for its early emphasis on using the computer as a language processing machine. A common misconception holds that computer programming is applicable only to technical fields. While there is a strong connection between programming and technology, it’s not the only realm...

  16. 12 Typography
    (pp. 149-161)

    The evolution of typographic reproduction and display technologies has and continues to impact human culture. Early printing techniques developed by Johannes Gutenberg in fifteenth-century Germany using letters cast from lead provided a catalyst for increased literacy and the scientific revolution. Automated typesetting machines, such as the Linotype invented in the nineteenth century, changed the way information was produced, distributed, and consumed. In the digital era, the way we consume text has changed drastically since the proliferation of personal computers in the 1980s and the rapid growth of the Internet in the 1990s. Text from emails, websites, and instant messages fill...

  17. 13 Image
    (pp. 163-173)

    Digital photographs are fundamentally different from analog photographs captured on film. Like computer screens, digital photos are rectangular grids of color. The dimensions of digital images are measured in units of pixels. If an image is 320 pixels wide and 240 pixels high, it has 76,800 total pixels. If an image is 1280 pixels wide and 1024 pixels high, the total number of pixels is 1,310,720 (1.3 megapixels). Every digital image has a color depth. The color depth refers to the number of bits (p. 51) used to store each pixel. If the color depth of an image is 1,...

  18. 14 Transform
    (pp. 175-186)

    The coordinate system introduced in the Draw chapter uses the upper-left corner of the display window as the origin with the x-coordinates increasing to the right and the y-coordinates increasing downward. This system can be modified with transformations. The coordinates can be translated, rotated, and scaled so shapes are drawn to the display window with different positions, orientations, and sizes. Transformations can make it easier to work with complex geometry by grouping shapes and vertices together so they can be changed with a single line of code. They obscure complicated calculations like figuring out the location of each vertex point...

  19. 15 Vertices
    (pp. 187-198)

    Geometric primitives such as lines and rectangles are simple and flexible, but a programmer may often desire more complex shapes. Fortunately, there are many ways to define visual form with software. This chapter introduces a way to define shapes as a series of coordinates, called vertices. A vertex is a position defined by an x- and y-coordinate. A line has two vertices, a triangle has three, a quadrilateral has four, and so on. Organic shapes such as blobs or the outline of a leaf are constructed by positioning many vertices in spatial patterns:

    These shapes are simple compared to the...

  20. 16 3D Drawing
    (pp. 199-214)

    For as long as people have represented the three-dimensional world on two-dimensional surfaces, they have invoked the help of machines. The 3D graphics we know today have their origin in the theory of linear perspective, developed less than 600 years ago by the Florentine architect Filippo Brunelleschi. He used a variety of optical devices to determine that all sets of parallel lines appear to the eye to converge at a single “vanishing point” on the horizon. Shortly after the technique was codified, artists such as Albrecht Dürer began devising machines to help produce convincing representations of 3D scenes on 2D...

  21. 17 Shapes
    (pp. 215-225)

    In contrast to working with image formats like JPG and PNG, other file types such as SVG (Scalable Vector Graphics) and OBJ store image data as vector geometry rather than as a grid of colors. This difference affects how a specific file may be used. For instance, bitmap image formats are best for displaying photographic imagery captured by a camera, while vector files are most appropriate for drawn geometry such as maps, typography, and logos. Vector files store graphics as coordinates and therefore don’t have a native resolution like an image file. A bitmap PNG file saved at 480 ×...

  22. 18 Synthesis 2
    (pp. 227-245)

    The code sketches up to this point in the book are short. Programs of this length can be written without much forethought, but planning becomes important when writing longer programs. The extent of the planning will be up to the programmer, but one aspect of programming is always the same: large, complex programs must be divided into series of short, simpler programs. Learning how to divide programs into manageable parts takes time and experience. As the scope of a program grows, the number of decisions involved in writing it multiplies. Making changes to a program, evaluating the result, and then...

  23. 19 Interviews: Interaction
    (pp. 247-263)
    Lynn Hershman Leeson, Robert Winter, Josh On and Steph Thirion
  24. 20 Calculate
    (pp. 265-291)

    Basic mathematical expressions can be used to draw shapes to the screen and modify their attributes. These techniques are the foundation for examples in the forthcoming Motion and Dynamic Drawing chapters. They can control movement and the way elements respond to user input. The numbers produced by these functions are useful to accelerate and decelerate shapes in motion and move objects along curved paths; they can modify and augment the data from interface devices to make new interaction techniques possible. Likewise, the trigonometric functions sine and cosine generate repeating numbers that can be used to draw waves, circles, and spirals...

  25. 21 Random
    (pp. 293-304)

    Random compositional choices have a long history in modern art. In 1913, Marcel Duchamp’s 3Stoppages Étalonemployed the curves of dropped threads to derive novel units of measurement. Jean Arp used chance operations to define the position of elements in his collages. The composer John Cage sometimes tossed coins to determine the order and duration of notes in his scores. Artists integrate chance, randomness, and noise into their work either as a creative exercise or as a way of relinquishing some control to an external force. Actions like dropping, throwing, rolling, and so forth deprive the artists of certain...

  26. 22 Motion
    (pp. 305-326)

    A deep understanding of motion, and how to use it to communicate, guides the artistry of the animator, dancer, and filmmaker. Practitioners of the media arts can employ motion in everything from dynamic websites to video games. The most fundamental component of motion is time, or more precisely, how elements change over time. Static images can communicate motion (think of Impressionist and Futurist paintings), and time-based media such as video, film, and software can express it directly. Defining motion through code displays the power and flexibility of the medium.

    Programmers determine how elements in their software will move. These decisions...

  27. 23 Time
    (pp. 327-332)

    Past civilizations used sundials and water clocks to visualize the passage of time, but today, most people use a digital numeric clock or a twelve-hour circular clock with a minute, second, and hour hand. Each of these representations reflects its technology. A numeric digital readout is appropriate for a digital clock in need of a bright, inexpensive display; a clock built from circular gears lends itself to a circular presentation of time. The tower-sized clocks of the past with enormous gears and weights have evolved and shrunk into devices so inexpensive and abundant that digital devices such as home appliances,...

  28. 24 Functions
    (pp. 333-358)

    A function is a self-contained programming module. You’ve been using the functions included with Processing such as size(), line(), stroke(), and translate() to write your programs. It is also possible to write your own, unique functions to make your programs more modular. Functions make redundant code more concise by extracting the common elements into new blocks of code that can be run many times within a program. This makes the code easier to read and update and reduces the chance of errors.

    What do we already know about functions? Functions often have parameters to define their actions. For example, the...

  29. 25 Objects
    (pp. 359-380)

    Object-oriented programming is a coding technique to formalize the relationships between interconnected variables and functions.A classdefines a group of related methods (functions) and fields (variables) and anobjectis a single instance of a class. To use two analogies, a class is like a blueprint, and an object is a building constructed from that blueprint; a class is like a recipe for a cake, and an object is the cake. Like blueprints and recipes, many objects can be constructed from a single class definition.

    Objects can provide a powerful way to think about structuring your ideas in code,...

  30. 26 Synthesis 3
    (pp. 381-395)

    Along with variables, conditionals, and loops, the techniques for working with functions and object-oriented coding are among the most essential components of learning to code. As demonstrated in the last two chapters, we recommend that beginners first write sketches without functions and classes, adding those after the logic and variables are figured out. The idea is to start the program in a way that is familiar and more basic, then to refine it with these more advanced techniques. With more experience, functions and classes can be outlined and used from the beginning. In the spirit of this approach, this chapter...

  31. 27 Interviews: Motion, Performance
    (pp. 397-413)
    Larry Cuba, Bob Sabiston, Golan Levin, Zachary Lieberman and SUE. C.
  32. 28 Arrays
    (pp. 415-430)

    The termarrayrefers to a structured grouping or an imposing number: “The dinner buffet offers an array of choices,” “The city of Boston faces an array of problems.” In computer programming, an array is a set of data elements stored under the same name. Arrays can be created to hold any type of data, and each element can be individually assigned and read. There can be arrays of numbers, characters, sentences, boolean values, and so on. Arrays might store vertex data for complex shapes, recent keystrokes from the keyboard, or data read from a file.

    For instance, an array...

  33. 29 Animation
    (pp. 431-438)

    Animation occurs when a series of images, each slightly different, are presented in quick succession. A diverse medium with a century of history, animation has progressed from the initial experiments of Winsor McCay to the commercial and realistic innovations of early Walt Disney studio productions, to the experimental films by such animators as Lotte Reiniger and James Whitney in the mid-twentieth century. The high volume of animated special effects in live-action film and the deluge of animated children’s films are changing the role of animation in popular culture.

    There is a long history of using software to extend the boundaries...

  34. 30 Dynamic Drawing
    (pp. 439-452)

    The activity of drawing translates an individual’s perception and imagination into visual form. The differences between the drawings of different people demonstrate the fact that every hand and mind is unique. Drawings range from the mechanical grids of Sol LeWitt to the playful lines of Paul Klee to the expressionist figures of Egon Schiele and far beyond. Each surface and instrument determines a different tactile experience. Ink, charcoal, crayon, vellum, and cloth all enable unique sorts of drawing. Less conventional materials, such as chocolate, dirt, glue, and light, have been used with significant results. Materials can be applied with fingers,...

  35. 31 Simulate
    (pp. 453-487)

    Simulation is used within physics, economics, the social sciences, and other fields to gain insight into the complicated systems that comprise our world. Software simulations employ the most powerful computers to model aspects of the world such as weather and traffic patterns. A tremendous amount of intellectual energy in the field of computer graphics has been dedicated to accurate simulation of lighting, textures, and the movement of physical materials such as cloth and hair. An entire genre of computer games exists that simulate city planning, military campaigns, and even everyday life.

    Computers constitute a powerful medium for simulating the processes...

  36. 32 Data
    (pp. 489-508)

    Digital files are not tangible like their paper namesakes. Despite the diverse content stored in digital files, the material of each is the same—a sequence of 1s and 0s stored on a hard drive or other media. Almost every task performed with computers involves working with files. Editing a single text file involves first reading from dozens of other files that comprise the text editor application itself. When the document is saved, the file is given a name and stored for later retrieval.

    The primary reason to save a file is to store data so that it is available...

  37. 33 Interface
    (pp. 509-527)

    The graphical user interface (GUI), also known as the direct manipulation interface, helped bring computers out of laboratories and into homes, offices, and schools. The combination of the mouse and graphical interfaces made computer use more intuitive. Common navigation techniques such as pointing, clicking, and dragging require a device like the mouse that controls an on-screen cursor or on contemporary touch screens, a finger or stylus. Most GUIs comprise icons representing the hierarchy of files and folders on the hard drive. The user performs actions by selecting icons and moving them directly.

    Before touch screens and pointing devices were developed,...

  38. 34 Image Processing
    (pp. 529-545)

    An image is a rectangular grid of pixels in which each element is a number specifying a color. Because the screen itself is an image, its individual pixels are also defined as numbers. The color values of individual pixels can be read and changed. Image processing is a general term for manipulating and modifying images, whether for the purpose of correcting a defect, improving aesthetic appeal, or facilitating communication. Programs such as GIMP and Adobe Photoshop provide their users with ways to process images including changing the contrast, blurring, and warping. This chapter explains how some image processing features work...

  39. 35 Render Techniques
    (pp. 547-557)

    Throughout this book, everything has drawn to the primary display window. Sometimes, however, there is an advantage in drawing to another graphics surface. All of the drawing features available in the display window can be applied to an offscreen drawing surface and then drawn back into the display window as an image or texture. This technique makes it easier to imagine a program as a stack of layers similar to the technique used in photo editing and vector drawing software. Similarly, drawing surfaces in Processing can be moved around, drawn using blending effects and transparency, and drawn in different orders...

  40. 36 Synthesis 4
    (pp. 559-577)

    After working through the chapters of this book, it is now possible to integrate elements of software including variables, conditionals, objects, and arrays in tandem with visual elements, motion, and response to create exciting and inventive software. The examples presented in this chapter are the most challenging in the book, but they include only ideas and code that are discussed in the text. To get the most from them, move back and forth through the book to review and clarify the content. Each is the start of an exploration following an idea, rather than the end. Try pushing this code...

  41. 37 Interviews: Environment
    (pp. 579-595)
    Mark Hansen, Jürg Lehni, Jennifer Steinkamp and Ash Nehru
  42. 38 Continuing…
    (pp. 597-600)

    It often takes a few years to become comfortable expressing ideas through software. The core concepts are not difficult, but they represent a different way of thinking unfamiliar to most people. This book introduces elements of software within the context of the arts, with the aim of bringing ideas from computer programming within reach of a new audience. People have different aptitudes for learning computer programming, and the context in which it is introduced affects how well individuals learn it. The way into computer programming introduced in this book has proved effective for many people, but others interested in programming...

  43. Appendix A: Order of Operations
    (pp. 601-602)
  44. Appendix B: Reserved Words
    (pp. 603-603)
  45. Appendix C: ASCII, Unicode
    (pp. 604-608)
  46. Appendix D: Bit, Binary, Hex
    (pp. 609-612)
  47. Appendix E: Optimization
    (pp. 613-618)
  48. Appendix F: Programming Languages
    (pp. 619-625)
  49. Related Media
    (pp. 627-631)
  50. Glossary
    (pp. 633-636)
  51. Code Index
    (pp. 637-638)
  52. Index
    (pp. 639-642)