the mit press processing a programming handbook for visual designers and artists sep 2007

Processing
Reas_00_i-xxvi.indd Sec1:iReas_00_i-xxvi.indd Sec1:i 5/23/07 1:11:18 PM5/23/07 1:11:18 PM
Reas_00_i-xxvi.indd Sec1:iiReas_00_i-xxvi.indd Sec1:ii 5/23/07 1:11:18 PM5/23/07 1:11:18 PM
Processing:
a programming
handbook for
visual designers
and artists
Casey Reas
Ben Fry
The MIT Press
Cambridge, Massachusetts
London, England
Reas_00_i-xxvi.indd Sec1:iiiReas_00_i-xxvi.indd Sec1:iii 5/23/07 1:11:18 PM5/23/07 1:11:18 PM
© 2007 Massachusetts Institute of Technology
All rights reserved. No part of this book may be reproduced in any form by any electronic or mechanical means
(including photocopying, recording, or information storage and retrieval) without permission in writing from
the publisher.
MIT Press books may be purchased at special quantity discounts for business or sales promotional use. For
information, please email or write to Special Sales Department, The MIT Press,
55 Hayward Street, Cambridge, MA 02142.
Printed and bound in the United States of America.
Library of Congress Cataloging-in-Publication Data
Reas, Casey.
Processing : a programming handbook for visual designers and artists / Casey Reas & Ben Fry ;
foreword by John Maeda.
p. cm.
Includes bibliographical references and index.
ISBN 978-0-262-18262-1 (hardcover : alk. paper)
1. Computer programming. 2. Computer graphics—Computer programs. 3. Digital art—Computer programs.

4. Art—Data processing. 5. Art and technology. I. Fry, Ben. II. Title.
QA76.6.R4138 2007
005.1—dc22
2006034768
10 9 8 7 6 5 4 3 2 1
Reas_00_i-xxvi.indd Sec1:ivReas_00_i-xxvi.indd Sec1:iv 5/23/07 1:11:19 PM5/23/07 1:11:19 PM
For the ACG
Reas_00_i-xxvi.indd Sec1:vReas_00_i-xxvi.indd Sec1:v 5/23/07 1:11:19 PM5/23/07 1:11:19 PM
29 34 45 57 67 72
91 99 113 121 131 141
192 204 208 221 225 233
247 289 297 307 320 324
336 344 352 354 359 409
447 451 472 493 530 551
84
189
244
331
415
535
Reas_00_i-xxvi.indd Sec1:viReas_00_i-xxvi.indd Sec1:vi 5/23/07 1:11:19 PM5/23/07 1:11:19 PM
vii
Foreword
Preface
Processing . . .
Using Processing
Structure 1: Code Elements
Shape 1: Coordinates, Primitives
Data 1: Variables
Math 1: Arithmetic, Functions

Control 1: Decisions
Control 2: Repetition
Shape 2: Vertices
Math 2: Curves
Color 1: Color by Numbers
Image 1: Display, Tint
Data 2: Text
Data 3: Conversion, Objects
Typography 1: Display
Math 3: Trigonometry
Math 4: Random
Transform 1: Translate, Matrices
Transform 2: Rotate, Scale
Development 1: Sketching, Techniques
Synthesis 1: Form and Code
Interviews 1: Print
Structure 2: Continuous
Structure 3: Functions
Shape 3: Parameters, Recursion
Input 1: Mouse I
Drawing 1: Static Forms
Input 2: Keyboard
Input 3: Events
Input 4: Mouse II
Input 5: Time, Date
Development 2: Iteration, Debugging
Synthesis 2: Input and Response
Interviews 2: Software, Web
Motion 1: Lines, Curves
Motion 2: Machine, Organism

Data 4: Arrays
Image 2: Animation
Image 3: Pixels
Typography 2: Motion
Typography 3: Response
Color 2: Components
Image 4: Filter, Blend, Copy, Mask
Image 5: Image Processing
Output 1: Images
Synthesis 3: Motion and Arrays
Interviews 3: Animation, Video
Structure 4: Objects I
Drawing 2: Kinetic Forms
Output 2: File Export
Input 6: File Import
Input 7: Interface
Structure 5: Objects II
Simulate 1: Biology
Simulate 2: Physics
Synthesis 4: Structure, Interface
Interviews 4: Performance, Installation
Extension 1: Continuing . . .
Extension 2: 3D
Extension 3: Vision
Extension 4: Network
Extension 5: Sound
Extension 6: Print
Extension 7: Mobile
Extension 8: Electronics
Appendixes

