Processing Second Edition

PROPERTY OF THE MIT PRESS FOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

Processing Second edition

Reas_000.indd 1

7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESS FOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

Reas_000.indd 2

7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESS FOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

Processing: a programming handbook for visual designers and artists Second edition

Casey Reas Ben Fry

The MIT Press Cambridge, Massachusetts London, England

Reas_000.indd 3

7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESS FOR 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 [email protected]. 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 cm Includes 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 2014 006.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 PRESS FOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY

Contents ix xi

xi xii xii xiv xv

1



3



1

4 4 6 6

Foreword Preface

Contents

How to read this book Casey’s introduction Ben’s introduction

Acknowledgments   1. Processing .  .  . Software Literacy Open

Education Network Context

9   2. Using Processing

39   4. Color 40

Color by number

45

RGB, HSB

43 48

51

Data types

54

Variable names

52 55 56 58 59 61 62

Download, Install

65

10

Export

69

Environment

11

Example walk-through

16

Comments

16 17 17 19 19 20 20

Coding is writing Functions

Expressions, Statements Case sensitivity

Curves

35

77 79 81

Mind the data types Data conversion

Order of operations Shortcuts   6. Flow

Looping

Controlling the flow

Relational expressions Conditionals

Logical operators Variables scope

Formatting code blocks

89

28

34

72

Arithmetic

Reference

Coordinates

32

70

Processing variables

83   7. Interactivity

Console

21

32

65

Variables

Whitespace

21   3. Draw 23

Hexadecimal

51   5. Variables

9 9

Blend

Basic shapes Drawing order Gray values Attributes

84

Mouse data

90

Keyboard data

93 94 94

97 98 100

Mouse buttons Coded keys Events

Mouse events Key events Event flow

Cursor icon

Modes

v

Reas_000.indd 5

7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESS FOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY 103   8. Repeat

173

104

174

103

Iterate

105

for loop

109 111

while loop Loop and draw() Nested loops

115   9. Synthesis 1 115

Sketching software

117

Examples

116

123

125 129 133 137 141

142

143 144 147

148 149 150 153 154

156 157 161

162 164 167 170

Programming techniques

10. Interviews: Image

Manfred Mohr, Une

Esthétique Programmée LettError, RandomFont

173 176 176 177 181 182 185

185

187 188 189 192

Beowolf

197

Substrate

202

Jared Tarbell, Fractal.Invaders, Benjamin Maus, Perpetual Storytelling Apparatus 11. Text

Characters

Words, Sentences

Strings are objects 12. Typography

Draw text

197 204 209 213

213 216 218 219 221

Load media

225

Pixel fonts

226

Vector fonts Text attributes Typing

Typography and interaction 13. Image

Display

Tint, Transparency Mask Filter

225 227 243

245 249 253 257

14. Transform

Translate

Controlling transformations Rotate Scale

Combining transformations

Transformation and interaction New coordinate systems 15. Vertices

Vertex

Points, Lines Geometry Curves

Contours 16. 3D Drawing 3D form Camera

Lights, Materials Texture maps 17. Shapes

Display SVG Display OBJ Transform Create

Modify 18. Synthesis 2

Iteration

Debugging Examples

19. Interviews: Interaction

Lynn Hershman Leeson, Lorna Robert Winter, Ludwig van

Beethoven: Symphony No. 9 Josh On, They Rule

Steph Thirion, Eliss

vi

Reas_000.indd 6

7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESS FOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY 261

261 262 264 267 270 272 275 283 285 289

289 292 295 296 301

301 306 310 314 317 323

323 326 327 329

330 331

20. Calculate

Exponents, Roots Normalize, Map Simple curves

Constraining numbers Distance Easing

Angles, Waves

Circles, Spirals Direction 21. Random

Unexpected values

355

355

358 368 370 371 373 377

377 377 378

Distributions

391

Noise



Random seed

22. Motion

Controlling motion

Motion along curves Mechanical motion Organic motion

Kinetic typography 23. Time

Seconds, Minutes, Hours Milliseconds Date

24. Functions

Abstraction

Why functions?

393 399 403

407 411

413 414 416 419 422 425 427

428

431

334

Create functions

343

Calculate and return values

435

350

Recursion

438

342 345

Overload functions Parameterize

432

436 440 441

443 444

25. Objects

Object-oriented programming Classes and objects Multiples files

Multiple constructors Composite objects Inheritance 26. Synthesis 3

Modularity, reusability Algorithm Examples

27. Interviews: Motion, Performance Larry Cuba, Calculated Movements

Bob Sabiston, Waking Life Golan Levin and Zachary

Lieberman, Messa di Voce SUE.C, Mini Movies 28. Arrays

Define an array

Read array elements Record data

Array functions

Arrays of objects

Two-dimensional arrays 29. Animation

Arrays of images

Animation format, resolution Save sequential images 30. Dynamic Drawing Simple tools

Draw with media Speed

Orientation

Drawings in motion Active tools

vii

Reas_000.indd 7

7/16/2014 3:10:32 PM

PROPERTY OF THE MIT PRESS FOR PROOFREADING, INDEXING, AND PROMOTIONAL PURPOSES ONLY 449

449 453 460

468 475 485

485 486 489 491

31. Simulate

Motion

Particle systems Springs

Cellular automata

Autonomous agent 32. Data

514

516 519 525

525 529 530 531

536 540 543

543 544 548 550 555

555 558 562

565 569

XML

33. Interface

Rollover, Button Drag and drop Check boxes

Radio buttons Scrollbar

34. Image Processing

Scriptographer

585

Jennifer Steinkamp, Madame



Curie

589

595

Strings

JSON

512

Jürg Lehni, Hektor and

Mark Hansen, Listening Post



Data structure

500

506

581

593

Export files

Table

505

37. Interviews: Environment

577

Format data

493

495

575

593

Ash Nehru, Origin 38. Continuing .  .  .

Extend Processing

Processing and Java

595 597

599

Other programming languages Appendix A: Order of Operations Appendix B: Reserved Words

600 Appendix C: ASCII, Unicode 605

Appendix D: Bit, Binary, Hex

615

Appendix F: Programming Languages

623

Related Media

633

Index

609 Appendix E: Optimization

629

Glossary

Read pixels

Write pixels Copy pixels

Color components Pixel array

Pixel components 35. Render Techniques Renderers

Another drawing surface OpenGL surfaces

Combine surfaces 36. Synthesis 4

Collage engine Waves

3D letter

Noise landscape Network

viii

Reas_000.indd 8

7/16/2014 3:10:32 PM