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

More documents

Recommendations

Info

fi g. 2.7 Processing 25 Processing also has a very handy “ fi nd in reference ” option. Double-click on any keyword to select it and go to to HELP → FIND IN REFERENCE (or select the keyword and hit SHIFT � CNTRL � F). 2.8 Exercise 2-7: Using the Processing reference, try implementing two functions that we have not yet covered in this book. Stay within the “ Shape ” and “ Color (setting) ” categories. Exercise 2-8: Using the reference, fi nd a function that allows you to alter the thickness of a line. What arguments does the function take? Write example code that draws a line one pixel wide, then fi ve pixels wide, then 10 pixels wide. The “ Play ” Button One of the nice qualities of Processing is that all one has to do to run a program is press the “ play ” button. It is a nice metaphor and the assumption is that we are comfortable with the idea of playing animations,
26 Learning Processing movies, music, and other forms of media. Processing programs output media in the form of real-time computer graphics, so why not just play them too? Nevertheless, it is important to take a moment and consider the fact that what we are doing here is not the same as what happens on an iPod or TiVo. Processing programs start out as text, they are translated into machine code, and then executed to run. All of these steps happen in sequence when the play button is pressed. Let’s examine these steps one by one, relaxed in the knowledge that Processing handles the hard work for us. 2.9 Step 1. Translate to Java. Processing is really Java (this will become more evident in a detailed discussion in Chapter 23). In order for your code to run on your machine, it must fi rst be translated to Java code. Step 2. Compile into Java byte code. Th e Java code created in Step 1 is just another text fi le (with the .java extension instead of .pde). In order for the computer to understand it, it needs to be translated into machine language. Th is translation process is known as compilation. If you were programming in a diff erent language, such as C, the code would compile directly into machine language specifi c to your operating system. In the case of Java, the code is compiled into a special machine language known as Java byte code. It can run on diff erent platforms (Mac, Windows, cellphones, PDAs, etc.) as long as the machine is running a “ Java Virtual Machine. ” Although this extra layer can sometimes cause programs to run a bit slower than they might otherwise, being cross-platform is a great feature of Java. For more on how this works, visit http://java.sun.com or consider picking up a book on Java programming (after you have fi nished with this one). Step 3. Execution. Th e compiled program ends up in a JAR fi le. A JAR is a Java archive fi le that contains compiled Java programs ( “ classes ” ), images, fonts, and other data fi les. Th e JAR fi le is executed by the Java Virtual Machine and is what causes the display window to appear. Your First Sketch Now that we have downloaded and installed Processing , understand the basic menu and interface elements, and have gotten familiar with the online reference, we are ready to start coding. As I briefl y mentioned in Chapter 1, the fi rst half of this book will follow one example that illustrates the foundational elements of programming: variables, arrays, conditionals, loops, functions, and objects . Other examples will be included along the way, but following just one will reveal how the basic elements behind computer programming build on each other. Th e example will follow the story of our new friend Zoog, beginning with a static rendering with simple shapes. Zoog’s development will include mouse interaction, motion, and cloning into a population of many Zoogs. While you are by no means required to complete every exercise of this book with your own alien form, I do suggest that you start with a design and after each chapter, expand the functionality of that design with the programming concepts that are explored. If you are at a loss for an idea, then just draw your own little alien, name it Gooz, and get programming! See Figure 2.8 .
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 12 and 13: Introduction xi While both of these
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 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?