Related Media
Glossary
Code Index
Index
Contents
xix
xxi
1
9
17
23
37
43
51
61
69
79
85
95
101
105
111
117
127
133
137
145
149
155
173

181
197
205
217
223
229
237
245
251
255
261
279
291
301
315
321
327
333
337
347
355
367
371
377
395
413
421
427
435
453

461
477
495
501
519
525
547
563
579
603
617
633
661
693
699
703
705
Reas_00_i-xxvi.indd Sec1:viiReas_00_i-xxvi.indd Sec1:vii 5/23/07 1:11:21 PM5/23/07 1:11:21 PM
viii
88 342 55 65 305 220
98 319 323 351 353 359
225 232 240 247 444 44
124 129 288 296 29 32
202 470 488 184 190 407
141 113 329 335 530 535
415
207
83
75
455

551
Reas_00_i-xxvi.indd Sec1:viiiReas_00_i-xxvi.indd Sec1:viii 5/23/07 1:11:21 PM5/23/07 1:11:21 PM
ix
Foreword
Preface
Processing . . .
Using Processing
Color 1: Color by Numbers
Color 2: Components
Control 1: Decisions
Control 2: Repetition
Data 1: Variables
Data 2: Text
Data 3: Conversion, Objects
Data 4: Arrays
Development 1: Sketching, Techniques
Development 2: Iteration, Debugging
Drawing 1: Static Forms
Drawing 2: Kinetic Forms
Image 1: Display, Tint
Image 2: Animation
Image 3: Pixels
Image 4: Filter, Blend, Copy, Mask
Image 5: Image Processing
Input 1: Mouse I
Input 2: Keyboard
Input 3: Events
Input 4: Mouse II
Input 5: Time, Date
Input 6: File Import

Input 7: Interface
Math 1: Arithmetic, Functions
Math 2: Curves
Math 3: Trigonometry
Math 4: Random
Motion 1: Lines, Curves
Motion 2: Machine, Organism
Output 1: Images
Output 2: File Export
Shape 1: Coordinates, Primitives
Shape 2: Vertices
Shape 3: Parameters, Recursion
Simulate 1: Biology
Simulate 2: Physics
Structure 1: Code Elements
Structure 2: Continuous
Structure 3: Functions
Structure 4: Objects I
Structure 5: Objects II
Synthesis 1: Form and Code
Synthesis 2: Input and Response
Synthesis 3: Motion and Arrays
Synthesis 4: Structure, Interface
Transform 1: Translate, Matrices
Transform 2: Rotate, Scale
Typography 1: Display
Typography 2: Motion
Typography 3: Response
Interviews 1: Print
Interviews 2: Software, Web

Interviews 3: Animation, Video
Interviews 4: Performance, Installation
Extension 1: Continuing . . .
Extension 2: 3D
Extension 3: Vision
Extension 4: Network
Extension 5: Sound
Extension 6: Print
Extension 7: Mobile
Extension 8: Electronics
Appendixes
Related Media
Glossary
Code Index
Index
Contents by category
xix
xxi
1
9
85
337
51
61
37
101
105
301
145
251

217
413
95
315
321
347
355
205
223
229
237
245
427
435
43
79
117
127
279
291
367
421
23
69
197
461
477
17
173
181

395
453
149
255
371
495
133
137
111
327
333
155
261
377
501
519
525
547
563
579
603
617
633
661
693
699
703
705
Reas_00_i-xxvi.indd Sec1:ixReas_00_i-xxvi.indd Sec1:ix 5/23/07 1:11:22 PM5/23/07 1:11:22 PM
x

