Processing Workshop

This is a quick introduction to Processing for the purpose of manipulating images.

Co-Presented with Kyle Oba

Transcript

1. WELCOME Tuesday, July 16, 13
2. THANKS • Aaron Padilla - Curator of Education • Susan Lai Hipp - Chef • Christine Koroki • Rechung Fujihira / Tony Stanford Tuesday, July 16, 13
3. • WIFI • Chat - https://pasdechocolat.campfirenow.com/308ca • GitHub - https://github.com/OutOfOffice/ CHAT & BE SOCIAL Tuesday, July 16, 13
4. Herman Miller's Coworking, Swarming, and the Agile Workplace http://www.hermanmiller.com/content/hermanmiller/english/research/research-summaries/coworking-swarming-and-the-agile-workplace.html Many speculate that, with people no longer needing to be in the same place at the same time to share information and ideas, the office building as we know it is destined for obsolescence. Tuesday, July 16, 13
5. But... http://www.hermanmiller.com/content/hermanmiller/english/research/research-summaries/coworking-swarming-and-the-agile-workplace.html Tuesday, July 16, 13
6. FUCK IT? Tuesday, July 16, 13
7. http://www.hermanmiller.com/content/hermanmiller/english/research/research-summaries/coworking-swarming-and-the-agile-workplace.html A recent report from Gartner, Inc., finds knowledge work becoming steadily less routine and increasingly characterized by “volatility,” “hyper-connectedness,” and “swarming — a work style characterized by a flurry of collective activity by anyone and everyone conceivably available and able to add value.” ALTERNATIVE Tuesday, July 16, 13
8. http://www.hermanmiller.com/content/hermanmiller/english/research/research-summaries/coworking-swarming-and-the-agile-workplace.html In contrast to traditional corporate teams — composed of people who work together regularly, often in the same location and under the same manager — swarms typically encompass a diverse group of professionals and experts who may not have worked together before and probably won’t work as a team again in the future. SWARMS Tuesday, July 16, 13
9. http://www.hermanmiller.com/content/hermanmiller/english/research/research-summaries/coworking-swarming-and-the-agile-workplace.html Swarms form quickly to attack a problem or opportunity, then dissipate as their members are pulled into other ad hoc groups addressing other issues. OPPORTUNITY Tuesday, July 16, 13
10. ...a group’s successful performance was not strongly related to the average intelligence of its members, but rather to the way its members interacted and, in particular, to the even distribution of individual contributions to the group effort. CONTRIBUTION Tuesday, July 16, 13
11. Groups that did well were those that considered ”multiple perspectives”... “In groups where the conversation was more evenly distributed, where you had better participation—and more equal participation among all of the group members—the groups were more collectively intelligent.” PARTICIPATION Tuesday, July 16, 13
12. Same-time, same-place can spark a powerful source of collaborative innovation and meaning for people. SHARED MEANING Tuesday, July 16, 13
13. OUT OF OFFICE Tuesday, July 16, 13
14. PROCESSING WORKSHOP  Tuesday, July 16, 13
15. Agenda • Processing Basics • Drawing • Parameterized Drawing • Lots of Examples Tuesday, July 16, 13
16. Prerequisites • Processing downloaded & installed (2.0beta) • Images! • GitHub https://github.com/OutOfOffice https://github.com/OutOfOffice/ProcessingWorkshop Tuesday, July 16, 13
17. Basics • Variables • Functions • If statement • Looping Tuesday, July 16, 13
18. Consider this rectangle Tuesday, July 16, 13
19. Consider this rectangle void setup() { size(500, 300); background(255); fill(0); int x = 100; int y = 100; int rectWidth = 300; int rectHeight = 100; rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
20. Consider this rectangle void setup() { size(500, 300); background(255); fill(0); int x = 100; int y = 100; int rectWidth = 300; int rectHeight = 100; rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
21. Consider this rectangle void setup() { size(500, 300); background(255); fill(0); int x = 100; int y = 100; int rectWidth = 300; int rectHeight = 100; rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
22. Consider this rectangle void setup() { size(500, 300); background(255); fill(0); int x = 100; int y = 100; int rectWidth = 300; int rectHeight = 100; rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
23. Consider this rectangle void setup() { size(500, 300); background(255); fill(0); int x = 100; int y = 100; int rectWidth = 300; int rectHeight = 100; rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
24. Consider this rectangle void setup() { size(500, 300); background(255); fill(0); int x = 100; int y = 100; int rectWidth = 300; int rectHeight = 100; rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
25. Consider this rectangle void setup() { size(500, 300); background(255); fill(0); int x = 100; int y = 100; int rectWidth = 300; int rectHeight = 100; rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
26. draw() is a loop int rectWidth, rectHeight; int delta; void setup() { size(200, 200); fill(237, 33, 124); // Pink! rectWidth = 100; rectHeight = 100; delta = 1; } void draw() { int x = 0; int y = 50; if (rectWidth >= width) { delta = -1; } else if (rectWidth <= 0) { delta = 1; } rectWidth = rectWidth + delta; background(255); rect(x, y, rectWidth, rectHeight); } https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/Rectangle Tuesday, July 16, 13
27. draw() is a loop int rectWidth, rectHeight; int delta; void setup() { size(200, 200); fill(237, 33, 124); // Pink! rectWidth = 100; rectHeight = 100; delta = 1; } void draw() { int x = 0; int y = 50; if (rectWidth >= width) { delta = -1; } else if (rectWidth <= 0) { delta = 1; } rectWidth = rectWidth + delta; background(255); rect(x, y, rectWidth, rectHeight); } https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/Rectangle Tuesday, July 16, 13
28. draw() is a loop int rectWidth, rectHeight; int delta; void setup() { size(200, 200); fill(237, 33, 124); // Pink! rectWidth = 100; rectHeight = 100; delta = 1; } void draw() { int x = 0; int y = 50; if (rectWidth >= width) { delta = -1; } else if (rectWidth <= 0) { delta = 1; } rectWidth = rectWidth + delta; background(255); rect(x, y, rectWidth, rectHeight); } https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/Rectangle Tuesday, July 16, 13
29. if-then-else int rectWidth, rectHeight; int delta; void setup() { size(200, 200); fill(237, 33, 124); // Pink! rectWidth = 100; rectHeight = 100; delta = 1; } void draw() { int x = 0; int y = 50; if (rectWidth >= width) { delta = -1; } else if (rectWidth <= 0) { delta = 1; } rectWidth = rectWidth + delta; background(255); rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
30. if-then-else int rectWidth, rectHeight; int delta; void setup() { size(200, 200); fill(237, 33, 124); // Pink! rectWidth = 100; rectHeight = 100; delta = 1; } void draw() { int x = 0; int y = 50; if (rectWidth >= width) { delta = -1; } else if (rectWidth <= 0) { delta = 1; } rectWidth = rectWidth + delta; background(255); rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
31. if-then-else int rectWidth, rectHeight; int delta; void setup() { size(200, 200); fill(237, 33, 124); // Pink! rectWidth = 100; rectHeight = 100; delta = 1; } void draw() { int x = 0; int y = 50; if (rectWidth >= width) { delta = -1; } else if (rectWidth <= 0) { delta = 1; } rectWidth = rectWidth + delta; background(255); rect(x, y, rectWidth, rectHeight); } Tuesday, July 16, 13
32. Consider this star https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/Mandala/Star Tuesday, July 16, 13
33. Variables void setup() { int pointCount = 80; float radiusRatio = 0.2; ... float radOut = height/2.3; float radIn = radOut*radiusRatio; star(pointCount, radIn, radOut); } Tuesday, July 16, 13
34. Variables void setup() { int pointCount = 80; float radiusRatio = 0.2; ... float radOut = height/2.3; float radIn = radOut*radiusRatio; star(pointCount, radIn, radOut); } Tuesday, July 16, 13
35. Variables void setup() { int pointCount = 80; float radiusRatio = 0.2; ... float radOut = height/2.3; float radIn = radOut*radiusRatio; star(pointCount, radIn, radOut); } Tuesday, July 16, 13
36. Functions void setup() { int pointCount = 80; float radiusRatio = 0.2; ... float radOut = height/2.3; float radIn = radOut*radiusRatio; star(pointCount, radIn, radOut); } Tuesday, July 16, 13
37. Functions void setup() { int pointCount = 80; float radiusRatio = 0.2; ... float radOut = height/2.3; float radIn = radOut*radiusRatio; star(pointCount, radIn, radOut); } Tuesday, July 16, 13
38. Functions void setup() { int pointCount = 80; float radiusRatio = 0.2; ... float radOut = height/2.3; float radIn = radOut*radiusRatio; star(pointCount, radIn, radOut); } Tuesday, July 16, 13
39. WTF!!!! void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } Tuesday, July 16, 13
40. sin, cos, radius, etc. x = radOut x = 0.81*radIn y = -0.58*radIn y = 0 x = cos(theta)*radIn y = sin(theta)*radIn Tuesday, July 16, 13
41. Drawing a Star void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } theta sin, cos nonsense Tuesday, July 16, 13
42. Drawing a Star void star(int pointCount, float innerRadius, float outerRadius) { ... for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } ... } Tuesday, July 16, 13
43. If Statement void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } Tuesday, July 16, 13
44. If Statement void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } Tuesday, July 16, 13
45. If Statement void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } Tuesday, July 16, 13
46. Looping void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } Tuesday, July 16, 13
47. Looping void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } Tuesday, July 16, 13
48. Looping void star(int pointCount, float innerRadius, float outerRadius) { float theta = 0.0; // point count is 1/2 of total vertex count int vertCount = pointCount*2; float thetaRot = TWO_PI/vertCount; float tempRadius = 0.0; float x = 0.0, y = 0.0; beginShape(); for (int i=0; i<pointCount; i++) { for (int j=0; j<2; j++) { tempRadius = innerRadius; // true if j is even if (j%2==0) { tempRadius = outerRadius; } x = cos(theta)*tempRadius; y = sin(theta)*tempRadius; vertex(x, y); theta += thetaRot; } } endShape(CLOSE); } Tuesday, July 16, 13
49. Mandalas! https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/Mandala/MandalaTable Tuesday, July 16, 13
50. color(255,0,0) color(0,255,0) color(0,0,255) Tuesday, July 16, 13
51. #FF0000 #00FF00 #0000FF Tuesday, July 16, 13
52. Tuesday, July 16, 13
53. img.pixels[] = [ ... ]; Tuesday, July 16, 13
54. img.pixels = [ color(0, 0, 0), color(0, 0, 0), color(55, 135, 214), color(253, 229, 155) ... ]; Tuesday, July 16, 13
55. Simple image input https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/ImageInput/SimpleImageInput Tuesday, July 16, 13
56. void setup() { PImage img = loadImage("macarons.jpg"); img.loadPixels(); size(img.width, img.height); int colWidth = 10; int rowHeight = 10; int numCols = int(width/colWidth); int numRows = int(height/rowHeight); for (int row=0; row<numRows; row++) { for(int col=0; col<numCols; col++) { int pixelIdx = row*rowHeight*width + col*colWidth; fill(img.pixels[pixelIdx]); rect(col*colWidth, row*rowHeight, colWidth, rowHeight); } } } Simple image input Tuesday, July 16, 13
57. Sorted image input https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/ImageInput/ImageInputSort Tuesday, July 16, 13
58. void setup() { ... int numMovers = numCols*numRows; startColors = new int[numMovers]; int pixelIdx, colorIdx; for (int row=0; row<numRows; row++) { for(int col=0; col<numCols; col++) { pixelIdx = row*rowHeight*width + col*colWidth; colorIdx = row*numCols + col; startColors[colorIdx] = img.pixels[pixelIdx]; } } ... // Draw naively sorted colors: sortedColors = sort(startColors); drawColors(sortedColors); } Sorted image input Tuesday, July 16, 13
59. More Image Functions • color - the datatype • color() - creates a color • red(), green(), blue(), alpha() - returns it • lerpColor() - moves from one to another • PImage - use this for images • loadPixels() - for image or entire display • pixels[] - get at the pixels of image or display Tuesday, July 16, 13
60. More Functions • map • lerp • mouse stuff • key press stuff • arc, ellipse, line, point, quad, rect, triangle • text, font stuff • noise, random Tuesday, July 16, 13
61. Other • Colors File > Examples... > Basics > Color > ColorVariables • Images File > Examples... > Basics > Image > Pointilism • Text File > Examples... > Basics > Typography > Letters Tuesday, July 16, 13
62. Other • Arrays File > Examples... > Basics > Arrays > Array • ArrayList File > Examples... > Topics > Advanced Data > ArrayListClass • HashMap File > Examples... > Topics > Advanced Data > HashMapClass Tuesday, July 16, 13
63. Survey • pass it out • fill it out • return it Tuesday, July 16, 13