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

More documents

Recommendations

Info

1 Pixels “ A journey of a thousand miles begins with a single step. ” —Lao-tzu In this chapter: – Specifying pixel coordinates. – Basic shapes: point, line, rectangle, ellipse. – Color: grayscale, “ RGB. ” – Color transparency. Pixels 3 Note that we are not doing any programming yet in this chapter! We are just dipping our feet in the water and getting comfortable with the idea of creating onscreen graphics with text-based commands, that is, “ code ” ! 1.1 Graph Paper Th is book will teach you how to program in the context of computational media, and it will use the development environment Processing ( http://www.processing.org ) as the basis for all discussion and examples. But before any of this becomes relevant or interesting, we must fi rst channel our eighth grade selves, pull out a piece of graph paper, and draw a line. Th e shortest distance between two points is a good old fashioned line, and this is where we begin, with two points on that graph paper. Point A (1,0) fi g. 1.1 x-axis 0 1 2 3 4 Point B (4,5) 5 4 3 2 1 0 y-axis Figure 1.1 shows a line between point A (1,0) and point B (4,5). If you wanted to direct a friend of yours to draw that same line, you would give them a shout and say “ draw a line from the point one-zero to the point four-fi ve, please. ” Well, for the moment, imagine your friend was a computer and you wanted to instruct this digital pal to display that same line on its screen. Th e same command applies (only this time you can skip the pleasantries and you will be required to employ a precise formatting). Here, the instruction will look like this: line(1,0,4,5); Congratulations, you have written your fi rst line of computer code! We will get to the precise formatting of the above later, but for now, even without knowing too much, it should make a fair amount of sense. We are providing a command (which we will refer to as a “ function ” ) for the machine to follow entitled “ line. ” In addition, we are specifying some arguments for how that line should be drawn, from point
4 Learning Processing A (0,1) to point B (4,5). If you think of that line of code as a sentence, the function is a verb and the arguments are the objects of the sentence. Th e code sentence also ends with a semicolon instead of a period. � fi g. 1.2 � � � Draw a line from 0,1 to 4,5 Verb Object Object Th e key here is to realize that the computer screen is nothing more than a fancier piece of graph paper. Each pixel of the screen is a coordinate—two numbers, an “ x ” (horizontal) and a “ y ” (vertical)—that determine the location of a point in space. And it is our job to specify what shapes and colors should appear at these pixel coordinates. Nevertheless, there is a catch here. Th e graph paper from eighth grade ( “ Cartesian coordinate system ” ) placed (0,0) in the center with the y-axis pointing up and the x-axis pointing to the right (in the positive direction, negative down and to the left). Th e coordinate system for pixels in a computer window, however, is reversed along the y -axis. (0,0) can be found at the top left with the positive direction to the right horizontally and down vertically. See Figure 1.3 . fi g. 1.3 x-axis x-axis (0,0) (0,0) y-axis y-axis � Eighth grade Computer Exercise 1-1: Looking at how we wrote the instruction for line “ line(1,0,4,5); ” how would you guess you would write an instruction to draw a rectangle? A circle? A triangle? Write out the instructions in English and then translate it into “ code. ” English: ________________________________________________________________ _ Code: ______________________________________________________ ___________ English: ______________________________________________________ ___________ Code: ______________________________________________________ ___________ English: ______________________________________________________ ___________ Code: ______________________________________________________ ___________ Come back later and see how your guesses matched up with how Processing actually works. �
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 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?