29 30 44 55 63 70
88 97 113 124 128 137
186 200 206 219 225 231
246 281 293 306 316 322
334 340 349 353 406
441 458 464 484 530 535
83
174
239
329
414
551
356
Reas_00_i-xxvi.indd Sec1:xReas_00_i-xxvi.indd Sec1:x 5/23/07 1:11:22 PM5/23/07 1:11:22 PM
xi
Foreword by John Maeda
Preface
Contents
How to read this book
Casey’s introduction
Ben’s introduction
Acknowledgments
Processing . . .
Software
Literacy
Open
Education
Network
Context
Using Processing

Download, Install
Environment
Export
Example walk-through
Reference
Structure 1: Code Elements
Comments
//, /* */
Functions
Expressions, Statements
“;”, “,”
Case sensitivity
Whitespace
Console
print(), println()
Extended contents
Shape 1: Coordinates, Primitives
Coordinates
size()
Primitive shapes
point(), line(),
triangle(), quad(), rect(),
ellipse(), bezier()
Drawing order
Gray values
background(),
fill(),stroke(),
noFill(), noStroke()
Drawing attributes
smooth(), noSmooth(),

strokeWeight(), strokeCap(),
strokeJoin()
Drawing modes
ellipseMode(), rectMode()
Data 1: Variables
Data types
int, float, boolean,
true, false
Variables
=
Processing variables
width, height
Math 1: Arithmetic, Functions
Arithmetic
+, -, *, /, %
Operator precedence, Grouping
()
Shortcuts

++, , +=, -=, *=, /=, -
Constraining numbers

ceil(), floor(), round(),
min(), max()
xix
xxi
xxi
xxii
xxiii
xxiv

xxv
1
1
3
4
4
6
7
9
9
9
10
11
16
17
17
18
18
20
20
20
23
23
25
31
31
33
34
37
37

38
40
43
43
47
48
49
Reas_00_i-xxvi.indd Sec1:xiReas_00_i-xxvi.indd Sec1:xi 5/23/07 1:11:24 PM5/23/07 1:11:24 PM
xii
Control 1: Decisions
Relational expressions
>, <, >=, <=, ==, !=
Conditionals
if, else, {}
Logical operators
||, &&, !
Control 2: Repetition
Iteration
for
Nested iteration
Formatting code blocks
Shape 2: Vertices
Vertex
beginShape(), endShape(),
vertex()
Points, Lines
Shapes
Curves
curveVertex(), bezierVertex()
Math 2: Curves

Exponents, Roots
sq(), sqrt(), pow()
Normalizing, Mapping
norm(), lerp(), map()
Simple curves
Color 1: Color by Numbers
Setting colors
Color data
color, color()
RGB, HSB
colorMode()
Hexadecimal
Image 1: Display, Tint
Display
PImage, loadImage(), image()
Image color, Transparency
tint(), noTint()
Data 2: Text
Characters
char
Words, Sentences
String
Data 3: Conversion, Objects
Data conversion
boolean(), byte(), char(),
int(), float(), str()
Objects
“.”,
PImage.width, PImage.height,
String.length,

String.startsWith(),
String.endsWith();
String.charAt(),
String.toCharArray(),
String.subString(),
String.toLowerCase(),
String.toUpperCase(),
String.equals()
Typography 1: Display
Loading fonts, Drawing text
PFont, loadFont(),
textFont(), text()
Text attributes
textSize(), textLeading(),
textAlign(), textWidth()
Math 3: Trigonometry
Angles, Waves
PI, QUARTER_PI, HALF_PI,
TWO_PI, sin(), cos(),
radians(), degrees()
Circles, Arcs, Spirals
arc()
Math 4: Random
Unexpected numbers
random(), randomSeed()
Noise
noise(), noiseSeed()
51
51
53

57
61
61
65
67
69
69
71
72
74
79
79
80
83
85
86
89
89
93
95
96
97
101
102
103
105
105
107
111
112

114
117
117
123
127
127
130
Reas_00_i-xxvi.indd Sec1:xiiReas_00_i-xxvi.indd Sec1:xii 5/23/07 1:11:24 PM5/23/07 1:11:24 PM
xiii
Transform 1: Translate, Matrices
Translation
translate()
Controlling transformations
pushMatrix(), popMatrix()
Transform 2: Rotate, Scale
Rotation, Scaling
rotate(), scale()
Combining transformations
New coordinates
Development 1: Sketching, Techniques
Sketching software
Programming techniques
Synthesis 1: Form and Code
Collage Engine
Riley Waves
Wilson Grids
Mandelbrot Set
Interviews 1: Print
Jared Tarbell.
Fractal.Invaders, Substrate

