Learning Processing: A Beginner's Guide to Programming Images ...

More documents

Recommendations

Info

Introduction xi While both of these languages are wonderful for their simplicity and innovation, their capabilities are limited. Processing , a direct descendent of Logo and Design by Numbers , was born in 2001 in the “ Aesthetics and Computation ” research group at the Massachusetts Institute of Technology Media Lab. It is an open source initiative by Casey Reas and Benjamin Fry, who developed Processing as graduate students studying with John Maeda. “Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.” — www.processing.org To sum up, Processing is awesome. First of all, it is free. It doesn’t cost a dime. Secondly, because Processing is built on top of the Java programming language (this is explored further in the last chapter of this book), it is a fully functional language without some of the limitations of Logo or Design by Numbers . Th ere is very little you can’t do with Processing . Finally, Processing is open source. For the most part, this will not be a crucial detail of the story of this book. Nevertheless, as you move beyond the beginning stages, this philosophical principle will prove invaluable. It is the reason that such an amazing community of developers, teachers, and artists come together to share work, contribute ideas, and expand the features of Processing . A quick surf-through of the processing.org Web site reveals this vibrant and creative community. Th ere, code is shared in an open exchange of ideas and artwork among beginners and experts alike. While the site contains a complete reference as well as a plethora of examples to get you started, it does not have a step-by-step tutorial for the true beginner. Th is book is designed to give you a jump start on joining and contributing to this community by methodically walking you through the fundamentals of programming as well as exploring some advanced topics. It is important to realize that, although without Processing this book might not exist, this book is not a Processing book per se. Th e intention here is to teach you programming. We are choosing to use Processing as our learning environment, but the focus is on the core computational concepts, which will carry you forward in your digital life as you explore other languages and environments. But shouldn’t I be Learning __________ ? You know you want to. Fill in that blank. You heard that the next big thing is that programming language and environment Flibideefl obidee. Sure it sounds made up, but that friend of yours will not stop talking about how awesome it is. How it makes everything soooo easy. How what used to take you a whole day to program can be done in fi ve minutes. And it works on a Mac. And a PC! And a toaster oven! And you can program your pets to speak with it. In Japanese! Here’s the thing. Th at magical language that solves all your problems does not exist. No language is perfect, and Processing comes with its fair share of limitations and fl aws. Processing , however, is an excellent place to start (and stay). Th is book teaches you the fundamentals of programming so that you can apply them throughout your life, whether you use Processing , Java, Actionscript, C, PHP, or some other language.
xii Introduction It is true that for some projects, other languages and environments can be better. But Processing is really darn good for a lot of stuff , especially media-related and screen-based work. A common misconception is that Processing is just for fi ddling around; this is not the case. People (myself included) are out there using Processing from day number 1 to day number 365 of their project. It is used for web applications, art projects in museums and galleries, and exhibits and installations in public spaces. Most recently, I used Processing to develop a real-time graphics video wall system ( http://www.mostpixelsever.com ) that can display content on a 120 by 12 foot (yes, feet!) video wall in the lobby of InterActive Corps ’ New York City headquarters. Not only is Processing great for actually doing stuff , but for learning, there really isn’t much out there better. It is free and open source. It is simple. It is visual. It is fun. It is object-oriented (we will get to this later.) And it does actually work on Macs, PCs, and Linux machines (no talking dogs though, sorry). So I would suggest to you that you stop worrying about what it is you should be using and focus on learning the fundamentals with Processing . Th at knowledge will take you above and beyond this book to any language you want to tackle. Write in this book! Let’s say you are a novelist. Or a screenwriter. Is the only time you spend writing the time spent sitting and typing at a computer? Or (gasp) a typewriter? Most likely, this is not the case. Perhaps ideas swirl in your mind as you lie in bed at night. Or maybe you like to sit on a bench in the park, feed the pigeons, and play out dialogue in your head. And one late night, at the local pub, you fi nd yourself scrawling out a brilliant plot twist on a napkin. Well, writing software, programming, and creating code is no diff erent. It is really easy to forget this since the work itself is so inherently tied to the computer. But you must fi nd time to let your mind wander, think about logic, and brainstorm ideas away from the chair, the desk, and the computer. Personally, I do all my best programming while jogging. Sure, the actual typing on the computer part is pretty important. I mean, you will not end up with a lifechanging, working application just by laying out by the pool. But thinking you always need to be hunched over the glare of an LCD screen will not be enough. Writing all over this book is a step in the right direction, ensuring you will practice thinking through code away from the keyboard. I have included many exercises in the book that incorporate a “ fi ll in the blanks ” approach. (All of these fi ll in the blanks exercises have answers on the book’s Web site, http://www.learningprocessing.com, so you can check your work.) Use these pages! When an idea inspires you, make a note and write it down. Th ink of the book as a workbook and sketchbook for your computational ideas. (You can of course use your own sketchbook, too.) I would suggest you spend half your time reading this book away from the computer and the other half, side by side with your machine, experimenting with example code along the way. How should I read this book? It is best to read this book in order. Chapter 1, Chapter 2, Chapter 3, and so on. You can get a bit more relaxed about this after the end of Chapter 9 but in the beginning it is pretty important.
Page 2 and 3: Learning Processing A Beginner’s
Page 4 and 5: Learning Processing A Beginner’s
Page 6 and 7: Contents Acknowledgments vii Introd
Page 8 and 9: Acknowledgments In the fall of 2001
Page 10 and 11: Introduction What is this book? Th
Page 14 and 15: Introduction xiii Th e book is desi
Page 16 and 17: Introduction xv Th is book’s web
Page 18 and 19: Introductory Exercise: Write instru
Page 20 and 21: Lesson One The Beginning 1 Pixels 2
Page 22 and 23: 1 Pixels “ A journey of a thousan
Page 24 and 25: 1.2 Simple Shapes Pixels 5 Th e vas
Page 26 and 27: 0 1 2 3 4 5 6 7 8 9 fi g. 1.9 top l
Page 28 and 29: 1.3 Pixels 9 Exercise 1-3: Reverse
Page 30 and 31: Example 1-2: noFill ( ) background(
Page 32 and 33: fi g. 1.19 Pixels 13 Exercise 1-5:
Page 34 and 35: colorMode(RGB,100); Pixels 15 Th e
Page 36 and 37: 2 2.1 Processing “ Computers in t
Page 38 and 39: fi g. 2.2 Once you have opened the
Page 40 and 41: Let’s write a fi rst example ( se
Page 42 and 43: Line 9 fi g. 2.6 Processing is case
Page 44 and 45: fi g. 2.7 Processing 25 Processing
Page 46 and 47: Example 2-1: Zoog again size(200,20
Page 48 and 49: Processing 29 To see the applet wor
Page 50 and 51: 3 3.1 Interaction “ Always rememb
Page 52 and 53: Let’s look at what will surely be
Page 54 and 55: 3.3 Variation with the Mouse Intera
Page 56 and 57: Draw Zoog's eyes fill(0); ellipse(8
Page 58 and 59: 3.4 Mouse Clicks and Key Presses In
Page 60 and 61: Draw Zoog's eyes fill(mo useX,0,mou
Page 62 and 63:
Lesson Two Everything You Need to K
Page 64 and 65:
4 4.1 Variables “ All of the book
Page 66 and 67:
4.2 Variable Declaration and Initia
Page 68 and 69:
A variable can also be initialized
Page 70 and 71:
x = 5; x = a + b; x = y - 10 * 20;
Page 72 and 73:
void draw() { // Draw the backgroun
Page 74 and 75:
4.6 Random: Variety is the spice of
Page 76 and 77:
4.7 Example 4-7: Filling variables
Page 78 and 79:
5 5.1 Conditionals Conditionals 59
Page 80 and 81:
Finally, for testing multiple condi
Page 82 and 83:
Conditionals 63 It is worth pointin
Page 84 and 85:
Conditionals 65 Getting into the ha
Page 86 and 87:
Our fi rst instinct might be to wri
Page 88 and 89:
5.5 Multiple Rollovers Conditionals
Page 90 and 91:
Conditionals 71 We can then check t
Page 92 and 93:
5.7 Conditionals 73 Exercise 5-8: E
Page 94 and 95:
Reversing the Polarity of a Number
Page 96 and 97:
One way to solve this problem is to
Page 98 and 99:
Display the square fill(0); noStrok
Page 100 and 101:
6 Loops “ Repetition is the reali
Page 102 and 103:
Loops 83 (see Chapter 5). However,
Page 104 and 105:
while (y < 100) { // Loop! } 3. Wha
Page 106 and 107:
while (x < = endLegs) { line(x,y,x,
Page 108 and 109:
Th e same exact loop can be program
Page 110 and 111:
Loops 91 Th is was a nice simplifi
Page 112 and 113:
6.6 Loop Inside the Main Loop Loops
Page 114 and 115:
6.7 float distance = abs(mouseX - i
Page 116 and 117:
Draw Zoog's legs stroke(0); line(x-
Page 118 and 119:
Lesson Three Organization 7 Functio
Page 120 and 121:
7 7.1 Functions “ When it’s all
Page 122 and 123:
7.2 “ User Defi ned ” Functions
Page 124 and 125:
Example 5-6: Bouncing ball // Decla
Page 126 and 127:
7.5 Functions 107 Exercise 7-3: Tak
Page 128 and 129:
Functions 109 It should be fairly a
Page 130 and 131:
int globalX = 0; int globalY = 100;
Page 132 and 133:
void setup() { println( "a"); funct
Page 134 and 135:
If we did not include a return stat
Page 136 and 137:
7.8 Zoog Reorganization Zoog is now
Page 138 and 139:
void draw() { } background(0); // D
Page 140 and 141:
8 8.1 Objects “ No object is so b
Page 142 and 143:
Setup: Draw: Initialize car color.
Page 144 and 145:
Objects 125 • The Class Name—Th
Page 146 and 147:
Objects 127 One other thing; with t
Page 148 and 149:
fi g. 8.1 fi g. 8.2 fi g. 8.4 fi g.
Page 150 and 151:
Objects 131 Nevertheless, this is q
Page 152 and 153:
void draw() { } background(100); ba
Page 154 and 155:
Objects 135 modular, reusable packa
Page 156 and 157:
Lesson Three Project Step 1. Take y
Page 158 and 159:
Lesson Four More of the Same 9 Arra
Page 160 and 161:
9 Arrays “ I might repeat to myse
Page 162 and 163:
Car myCar80 Car myCar81 Car myCar82
Page 164 and 165:
9.3 Declaring and Creating an Array
Page 166 and 167:
9.4 Initializing an Array One way t
Page 168 and 169:
Example 9-5: Using a for loop to in
Page 170 and 171:
Arrays 151 Now comes the hard part.
Page 172 and 173:
9.7 Arrays 153 Exercise 9-7: Rewrit
Page 174 and 175:
9.8 Interactive Objects Arrays 155
Page 176 and 177:
Check if point is inside of Stripe
Page 178 and 179:
alls[i].gravity(); balls[i].move();
Page 180 and 181:
Draw Zoog's arms with a for loop fo
Page 182 and 183:
Lesson Five Putting It All Together
Page 184 and 185:
10 10.1 Algorithms “ Lather. Rins
Page 186 and 187:
Translating the preceding algorithm
Page 188 and 189:
void draw() { background(255); stro
Page 190 and 191:
Example 10-2: Bouncing ball class c
Page 192 and 193:
Now that the function is complete,
Page 194 and 195:
10.6 // Constructor Ball(float temp
Page 196 and 197:
Algorithms 177 With the above logic
Page 198 and 199:
Drop() { r = 8; // All raindrops ar
Page 200 and 201:
Example 10-7: Drops one at a time /
Page 202 and 203:
Algorithms 183 Notice how every sin
Page 204 and 205:
oolean intersecting = ball1.interse
Page 206 and 207:
} void setLocation(float tempX, flo
Page 208 and 209:
Algorithms 189 It is important to r
Page 210 and 211:
11 Debugging “ Th e diff erence b
Page 212 and 213:
Debugging 193 Once all the code is
Page 214 and 215:
12 Libraries “ If truth is beauty
Page 216 and 217:
or /Applications/Processing 0135/ c
Page 218 and 219:
Lesson Six The World Revolves Aroun
Page 220 and 221:
13 Mathematics Mathematics 201 “
Page 222 and 223:
Mathematics 203 Th erefore, modulo
Page 224 and 225:
Th e probability of a coin fl ippin
Page 226 and 227:
13.6 Perlin Noise Mathematics 207 O
Page 228 and 229:
Mathematics 209 How quickly we incr
Page 230 and 231:
It is fairly intuitive for us to th
Page 232 and 233:
fi g. 13.9 y-axis sine(theta) � y
Page 234 and 235:
Example 13-6: Oscillation float the
Page 236 and 237:
Mathematics 217 In 1975, Benoit Man
Page 238 and 239:
Mathematics 219 said about recursio
Page 240 and 241:
Mathematics 221 A two-dimensional a
Page 242 and 243:
Example 13-10: Two-dimensional arra
Page 244 and 245:
} void display() { } // FILL IN Mat
Page 246 and 247:
14 14.1 Translation and Rotation (i
Page 248 and 249:
Our fi rst instinct might be to add
Page 250 and 251:
Example 14-3: A rectangle moving al
Page 252 and 253:
When using the OPENGL mode, you mus
Page 254 and 255:
Translation and Rotation (in 3D!) 2
Page 256 and 257:
14.5 fill(150,150); vertex(-t, t,-t
Page 258 and 259:
14.6 Example 14-5: Rectangle rotati
Page 260 and 261:
Page 262 and 263:
Page 264 and 265:
Page 266 and 267:
fill(0,100); // Note the use of pus
Page 268 and 269:
14.9 Example 14-17: Nested push and
Page 270 and 271:
stroke(0); fill(175); ellipse(0,0,d
Page 272 and 273:
Lesson Seven Pixels Under a Microsc
Page 274 and 275:
15 Images Images 255 “ Politics w
Page 276 and 277:
And yet: PImage img = loadImage( "f
Page 278 and 279:
15.3 My Very First Image Processing
Page 280 and 281:
Images 261 Even better, if we just
Page 282 and 283:
Images 263 // Create a grayscale co
Page 284 and 285:
Images 265 15.6 Intro to Image Proc
Page 286 and 287:
Images 267 Since we are altering th
Page 288 and 289:
15.9 More on fi lter( ): fi lter(mo
Page 290 and 291:
Images 271 Example 15-13 performs a
Page 292 and 293:
Example 15-14: “ Pointillism ”
Page 294 and 295:
16 16.1 Video “ I have no memory.
Page 296 and 297:
Video 277 Th e above line of code i
Page 298 and 299:
void draw() { // Check to see if a
Page 300 and 301:
16.3 Recorded Video Video 281 Displ
Page 302 and 303:
16.4 Video 283 Exercise 16-3: Using
Page 304 and 305:
Video 285 For every square at colum
Page 306 and 307:
} } // Each rect is colored white w
Page 308 and 309:
16.5 Video as Sensor, Computer Visi
Page 310 and 311:
Now, we are ready to compare the co
Page 312 and 313:
16.6 Video 293 Exercise 16-5: Take
Page 314 and 315:
void setup() { size(320,240); video
Page 316 and 317:
Example 16-13: Simple motion detect
Page 318 and 319:
16.8 // Step 4, compare colors (pre
Page 320 and 321:
Lesson Seven Project Develop a soft
Page 322 and 323:
Lesson Eight The Outside World 17 T
Page 324 and 325:
17 17.1 Text “ I could entertain
Page 326 and 327:
Exercise 17-2: Loop through and pri
Page 328 and 329:
17.3 Displaying Text Text 309 We wi
Page 330 and 331:
println(PFont.list()); For demonstr
Page 332 and 333:
X = �50 fi g. 17.4 float w = text
Page 334 and 335:
Example 17-4: Text mirror import pr
Page 336 and 337:
textFont(f); // Set the font transl
Page 338 and 339:
Exercise 17-9: Using textWidth( ) ,
Page 340 and 341:
Example 17-7: Boxes along a curve P
Page 342 and 343:
Text 323 Exercise 17-10: Create a s
Page 344 and 345:
18 Data Input “ A million monkeys
Page 346 and 347:
Example 18-1: User input PFont f; /
Page 348 and 349:
Data Input 329 Th e reverse of spli
Page 350 and 351:
Example 18-2: Graphing comma separa
Page 352 and 353:
Data Input 333 Th e rollover( ) fun
Page 354 and 355:
18.4 diameter = diameter_; } // Tru
Page 356 and 357:
} // Find the index of the end tag
Page 358 and 359:
void mousePressed() { // Increment
Page 360 and 361:
18.6 for (int i = 0; i < kinglear.l
Page 362 and 363:
Create and make an asynchronous req
Page 364 and 365:
� student � � id � 002 �
Page 366 and 367:
Requests for XML data are made via
Page 368 and 369:
18.8 Using the Processing XML Libra
Page 370 and 371:
XMLElement diameterElement = childr
Page 372 and 373:
Example 18-10: A Yahoo search impor
Page 374 and 375:
However, if you request a URL on a
Page 376 and 377:
19 19.1 Data Streams “ I’m mad
Page 378 and 379:
import processing.net.* ; Server se
Page 380 and 381:
Data Streams 361 Once the server is
Page 382 and 383:
19.4 void draw() { background(255);
Page 384 and 385:
Data Streams 365 must be networked
Page 386 and 387:
Data Streams 367 will send X , Y co
Page 388 and 389:
Data Streams 369 Here is the full S
Page 390 and 391:
Here is the entire client sketch: 1
Page 392 and 393:
Data Streams 373 Serial communicati
Page 394 and 395:
Data Streams 375 of information, ca
Page 396 and 397:
Corresponding Arduino code: int sen
Page 398 and 399:
Lesson Nine Making Noise 20 Sound 2
Page 400 and 401:
20 Sound “ Check. Check. Check 1.
Page 402 and 403:
void setup() { Sonia.start(this); }
Page 404 and 405:
void mousePressed() { // If the use
Page 406 and 407:
Sound 387 check and see if a sound
Page 408 and 409:
Is a point inside the doorbell (use
Page 410 and 411:
Pressing the mouse stops and starts
Page 412 and 413:
20.6 void draw() { background(255,1
Page 414 and 415:
In code, this translates to: // If
Page 416 and 417:
21 Exporting “ Wait a minute. I t
Page 418 and 419:
Th is code can be inserted anywhere
Page 420 and 421:
void setup() { size(400, 400); begi
Page 422 and 423:
Exporting 403 save( ) takes one arg
Page 424 and 425:
Exporting 405 Example 21-5 records
Page 426 and 427:
Lesson Ten Beyond Processing 22 Adv
Page 428 and 429:
22 Advanced Object-Oriented Program
Page 430 and 431:
class Point { float x,y; Point(floa
Page 432 and 433:
Advanced Object-Oriented Programmin
Page 434 and 435:
Advanced Object-Oriented Programmin
Page 436 and 437:
class Circle extends Shape { // inh
Page 438 and 439:
for (int i = 0; i < dogs.length; i
Page 440 and 441:
22.5 Example 22-2: Polymorphism //
Page 442 and 443:
23 23.1 Java “ I l o ve c off ee,
Page 444 and 445:
Java 425 instead of Processing , sp
Page 446 and 447:
fi g. 23.2 Java 427 Just as with th
Page 448 and 449:
Particle p = parray[i]; p.run(); p.
Page 450 and 451:
Hint: Add a function that returns a
Page 452 and 453:
Example 23-4: Super fancy ArrayList
Page 454 and 455:
Java 435 It is sad when these error
Page 456 and 457:
Th e tutorials will cover the same
Page 458 and 459:
Appendix: Common Errors Appendix 43
Page 460 and 461:
Error: No accessible fi eld named
Page 462 and 463:
void draw() { thing.display(); } Co
Page 464 and 465:
Error: Perhaps you wanted the overl
Page 466 and 467:
Index AIFF (Audio Interchange File
Page 468 and 469:
Fill( ) function 10 , 11 , 256 , 30
Page 470 and 471:
One-dimensional Perlin noise 208 OP
Page 472:
solar system, processing 247-9 vert
show all

Learning Processing: A Beginner's Guide to Programming Images ...

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?