THANKS
• Aaron Padilla - Curator of Education
• Susan Lai Hipp - Chef
• Christine Koroki
• Rechung Fujihira / Tony Stanford
Tuesday, July 16, 13
Slide 3
Slide 3 text
• WIFI
• Chat - https://pasdechocolat.campfirenow.com/308ca
• GitHub - https://github.com/OutOfOffice/
CHAT & BE SOCIAL
Tuesday, July 16, 13
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
But...
http://www.hermanmiller.com/content/hermanmiller/english/research/research-summaries/coworking-swarming-and-the-agile-workplace.html
Tuesday, July 16, 13
Slide 6
Slide 6 text
FUCK IT?
Tuesday, July 16, 13
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
...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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Same-time, same-place can spark a powerful
source of collaborative innovation and
meaning for people.
SHARED MEANING
Tuesday, July 16, 13
Slide 13
Slide 13 text
OUT OF OFFICE
Tuesday, July 16, 13
Slide 14
Slide 14 text
PROCESSING
WORKSHOP
Tuesday, July 16, 13
Slide 15
Slide 15 text
Agenda
• Processing Basics
• Drawing
• Parameterized Drawing
• Lots of Examples
Tuesday, July 16, 13
Basics
• Variables
• Functions
• If statement
• Looping
Tuesday, July 16, 13
Slide 18
Slide 18 text
Consider this rectangle
Tuesday, July 16, 13
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Consider this star
https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/Mandala/Star
Tuesday, July 16, 13
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
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Drawing a Star
void star(int pointCount, float innerRadius, float outerRadius) {
...
for (int i=0; i
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
Mandalas!
https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/Mandala/MandalaTable
Tuesday, July 16, 13
Slide 50
Slide 50 text
color(255,0,0)
color(0,255,0)
color(0,0,255)
Tuesday, July 16, 13
Simple image input
https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/ImageInput/SimpleImageInput
Tuesday, July 16, 13
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
Sorted image input
https://github.com/OutOfOffice/ProcessingWorkshop/tree/master/examples/ImageInput/ImageInputSort
Tuesday, July 16, 13
Slide 58
Slide 58 text
void setup() {
...
int numMovers = numCols*numRows;
startColors = new int[numMovers];
int pixelIdx, colorIdx;
for (int row=0; row
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
Other
• Colors
File > Examples... > Basics > Color > ColorVariables
• Images
File > Examples... > Basics > Image > Pointilism
• Text
File > Examples... > Basics > Typography > Letters
Tuesday, July 16, 13
Slide 62
Slide 62 text
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
Slide 63
Slide 63 text
Survey
• pass it out
• fill it out
• return it
Tuesday, July 16, 13