Martin Wattenberg.
Shape of Song
James Paterson.
The Objectivity Engine
LettError.
RandomFont Beowolf
Structure 2: Continuous
Continuous evaluation
draw(), frameRate(),
frameCount
Controlling the fl ow
setup(), noLoop(),
Variable scope
Structure 3: Functions
Abstraction
Creating functions
void
Function overloading
Calculating and returning values
return
Shape 3: Parameters, Recursion
Parameterized form
Recursion
Input 1: Mouse I
Mouse data
mouseX, mouseY,
pmouseX, pmouseY
Mouse buttons
mousePressed, mouseButton
Cursor icon

cursor(), noCursor()
Drawing 1: Static Forms
Simple tools
Drawing with images
Input 2: Keyboard
Keyboard data
keyPressed, key
Coded keys
keyCode
Input 3: Events
Mouse events
mousePressed(),
mouseReleased(),
mouseMoved(), mouseDragged()
Key events
keyPressed(), keyReleased()
Controlling the fl ow
loop(), redraw()
133
133
134
137
137
139
142
145
145
146
149
150

151
152
153
155
157
161
165
169
173
173
177
178
181
182
183
193
194
197
197
201
205
205
212
213
217
218
221
223
224
227

229
229
232
235
Reas_00_i-xxvi.indd Sec1:xiiiReas_00_i-xxvi.indd Sec1:xiii 5/23/07 1:11:24 PM5/23/07 1:11:24 PM
xiv
Input 4: Mouse II
Constrain
constrain()
Distance
dist()
Easing
abs()
Speed
Orientation
atan2()
Input 5: Time, Date
Seconds, Minutes, Hours
second(), minute(), hour(),
millis()
Date
day(), month(), year()
Development 2: Iteration, Debugging
Iteration
Debugging
Synthesis 2: Input and Response
Tennis
Cursor. Peter Cho
Typing
Banded Clock. Golan Levin

Interviews 2: Software, Web
Ed Burton. Sodaconstructor
Josh On. They Rule
Jürg Lehni. Hektor and Scriptographer
Auriea Harvey and Michaël Samyn.
The Endless Forest
Motion 1: Lines, Curves
Controlling motion
Moving along curves
Motion through transformation
Motion 2: Machine, Organism
Mechanical motion
Organic motion
Data 4: Arrays
Using arrays
Array, [], new, Array.length
Storing mouse data
Array functions
append(), shorten(),
expand(), arraycopy()
Two-dimensional arrays
Image 2: Animation
Sequential images
Images in motion
Image 3: Pixels
Reading pixels
get()
Writing pixels
set()
Typography 2: Motion

Words in motion
Letters in motion
Typography 3: Response
Responsive words
Responsive letters
Color 2: Components
Extracting color
red(), blue(), green(),
alpha(), hue(), saturation(),
brightness(),
Dynamic color palettes
Image 4: Filter, Blend, Copy, Mask
Filtering, Blending
filter(), blend(),
blendColor()
Copying pixels
copy()
Masking
mask()
237
237
238
239
242
243
245
245
249
251
251

252
255
256
257
258
259
261
263
267
271
275
279
279
284
287
291
291
295
301
303
306
309
312
315
316
319
321
321
324
327

327
331
333
333
335
337
337
341
347
347
353
354
Reas_00_i-xxvi.indd Sec1:xivReas_00_i-xxvi.indd Sec1:xiv 5/23/07 1:11:25 PM5/23/07 1:11:25 PM
xv
Image 5: Image Processing
Pixels
pixels[], loadPixels(),
updatePixels(), createImage()
Pixel components
Convolution
Image as data
Output 1: Images
Saving images
save()
Saving sequential images
saveFrame()
Synthesis 3: Motion and Arrays
Centipede. Ariel Malka
Chronodraw. Andreas Gysin
AmoebaAbstract_03. Marius Watz

