Processing: Creative Coding and Computational Art

More documents

Recommendations

Info

Summary We began this chapter comparing Java and Processing’s approach to coding interactivity. As usual, compared to pure Java, Processing simplifies interactivity. Using Processing’s built-in mouse event functions, I coded some simple sketches that reacted to the user’s mouse presses, as well as mouse releases. I compared functions such as mousePressed() with their companion Boolean variables of the same name (mousePressed), and looked at some examples that used both. I also discussed the difference between Processing’s mouseMoved() and mouseDragged() functions. Developing some longer examples, I created a node-based shape-building and animation sketch and also a simple paint program, including a custom GUI with reactive multi-state buttons and a draggable slider. After the mouse events, we looked at Processing’s keyboard events, which work similarly to the mouse events. I compared coded keys, such as the arrow keys, defined as constants in Processing, with the standard keyboard keys—letters, numbers, and so forth. Finally, I created an animated paint program that was completely controlled by keyboard events. To learn more about pushing Processing’s event detection and handling capabilities beyond the mouse and keyboard, check out the Processing libraries (http://processing.org/ reference/libraries/index.html). The final two chapters of the book introduce coding 3D in Processing—one of the most exciting features of the language. INTERACTIVITY 613 12
Page 1 and 2:
IrA GreenberG CreATe CoDe ArT, vIsu
Page 3 and 4:
Processing: Creative Coding and Com
Page 5 and 6:
CONTENTS AT A GLANCE Foreword . . .
Page 7 and 8:
CONTENTS Foreword . . . . . . . . .
Page 9 and 10:
CONTENTS viii The joy of math . . .
Page 11 and 12:
CONTENTS x Applying OOP to shape cr
Page 13 and 14:
CONTENTS xii Environment . . . . .
Page 15 and 16:
FOREWORD If you are like me (and th
Page 17 and 18:
ABOUT THE AUTHOR With an eclectic b
Page 19 and 20:
ACKNOWLEDGMENTS I am very fortunate
Page 21 and 22:
INTRODUCTION Welcome to Processing:
Page 23 and 24:
INTRODUCTION xxii Intended audience
Page 25 and 26:
INTRODUCTION xxiv Setting up Proces
Page 27 and 28:
INTRODUCTION xxvi Hopefully by now
Page 29 and 30:
INTRODUCTION xxviii Figure 3. Scree
Page 31 and 32:
INTRODUCTION xxx New or changed cod
Page 34 and 35:
1 CODE ART
Page 36 and 37:
The problem with a Photoshop filter
Page 38 and 39:
Figure 1-3. Example of ancient art
Page 40 and 41:
then jump 400 years to 1614 and Joh
Page 42 and 43:
fertile imagination remained intact
Page 44 and 45:
As an aside, it’s worth observing
Page 46 and 47:
John Whitney Sr., 1918-1995 John Wh
Page 48 and 49:
algorithms. To learn more about Coh
Page 50 and 51:
landfill/), and Feed (www.potatolan
Page 52 and 53:
periodicals such as Art Journal, Wi
Page 54 and 55:
And many more . . . While I have in
Page 58 and 59:
2 CREATIVE CODING
Page 60 and 61:
I think what was reinforced for me
Page 62 and 63:
customized commands, and run loops.
Page 64 and 65:
of code that work like processing m
Page 66 and 67:
introduced to become larger, more c
Page 68 and 69:
Without getting too geeky, the main
Page 70 and 71:
A framework is just a concept for b
Page 72 and 73:
algorithm in a math class in high s
Page 74 and 75:
frame. The loop keeps running and k
Page 76 and 77:
the time to play at whatever level
Page 78 and 79:
} pts[counter2].y-yg); xg*=-1; coun
Page 80 and 81:
The overall movement was good, but
Page 82 and 83:
Obviously, there are a lot of thing
Page 84 and 85:
} } // generates organic looking br
Page 88 and 89:
3 CODE GRAMMAR 101
Page 90 and 91:
Your first program In most programm
Page 92 and 93:
message comes up on the bar in the
Page 94 and 95:
Since the getBreed() method would r
Page 96 and 97:
Variables Variables are essential t
Page 98 and 99:
It’s because strict typing helps
Page 100 and 101:
Stage 3 adds the gradient: /* title
Page 102 and 103:
Next, I assign values to some primi
Page 104 and 105:
In the first preceding example, add
Page 106 and 107:
Assignment operators The only other
Page 108 and 109:
* title: Bouncing Ball description:
Page 110 and 111:
Animation is a perfect example of t
Page 112 and 113:
if (hunger= starving) { eatAnything
Page 114 and 115:
Ternary operator The last condition
Page 116 and 117:
The items array has 50 places reser
Page 118 and 119:
println(x); x += 1; } while(x
Page 120 and 121:
Figure 3-4. Continuous radial gradi
Page 122 and 123:
int ballCount = 500; int ballSize =
Page 124 and 125:
Hopefully, you were able to success
Page 126 and 127:
function call above*/ // fill(i*255
Page 128 and 129:
If you run this, you should see a 1
Page 130 and 131:
yspeed*=-1; } } Within the draw() f
Page 132 and 133:
void checkCollisions(int xp, int yp
Page 134 and 135:
createRect(50, 50, 100, 100, 20, 5,
Page 138 and 139:
4 COMPUTER GRAPHICS, THE FUN, EASY
Page 140 and 141:
Some of the reasons coding graphics
Page 142 and 143:
When working in a 3D coordinate sys
Page 144 and 145:
plotted, the vertices are connected
Page 146 and 147:
eally shines. And remember, as you
Page 148 and 149:
need to be stored in memory, and th
Page 150 and 151:
Within each of these application ar
Page 152 and 153:
don’t realize you’re doing it
Page 154 and 155:
Geometry Like algebra, geometry dat
Page 156 and 157:
(second-degree) curve has one turni
Page 158 and 159:
or possibly even a complete crash o
Page 160 and 161:
This linear motion would plot as a
Page 162 and 163:
and began doubling. By step 80, the
Page 164 and 165:
*Simple Repeating Wave Pattern Ira
Page 166 and 167:
float waveGap = 10; float frequency
Page 168 and 169:
a piece of paper and do a little mo
Page 170 and 171:
Interactivity Figure 4-13. Puff Peo
Page 172:
Events will be covered and implemen
Page 175 and 176:
PROCESSING: CREATIVE CODING AND COM
Page 177 and 178:
Page 179 and 180:
Page 181 and 182:
Page 183 and 184:
Page 185 and 186:
Page 187 and 188:
Page 189 and 190:
Page 191 and 192:
Page 193 and 194:
Page 195 and 196:
Page 197 and 198:
Page 199 and 200:
Page 201 and 202:
Page 204 and 205:
6 LINES
Page 206 and 207:
Figure 6-2. Two-point sketch Adding
Page 208 and 209:
Streamlining the sketch with a whil
Page 210 and 211:
type into the sketch. Although the
Page 212 and 213:
Figure 6-7. Randomized particle spr
Page 214 and 215:
Figure 6-9. Multiple randomized par
Page 216 and 217:
Coding a grid To begin, I’ll show
Page 218 and 219:
Notice that you can make the value
Page 220 and 221:
float steps = totalPts+1; int total
Page 222 and 223:
Creating space through fades Your l
Page 224 and 225:
for (int j=0; j
Page 226 and 227:
Figure 6-19. Yin Yang Fade sketch,
Page 228 and 229:
coordinates of the line. For exampl
Page 230 and 231:
Figure 6-24. End cap variation exam
Page 232 and 233:
Figure 6-25. Auto Layout sketch Thi
Page 234 and 235:
int xPadding = 150; int yPadding =
Page 236 and 237:
Figure 6-27. Table Layout II sketch
Page 238 and 239:
for (int i=0; i
Page 240 and 241:
This is the same drawTable() functi
Page 242 and 243:
easy. The benefit of internally rec
Page 244 and 245:
I call my custom function makeRect(
Page 246 and 247:
As you might suspect, anti-aliasing
Page 248 and 249:
call scribble function strokeWeight
Page 250 and 251:
else { } // extra line needed to at
Page 252 and 253:
smooth(); float x = random(width);
Page 254 and 255:
Figure 6-36. Concentric Maze sketch
Page 256 and 257:
void setup(){ //these values can be
Page 258 and 259:
Create a Triangle size(400, 400); b
Page 260 and 261:
Figure 6-39. Create 3 Triangles ske
Page 262 and 263:
Poly Pattern I (table structure) /*
Page 264 and 265:
Poly Pattern II (spiral) /* Poly Pa
Page 266 and 267:
Poly Pattern III (polystar) /* Poly
Page 268 and 269:
Figure 6-46. Poly Pattern III (poly
Page 272 and 273:
7 CURVES
Page 274 and 275:
size(200, 200); background(255); in
Page 276 and 277:
You should notice some familiar str
Page 278 and 279:
int margin = height/15; strokeWeigh
Page 280 and 281:
Figure 7-8. Revealing the points ma
Page 282 and 283:
* Curves II Ira Greenberg, December
Page 284 and 285:
lower particle speed ySpeed[i]*=gra
Page 286 and 287:
Figure 7-11. Curves simulating a fo
Page 288 and 289:
Figure 7-13. Damping effect on curv
Page 290 and 291:
particle style strokeWeight(strokeS
Page 292 and 293:
By using functions to organize a pr
Page 294 and 295:
for (int i=0; i
Page 296 and 297:
Figure 7-18. Generating a curve wit
Page 298 and 299:
float x = 0, y = 0; int loopLimit =
Page 300 and 301:
concentric circles size(200, 200);
Page 302 and 303:
Pie charts, although valuable as vi
Page 304 and 305:
curve() and bezier() The next two P
Page 306 and 307:
Next is an interactive example that
Page 308 and 309:
Figure 7-27. Interpolating a Bézie
Page 310 and 311:
ezier(350, 100, 400, 150, 350, 250,
Page 312 and 313:
Figure 7-30. Spline curve using Pro
Page 314 and 315:
curve segments noFill(); // comment
Page 316 and 317:
control handles fill(255); ellipse(
Page 318 and 319:
Figure 7-32. bezier() vs. bezierVer
Page 320 and 321:
curveVertex(92+x, 15); curveVertex(
Page 322 and 323:
strokeWeight(.75); stroke(0); rectM
Page 324 and 325:
Figure 7-35. Bézier Ellipse sketch
Page 326 and 327:
I included one last example (shown
Page 328 and 329:
curveTightness(tightness); beginSha
Page 330:
Summary Curves, and the math behind
Page 333 and 334:
Page 335 and 336:
Page 337 and 338:
Page 339 and 340:
Page 341 and 342:
Page 343 and 344:
Page 345 and 346:
Page 347 and 348:
Page 349 and 350:
Page 351 and 352:
Page 353 and 354:
Page 355 and 356:
Page 357 and 358:
Page 359 and 360:
Page 361 and 362:
Page 363 and 364:
Page 365 and 366:
Page 367:
Page 371 and 372:
Page 373 and 374:
Page 375 and 376:
Page 377 and 378:
Page 379 and 380:
Page 381 and 382:
Page 383 and 384:
Page 385 and 386:
Page 387 and 388:
Page 389 and 390:
Page 391 and 392:
Page 393 and 394:
Page 395 and 396:
Page 397 and 398:
Page 399 and 400:
Page 401 and 402:
Page 403 and 404:
Page 405 and 406:
Page 407 and 408:
Page 409 and 410:
Page 411 and 412:
Page 413 and 414:
Page 415 and 416:
Page 417 and 418:
Page 419 and 420:
Page 421 and 422:
Page 423 and 424:
Page 425 and 426:
Page 427 and 428:
Page 430 and 431:
10 COLOR AND IMAGING
Page 432 and 433:
left squares fill(255, 120, 0); rec
Page 434 and 435:
the color. Up to this point in the
Page 436 and 437:
} radius*=ratio; ratio-=.1; } } els
Page 438 and 439:
Figure 10-4. Alpha sketch In this e
Page 440 and 441:
A quick review of creating transfor
Page 442 and 443:
* Nematode - stage 1 Ira Greenberg,
Page 444 and 445:
Figure 10-8. Nematode sketch (stage
Page 446 and 447:
Figure 10-9. Finished Nematode sket
Page 448 and 449:
the decreasing wavelengths of the i
Page 450 and 451:
values, just to illustrate the poss
Page 452 and 453:
lerpColor() uses the same approach
Page 454 and 455:
I want to mention two final points
Page 456 and 457:
column for (int i=x; i
Page 458 and 459:
needs to be increased, as radius in
Page 460 and 461:
Figure 10-19. Wave Gradient sketch
Page 462 and 463:
for (int i=0; i
Page 464 and 465:
Figure 10-23. Load an Image sketch
Page 466 and 467:
The image() function has an extra f
Page 468 and 469:
In the last example, I created an a
Page 470 and 471:
Figure 10-27. Simple Image Encrypti
Page 472 and 473:
Figure 10-28. Pixilate sketch The n
Page 474 and 475:
Figure 10-30. Tint sketch Speeding
Page 476 and 477:
* Tint (using bitwise operations) C
Page 478 and 479:
the book that a primitive type is d
Page 480 and 481:
The mask works like an alpha channe
Page 482 and 483:
ect(random(width), random(height),
Page 484 and 485:
This last sketch couldn’t be simp
Page 486 and 487:
separate out and invert component c
Page 488 and 489:
Figure 10-39. GRAY Filter sketch Th
Page 490 and 491:
adius is set high, the blurring can
Page 492 and 493:
lend() PImage Method sketch // both
Page 494 and 495:
Figure 10-45. blend() Function with
Page 496 and 497:
The next sketch utilizes some for l
Page 498 and 499:
In the last example, I used Process
Page 500 and 501:
Inheritance In OOP, inheritance des
Page 502 and 503:
AXIS_VERTICAL from outside the Grad
Page 504 and 505:
y axis if(axis == AXIS_VERTICAL){ f
Page 506 and 507:
calculate differences between color
Page 508 and 509:
c7 = color(0); c8 = color(255); r1
Page 510:
In the “Imaging” section, you d
Page 513 and 514:
Page 515 and 516:
Page 517 and 518:
Page 519 and 520:
Page 521 and 522:
Page 523 and 524:
Page 525 and 526:
Page 527 and 528:
Page 529 and 530:
Page 531 and 532:
Page 533 and 534:
Page 535 and 536:
Page 537 and 538:
Page 539 and 540:
Page 541 and 542:
Page 543 and 544:
Page 545 and 546:
Page 547 and 548:
Page 549 and 550:
Page 551 and 552:
Page 553 and 554:
Page 555 and 556:
Page 557 and 558:
Page 559 and 560:
Page 561 and 562:
Page 563 and 564:
Page 565 and 566:
Page 567 and 568:
Page 569 and 570:
Page 571 and 572:
Page 573 and 574:
Page 575 and 576:
Page 577 and 578:
Page 579 and 580:
Page 581 and 582:
Page 583 and 584:
Page 585 and 586:
Page 587 and 588:
Page 589 and 590:
Page 591 and 592:
Page 594 and 595: 12 INTERACTIVITY
Page 596 and 597: } public void mouseClicked(MouseEve
Page 598 and 599: void setup(){ size(400, 400); // in
Page 600 and 601: initialize x, y x = width/2.0; y =
Page 602 and 603: float friction = .85; float[]jitter
Page 604 and 605: nodeYPos = append(nodeYPos, mouseY)
Page 606 and 607: As usual, I declare global variable
Page 608 and 609: are filled with black. Using the in
Page 610 and 611: } } } } } // bottom display window
Page 612 and 613: color btnUpState = color(200, 200,
Page 614 and 615: float xSpeed = 0; color movingSquar
Page 616 and 617: xSpeed-=.2; btn1Background = btnDow
Page 618 and 619: mouse trails if (isTrailable){ fill
Page 620 and 621: isTrailsSelected, which changes the
Page 622 and 623: shapes. The following example, in s
Page 624 and 625: set initial button background color
Page 626 and 627: also makes the code a little harder
Page 628 and 629: stroke(200); rect(eraserBtn[0], era
Page 630 and 631: } sliderValue = (sliderHandle[0]-sl
Page 632 and 633: if (!isBrushSelected){ if (mouseX>b
Page 634 and 635: selection can be active at a time.
Page 636 and 637: ectBackground = color(255, 0, 0); }
Page 638 and 639: is smaller (vertically) than the en
Page 640 and 641: keys 2-8 control number of edges fo
Page 642 and 643: strokeWeight(strokeWt); float angle
Page 646 and 647: 13 3D
Page 648 and 649: Figure 13-1. Spinning Cube 1 Man, t
Page 650 and 651: void setup(){ size(400, 400); } voi
Page 652 and 653: translate(50, 50); fill(0, 255, 0);
Page 654 and 655: Figure 13-6. Multiple Translations
Page 656 and 657: Creating a custom cube To begin to
Page 658 and 659: vertices[8] = new Point3D(w/2,-h/2,
Page 660 and 661: quadBG[2] = color(30, 30, 175, 150)
Page 662 and 663: Figure 13-8. Two Rotating Custom Cu
Page 664 and 665: outer transparent cube noFill(); //
Page 666 and 667: As complicated as this last sketch
Page 668 and 669: Figure 13-10. Single Axis 3D Rotati
Page 670 and 671: The first example I’ll look at si
Page 672 and 673: Figure 13-11. Custom Rotation of a
Page 674 and 675: automatic rotation c1.spinnyRotateX
Page 676 and 677: for (int i=0; i
Page 678 and 679: Beyond box() and sphere() While the
Page 680 and 681: Figure 13-13. Brick Tower sketch Th
Page 682 and 683: Figure 13-14. Extrusion Example ske
Page 684 and 685: arrays. The x and y values don't ch
Page 686 and 687: Figure 13-15. Better Extrusion Exam
Page 688 and 689: ender external skin for (int i=0; i
Page 690 and 691: draw cylinder tube beginShape(QUAD_
Page 692 and 693: Figure 13-20. Cube to Pyramid to Co
Page 694 and 695:
1. Generate a circle (actually a po
Page 696 and 697:
vertex(vertices2[j].x, vertices2[j]
Page 698 and 699:
Figure 13-22. Interactive Toroid sk
Page 700 and 701:
Figure 13-26. Interactive Toroid sk
Page 702 and 703:
void keyPressed(){ if(key == CODED)
Page 704:
PART THREE REFERENCE In Part 1 of t
Page 707 and 708:
Page 709 and 710:
Page 711 and 712:
Page 713 and 714:
Page 715 and 716:
Page 717 and 718:
Page 719 and 720:
Page 721 and 722:
Page 723 and 724:
Page 725 and 726:
Page 727 and 728:
Page 729 and 730:
Page 731 and 732:
Page 733 and 734:
Page 735 and 736:
Page 737 and 738:
Page 739 and 740:
Page 741 and 742:
Page 743 and 744:
Page 745 and 746:
Page 747 and 748:
Page 749 and 750:
Page 751 and 752:
Page 753 and 754:
Page 755 and 756:
Page 757 and 758:
Page 759 and 760:
Page 761 and 762:
Page 763 and 764:
Page 765 and 766:
Page 767 and 768:
Page 769 and 770:
Page 771 and 772:
Page 773 and 774:
Page 775:
Page 779 and 780:
Page 781 and 782:
Page 783 and 784:
Page 785 and 786:
Page 787 and 788:
Page 789 and 790:
Page 791 and 792:
Page 793 and 794:
Page 795 and 796:
Page 797 and 798:
Page 799 and 800:
Page 801 and 802:
Page 803 and 804:
Page 806 and 807:
INDEX
Page 808 and 809:
animation, 117-119, 482-486 see als
Page 810 and 811:
handling pixel and image data, 113
Page 812 and 813:
importance of color, 400-401 indexe
Page 814 and 815:
generating curve with second-degree
Page 816 and 817:
endRecord function, 710 endShape fu
Page 818 and 819:
pixel functions, 429-432 procedural
Page 820 and 821:
area of triangle, 752 circumference
Page 822 and 823:
loadImage function, 433, 732, 733 L
Page 824 and 825:
Processing libraries, 743 Processin
Page 826 and 827:
modes ellipseMode function, 342, 34
Page 828 and 829:
drawing rectangle with OOP sketch,
Page 830 and 831:
creating custom 3D cube, 625-626 cu
Page 832 and 833:
Transform section, 712-718 Trigonom
Page 834 and 835:
Weight on a Spring, 513, 516 Worm,
Page 836 and 837:
otation of rectangle around XYZ axe
Page 838 and 839:
standardization, 37 state change fo
Page 840 and 841:
TRIANGLES mode, beginShape(), 368,
show all

Processing: Creative Coding and Computational Art

Create successful ePaper yourself

Delete template?

Save as template?