PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

Processing

Second edition

Reas_000.indd 1 7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

Reas_000.indd 2 7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

Processing:a programming handbook for visual designers and artists

Second edition

Casey Reas Ben Fry

The MIT PressCambridge, MassachusettsLondon, England

Reas_000.indd 3 7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

© 2014 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 special_sales@mitpress.mit.

This book was set in 9/12.5 pt The serif Plain by Toppan Best-set Premedia Limited. Printed and bound in the United States of America.

Library of Congress Cataloging-in-Publication

Reas, Casey.Processing : a programming handbook for visual designers and artists / Casey Reas and Ben Fry.—Second edition. pages cmIncludes bibliographical references and index.ISBN 978-0-262-02828-8 (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 2014006.60285—dc23 2014016283

10 9 8 7 6 5 4 3 2 1

Reas_000.indd 4 7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

v

Contents

ix Foreword xi Preface xi Contents xii How to read this book xii Casey’s introduction xiv Ben’s introduction xv Acknowledgments

1 1. Processing . . . 1 Software 3 Literacy 4 Open 4 Education 6 Network 6 Context

9 2. Using Processing 9 Download, Install 9 Environment 10 Export 11 Example walk-through 16 Coding is writing 16 Comments 17 Functions 17 Expressions, Statements 19 Case sensitivity 19 Whitespace 20 Console 20 Reference

21 3. Draw 21 Coordinates 23 Basic shapes 28 Curves 32 Drawing order 32 Gray values 34 Attributes 35 Modes

39 4. Color 40 Color by number 43 Blend 45 RGB, HSB 48 Hexadecimal

51 5. Variables 51 Data types 52 Variables 54 Variable names 55 Processing variables 56 Arithmetic 58 Mind the data types 59 Data conversion 61 Order of operations 62 Shortcuts

65 6. Flow 65 Looping 69 Controlling the flow 70 Relational expressions 72 Conditionals 77 Logical operators 79 Variables scope 81 Formatting code blocks

83 7. Interactivity 84 Mouse data 89 Mouse buttons 90 Keyboard data 93 Coded keys 94 Events 94 Mouse events 97 Key events 98 Event flow 100 Cursor icon

Reas_000.indd 5 7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

vi

103 8. Repeat 103 Iterate 104 while loop 105 for loop 109 Loop and draw() 111 Nested loops

115 9. Synthesis 1 115 Sketching software 116 Programming techniques 117 Examples

123 10. Interviews: Image 125 Manfred Mohr, Une Esthetique Programmee 129 LettError, RandomFont Beowolf 133 Jared Tarbell, Fractal.Invaders, Substrate 137 Benjamin Maus, Perpetual Storytelling Apparatus

141 11. Text 142 Characters 143 Words, Sentences 144 Strings are objects

147 12. Typography 148 Draw text 149 Load media 150 Vector fonts 153 Pixel fonts 154 Text attributes 156 Typing 157 Typography and interaction

161 13. Image 162 Display 164 Tint, Transparency 167 Mask 170 Filter

173 14. Transform 173 Translate 174 Controlling transformations 176 Rotate 176 Scale 177 Combining transformations 181 Transformation and interaction 182 New coordinate systems

185 15. Vertices 185 Vertex 187 Points, Lines 188 Geometry 189 Curves 192 Contours

197 16. 3D Drawing 197 3D form 202 Camera 204 Lights, Materials 209 Texture maps

213 17. Shapes 213 Display SVG 216 Display OBJ 218 Transform 219 Create 221 Modify

225 18. Synthesis 2 225 Iteration 226 Debugging 227 Examples

243 19. Interviews: Interaction 245 Lynn Hershman Leeson, Lorna 249 Robert Winter, Ludwig van Beethoven: Symphony No. 9 253 Josh On, They Rule 257 Steph Thirion, Eliss

Reas_000.indd 6 7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

vii

261 20. Calculate 261 Exponents, Roots 262 Normalize, Map 264 Simple curves 267 Constraining numbers 270 Distance 272 Easing 275 Angles, Waves 283 Circles, Spirals 285 Direction

289 21. Random 289 Unexpected values 292 Distributions 295 Random seed 296 Noise

301 22. Motion 301 Controlling motion 306 Motion along curves 310 Mechanical motion 314 Organic motion 317 Kinetic typography

323 23. Time 323 Seconds, Minutes, Hours 326 Milliseconds 327 Date

329 24. Functions 330 Abstraction 331 Why functions? 334 Create functions 342 Overload functions 343 Calculate and return values 345 Parameterize 350 Recursion

355 25. Objects 355 Object-oriented programming 358 Classes and objects 368 Multiples files 370 Multiple constructors 371 Composite objects 373 Inheritance

377 26. Synthesis 3 377 Modularity, reusability 377 Algorithm 378 Examples

391 27. Interviews: Motion, Performance 393 Larry Cuba, Calculated Movements 399 Bob Sabiston, Waking Life 403 Golan Levin and Zachary Lieberman, Messa di Voce 407 SUE.C, Mini Movies

411 28. Arrays 413 Define an array 414 Read array elements 416 Record data 419 Array functions 422 Arrays of objects 425 Two-dimensional arrays

427 29. Animation 428 Arrays of images 431 Animation format, resolution 432 Save sequential images

435 30. Dynamic Drawing 436 Simple tools 438 Draw with media 440 Speed 441 Orientation 443 Drawings in motion 444 Active tools

Reas_000.indd 7 7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESSFOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

viii

449 31. Simulate 449 Motion 453 Particle systems 460 Springs 468 Cellular automata 475 Autonomous agent

485 32. Data 485 Format data 486 Export files 489 Data structure 491 Strings 493 Table 495 XML 500 JSON

505 33. Interface 506 Rollover, Button 512 Drag and drop 514 Check boxes 516 Radio buttons 519 Scrollbar

525 34. Image Processing 525 Read pixels 529 Write pixels 530 Copy pixels 531 Color components 536 Pixel array 540 Pixel components

543 35. Render Techniques 543 Renderers 544 Another drawing surface 548 OpenGL surfaces 550 Combine surfaces

555 36. Synthesis 4 555 Collage engine 558 Waves 562 3D letter 565 Noise landscape 569 Network

575 37. Interviews: Environment 577 Mark Hansen, Listening Post 581 Jürg Lehni, Hektor and Scriptographer 585 Jennifer Steinkamp, Madame Curie 589 Ash Nehru, Origin

593 38. Continuing . . . 593 Extend Processing 595 Processing and Java 595 Other programming languages

597 Appendix A: Order of Operations 599 Appendix B: Reserved Words 600 Appendix C: ASCII, Unicode 605 Appendix D: Bit, Binary, Hex 609 Appendix E: Optimization 615 Appendix F: Programming Languages

623 Related Media 629 Glossary 633 Index

Reas_000.indd 8 7/16/2014 3:10:32 PM