Mr. Roboto. Leon Hong
Interviews 3: Animation, Video
Motion Theory. R.E.M. “Animal”
Bob Sabiston. Waking Life
Jennifer Steinkamp. Eye Catching
Semiconductor. The Mini-Epoch Series
Structure 4: Objects I
Object-oriented programming
Using classes and objects
class, Object
Arrays of objects
Multiple fi les
Drawing 2: Kinetic Forms
Active tools
Active drawings
Output 2: File Export
Formatting data
nf()
Exporting fi les
saveStrings(), PrintWriter,
createWriter(),
PrintWriter.flush(),
PrintWriter.close(), exit()
Input 6: File Import
Loading numbers
loadStrings(),
split(), splitTokens()
Loading characters
WHITESPACE
Input 7: Interface

Rollover, Button, Dragging
Check boxes, Radio buttons
Scrollbar
Structure 5: Objects II
Multiple constructors
Composite objects
Inheritance
extends, super
Simulate 1: Biology
Cellular automata
Autonomous agents
Simulate 2: Physics
Motion simulation
Particle systems
Springs
Synthesis 4: Structure, Interface
WithoutTitle. Lia
Pond. William Ngan
Swingtree. ART+COM,
Andreas Schlegel
SodaProcessing. Ed Burton
355
356
359
360
364
367
368
369
371

372
373
374
375
377
379
383
387
391
395
395
398
406
409
413
414
416
421
421
422
427
428
431
435
436
442
448
453
453
454

456
461
461
469
477
477
481
487
495
496
497
498
499
Reas_00_i-xxvi.indd Sec1:xvReas_00_i-xxvi.indd Sec1:xv 5/23/07 1:11:25 PM5/23/07 1:11:25 PM
xvi
Interviews 4: Performance, Installation
SUE.C. Mini Movies
Chris Csikszentmihályi.
DJ I, Robot Sound System
Golan Levin, Zachary Lieberman.
Messa di Voce
Marc Hansen. Listening Post
Extension 1: Continuing . . .
Extending Processing
Processing and Java
Other programming languages
Extension 2: 3D. Simon Greenwold
A short history of 3D software
3D form
Camera

Material and lights
Tools for 3D
Conclusion
Code
Resources
Extension 3: Vision. Golan Levin
Computer vision in interactive art
Elementary computer vision
techniques
Computer vision in the physical world
Tools for computer vision
Conclusion
Code
Resources
Extension 4: Network.
Alexander R. Galloway
The Internet and the arts
Internet protocols and concepts
Network tools
Conclusion
Code
Resources
Extension 5: Sound. R. Luke DuBois
Music and sound programming
in the arts
Sound and musical informatics
Digital representation of sound
and music
Music as information
Tools for sound programming

Conclusion
Code
Resources
Extension 6: Print. Casey Reas
Print and computers
High-resolution fi le export
Production
Conclusion
Code
Resources
Extension 7: Mobile. Francis Li
Mobile software applications
The mobile platform
Programming for mobile phones
Mobile programming platforms
Conclusion
Code
Resources
Extension 8: Electronics.
Hernando Barragán and Casey Reas
Electronics in the arts
Electricity
Components
Circuits
Microcontrollers and I/O boards
Sensors and communication
Controlling physical media
Conclusion
Code
Resources

501
503
507
511
515
519
519
521
522
525
525
526
531
532
536
538
539
545
547
547
549
552
554
555
556
561
563
563
565
569

571
572
576
579
579
582
584
588
591
592
593
599
603
603
606
608
612
613
615
617
617
619
622
624
625
626
631
633
633
635

637
638
639
642
646
648
649
658
Reas_00_i-xxvi.indd Sec1:xviReas_00_i-xxvi.indd Sec1:xvi 5/23/07 1:11:26 PM5/23/07 1:11:26 PM
xvii
Appendix A: Order of Operations
Appendix B: Reserved Words
Appendix C: ASCII, Unicode
Appendix D: Bit, Binary, Hex
Appendix E: Optimization
Appendix F: Programming Languages
Appendix G: Code Comparison
Related Media
Glossary
Code Index
Index
661
663
664
669
673
679
686
693
699

703
705
Reas_00_i-xxvi.indd Sec1:xviiReas_00_i-xxvi.indd Sec1:xvii 5/23/07 1:11:26 PM5/23/07 1:11:26 PM
Reas_00_i-xxvi.indd Sec1:xviiiReas_00_i-xxvi.indd Sec1:xviii 5/23/07 1:11:27 PM5/23/07 1:11:27 PM
xix
Foreword
At MIT, the full-time graduate studio that I administer attracts a uniquely gifted lot:
people who have a fundamental balance issue in the way they approach the computer as
an expressive medium. On the one hand, they don’t want the programming code to get
in the way of their designs or artistic desires; on the other hand, without hesitation they
write sophisticated computer codes to discover new visual pathways. The two sides of their
minds are in continual confl ict. The conclusion is simple for them. Do both.
Hybrids that can fl uidly cross the chasm between technology and the arts are
mutations in the academic system. Traditionally, universities create technology students
or art students—but never mix the two sides of the equation in the same person. During
the 1990s the mutants that managed to defy this norm would either seek me out, or else
I would reach out to fi nd them myself. Bringing these unique people together was my
primary passion, and that’s how I came into contact with Casey Reas and Ben Fry.
It is said that the greatest compliment to a teacher is when the student surpasses the
teacher. This corner was turned quickly after I began to work with them, and the fi nishing
blow came when Ben and Casey created Processing. They prominently elevated the call
for visual experimentation with their timely mastery of the Internet to engage at fi rst
tens, hundreds, and then tens of thousands of hybrids all over the world. Wherever I might
travel, young technology artists are always talking about Processing and ask me to pass on
their thanks to Casey and Ben.
So it is here that I express my thanks to you, Ben and Casey. On behalf of all of the
people who follow where Processing might take the fi eld of computational art and design,
I wish you more sleepless nights in the relentless pursuit of perfecting the bridge that
connects the art-mind with the computer-mind. All of us look to you to lead the way for
when art on the computer becomes simply, art—without the icky technology connotations.

We’re all counting on you to take us there. Please?
John Maeda
Allen Professor of Media Arts and Sciences
MIT Media Laboratory
Reas_00_i-xxvi.indd Sec1:xixReas_00_i-xxvi.indd Sec1:xix 5/23/07 1:11:27 PM5/23/07 1:11:27 PM
Reas_00_i-xxvi.indd Sec1:xxReas_00_i-xxvi.indd Sec1:xx 5/23/07 1:11:27 PM5/23/07 1:11:27 PM
xxi
Preface
This book was written as an introduction to the ideas of computer programming within
the context of the visual arts. It targets an audience of computer-savvy individuals who
are interested in creating interactive and visual work through writing software but have
little or no prior experience. We’re tremendously excited about the potential of software
as a medium for communication and expression, and we hope this book will open the
potential to a wide audience.
The Processing book is the result of six years of software development and teaching
experience. The ideas presented have been continually tested in the classrooms,
computer labs, and basements of universities, art and design schools, and arts
institutions. The authors have taught related courses at the University of California–
Los Angeles, the Interaction Design Institute Ivrea, Harvard University, and Carnegie
Mellon University and have given numerous workshops and lectures on this topic at
conferences and institutions around the globe. The contents of this book have been
continually improved through the generous feedback of students and fellow educators.
The refi ned curriculum is presented here in book form with the intention of distributing
the results of this endeavor to a larger and more diverse community.
Contents
Four types of content are featured in these pages. The majority of the book is divided
into tutorial units discussing specifi c elements of software and how they relate to
the arts. These units introduce the syntax and concepts of software such as variables,
functions, and object-oriented programming. They cover topics such as photography and
drawing in relation to software. These units feature many short, prototypical example

programs with related images and explanation. More advanced professional projects
from diverse domains including animation, performance, and typography are discussed
in interviews with their creators (pp. 155, 261, 377, 501). The extension sections (p. 519)
present concise introductions to further domains of exploration including computer
vision, sound, and electronics. The appendixes (p. 661) provide reference tables and more
involved explanations of technical topics. The related media section (p. 693) is a list of
references to additional material on related topics. The technical terms used in the book
are defi ned in the glossary (p. 699).
This book is full of example programs written using the Processing programming
language developed by the authors. Processing is a free, open source programming
language and environment used by students, artists, designers, architects, researchers,
and hobbyists for learning, prototyping, and production. Processing is developed
by artists and designers as an alternative to proprietary software tools in the same
domain. The project integrates a programming language, development environment,
Reas_00_i-xxvi.indd Sec1:xxiReas_00_i-xxvi.indd Sec1:xxi 5/23/07 1:11:28 PM5/23/07 1:11:28 PM
xxii
and teaching methodology into a unifi ed structure for learning and exploration.
The software allows people to make a smooth transition from beginner to advanced
programmer, and the Processing language is a good basis for future learning. The
technical aspects of the language and the deeper programming concepts introduced
in this text translate well to other programming languages, particularly those used
frequently within the arts.
Most of the examples presented in this book have a minimal visual style. This
represents not a limitation of the Processing software, but rather a conscious decision
by the authors to make the code for each example as brief and clear as possible. We hope
the stark quality of the examples gives additional incentive to the reader to extend the
programs to her or his own visual language.
How to read this book
This book can be read front to back or in a self-directed order. There are two tables of
contents (p. vii, ix) that order the book in different ways. In addition to reading the

book from front to back, following each category (e.g., Input, Shape, Structure) from
beginning to end is a logical way to move through the text. Previous knowledge and
areas of interest can defi ne the order of exploration. For example, it’s possible to read all
of the units about images and skip those about math, or vice versa. You will fi nd that
many later units require knowledge of concepts discussed in earlier units. If you fi nd
unfamiliar code and ideas, it may be necessary to read earlier units before proceeding.
Understanding this book requires more than reading the words. It is also essential
to run, modify, and interact with the programs found within. Just as it’s not possible
to learn to cook without cooking, it’s not possible to learn how to program without
programming. Many of the examples can be fully understood only in motion or in
response to the mouse and keyboard. The Processing software and all of the code
presented in this book can be downloaded and run for future exploration. Processing
can be downloaded from www.processing.org/download and the examples from
www.processing.org/learning.
The code, diagrams, and images convey essential content to augment the text.
Because this book was written for visually oriented people, it’s assumed that diagrams
and images will be read with as much care as the text. Typographic and visual
conventions are used to assist reading. Code elements within the text are presented
in a monospaced
font for differentiation. Each code example is numbered sequentially
to make it easy to reference. The numbers appear in the right margin at the fi rst
line of each example. The number “15-02” refers to the 2nd example in the 15th unit
(p. 128). Unfortunately, sometimes a code example wraps to the next page. When the
abbreviation “cont.” appears as a part of the code number, this signifi es the code is
continued from the previous page. Many of the code examples run differently when
the variable values are changed. When numbers appear to the left of an image (p. 200),
these numbers were used to produce that image. In examples where the mouse position
is important, thin lines are used to imply the mouse position at the time the image was
Reas_00_i-xxvi.indd Sec1:xxiiReas_00_i-xxvi.indd Sec1:xxii 5/23/07 1:11:28 PM5/23/07 1:11:28 PM
xxiii

made (code 23-02, p. 206). In some examples, only the horizontal position of the mouse is
important and a single vertical line is used to show the position (code 23-03, p. 206).
Casey’s introduction
I started playing with computers as a child. I played games and wrote simple programs
in BASIC and Logo on my family’s Apple IIe machine. I spent years exploring and testing
it, but I preferred drawing, and my interest in computers dissipated. As a design student
at the University of Cincinnati in the early 1990s, I started to use Adobe’s Photoshop
and Illustrator programs during my fi rst year, but I wasn’t permitted to use them in my
design studio classes until the third year. I spent the fi rst two years of my education
training my eyes and hands to construct composition and meaning through visual form.
I focused my energy on drawing icons and letters with pencils and painting them with
Plaka, a matte black paint. This was intensely physical work. I often produced hundreds
of paper sketches while working toward a single refi ned image. I later focused my
efforts on the design of printed materials including books, magazines, and information
graphics. In this work I used software as a tool during an intermediate stage between
concept and the fi nal result on paper.
Over time, I shifted from producing printed media to software. When the
multimedia CD-ROM industry emerged, I worked in that area to integrate my interests
in sound, video, image, and information design. With the rise of the Internet in the
mid-1990s, I focused on building large, database-integrated websites. As I shifted my
work from paper to screen, static grids and information hierarchies evolved into kinetic,
modular systems with variable resolutions and compositions. The time and energy
once spent devoted to details of materials and static composition shifted to details of
motion and response. I focused on building real-time processes to generate form, defi ne
behavior, and mediate interactions. To pursue these interests at a more advanced level,
I realized I would need to learn to program computers. After a childhood of playing with
computers and years of working with them professionally, I started down a new path.
In 1997 I met John Maeda and was introduced to the experimental software work of
his students in the Aesthetics and Computation Group at MIT. They created a new type
of work by fusing traditional arts knowledge with ideas from computer science. My new

direction emerged as I experienced this work, and in 1998 I started learning to program
computers in earnest. I began graduate studies at MIT the following year. My time there
was personally transforming as I shifted from a consumer of software to a producer.
I expanded my views of technology in relation to culture and the history of art.
While a graduate student at the MIT Media Lab, I was introduced to a culture of
individuals who combined skills from more than one fi eld of study. The knowledge in
common was computing technology, and people had backgrounds in other disciplines
including architecture, art, mathematics, design, and music. At that time, few software
environments afforded both a sophisticated programming language and the ability
to created refi ned graphics, so my predecessors and colleagues at MIT built their own
software to meet their unique needs. The building of these software tools and their use
Reas_00_i-xxvi.indd Sec1:xxiiiReas_00_i-xxvi.indd Sec1:xxiii 5/23/07 1:11:29 PM5/23/07 1:11:29 PM
xxiv
to develop projects led to the emergence of a unique culture that synthesized knowledge
from visual culture with knowledge from computer science. The desire to make this
information accessible to people outside of technical fi elds and institutions has been my
motivation for dedicating the last six years to developing Processing. I hope this book
will act as a catalyst to increase software literacy within the arts.
Ben’s introduction
Like lots of people who wind up in similar careers, I’ve always been interested in
taking things apart to understand how they work. This began with disassembling and
comparing the contents of household electronics, looking for similar components. Once I
ran out of telephones and radios, I moved to software. The computer provided an endless
range of questions, like having an infi nite number of telephones. With a burnt yellow
binder that described “IBM BASIC by Microsoft,” my father introduced me to the “for”
loop and I gradually taught myself programming—mostly by staring at others’ code,
sometimes modifying it to make it do something else. Over time it became easier to
write code from scratch.
I had a separate interest in graphic design, and I was curious about typography and
layout and composition. A family friend ran a design fi rm, and I thought that seemed

like the most interesting job on earth. I later applied to design school, thinking of
studying user interface design or creating “interactive multimedia CD-ROMs,” the only
possibilities I could see for intersecting my two interests. Attending design school was
signifi cant for me, because it provided thinking and creative skills that could be applied
to other areas, including my interest in software.
In 1997, during my fi nal year of undergraduate school, John Maeda gave a lecture
at our program. It was overwhelming for several of us, including one friend who sat
mumbling “Whoa, slow down ” as we watched from the back of the room. In the
presentation I fi nally saw the intersection between design and computation that I
couldn’t fi gure out before. It was a different perspective than building tools, which
sounded mundane, or building interfaces, which also left something to be desired.
A year later I was lucky to have the opportunity to join Professor Maeda at MIT.
Pedagogy was a persistent theme during my six years working with John at the
Media Laboratory. Casey, other students, and I contributed to the Design By Numbers
project, which taught us a great deal about teaching computation to designers and
gave us a lot of feedback on what people wanted. Casey and I began to see a similarity
between this feature set and what we did in our own work at the “sketching” stage,
and we started to discuss how we might connect the two in what would later be called
Processing.
We wanted Processing to include lots of code that could be viewed, modifi ed, and
tested—refl ecting the way in which I learned programming. But more important has
been the community that has formed around the project, who are eager to share code
with one another and help answer each other’s questions. In a similar manner, the code
for Processing itself is available, which for me has a lot to do with repaying the favor of
Reas_00_i-xxvi.indd Sec1:xxivReas_00_i-xxvi.indd Sec1:xxiv 5/23/07 1:11:29 PM5/23/07 1:11:29 PM