Recitation 5: Processing Basics
The picture I chose:
It is a kind of tessellated pattern that has geometric properties and can be demonstrated well in processing IDE. I chose this image because it could be kind of an optical illusion that the viewers can’t determine whether they see lots of diamonds or squares.
My sketch:
When I draw draft on paper, it is very simple that all I need is to draw the structure at first and than fill the blanks as required. However, in Progressing, the sequence of drawing is changed. Finally, I decided to draw squares of different sizes and put one on another, and use the code pushMatrix() and popMatrix() to draw couples of similar patterens. The paperdrawing gave me great help when I located the squares and lines.
I think drawing in Progressing makes it easier to elaborate the meanings of the patteren I draw, because I can make animation with it and alter the appearance by adding codes to it.
My code Ver.1: The patterens move horizontally.
float xOffset = 0.0;
int c;
void setup() {
size(600, 600);
background(255);
}
void draw() {
// Your drawing code goes here
color w = (255);
color b = (200);
//black outside rects
fill(b);
rect(200+xOffset,100,200,200);
fill(w);
rect(225+xOffset,125,150,150);
fill(b);
rect(250+xOffset,150,100,100);
fill(w);
rect(275+xOffset,175,50,50);
pushMatrix();
translate(200+xOffset, -200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(-200+xOffset, -200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(-200+xOffset, 200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset, 200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(0+xOffset,400);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
//white outside rects
pushMatrix();
translate(0+xOffset,0);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(0+xOffset,400);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset,-200);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset,200);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(400+xOffset,0);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(400+xOffset,400);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
//draw lines
pushMatrix();
translate(0 + xOffset,0);
line(0,300,300,600);
line(0,100,500,600);
line(0,500,100,600);
line(100,0,600,500);
line(300,0,600,300);
line(500,0,600,100);
line(0,100,100,0);
line(0,300,300,0);
line(0,500,500,0);
line(100,600,600,100);
line(300,600,600,300);
line(500,600,600,500);
popMatrix();
xOffset = xOffset + 0.5;
}
My code Ver. 2: The colors switch when the mouse is clicked.
float xOffset = 0.0;
int c;
void setup() {
size(600, 600);
background(255);
}
void draw() {
// Your drawing code goes here
color w = (255);
color b = (200);
if (mousePressed && (mouseButton == LEFT)) {
c = w;
w = b;
b = c;
}
//black outside rects
fill(b);
rect(200+xOffset,100,200,200);
fill(w);
rect(225+xOffset,125,150,150);
fill(b);
rect(250+xOffset,150,100,100);
fill(w);
rect(275+xOffset,175,50,50);
pushMatrix();
translate(200+xOffset, -200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(-200+xOffset, -200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(-200+xOffset, 200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset, 200);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(0+xOffset,400);
fill(b);
rect(200,100,200,200);
fill(w);
rect(225,125,150,150);
fill(b);
rect(250,150,100,100);
fill(w);
rect(275,175,50,50);
popMatrix();
//white outside rects
pushMatrix();
translate(0+xOffset,0);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(0+xOffset,400);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset,-200);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset,200);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(400+xOffset,0);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(400+xOffset,400);
fill(w);
rect(0,100,200,200);
fill(b);
rect(25,125,150,150);
fill(w);
rect(50,150,100,100);
fill(b);
rect(75,175,50,50);
popMatrix();
//draw lines
pushMatrix();
translate(0 + xOffset,0);
line(0,300,300,600);
line(0,100,500,600);
line(0,500,100,600);
line(100,0,600,500);
line(300,0,600,300);
line(500,0,600,100);
line(0,100,100,0);
line(0,300,300,0);
line(0,500,500,0);
line(100,600,600,100);
line(300,600,600,300);
line(500,600,600,500);
popMatrix();
}
My code Ver.3: The patterens are filled by random colors.
float xOffset = 0.0;
int c;
void setup() {
size(600, 600);
background(255);
}
void draw() {
// Your drawing code goes here
color w = (255);
color b = (200);
if (mousePressed && (mouseButton == LEFT)) {
c = w;
w = b;
b = c;
}
//black outside rects
fill(random(0,255),random(0,255),random(0,255));
rect(200+xOffset,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(225+xOffset,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(250+xOffset,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(275+xOffset,175,50,50);
pushMatrix();
translate(200+xOffset, -200);
fill(random(0,255),random(0,255),random(0,255));
rect(200,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(225,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(250,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(-200+xOffset, -200);
fill(random(0,255),random(0,255),random(0,255));
rect(200,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(225,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(250,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(-200+xOffset, 200);
fill(random(0,255),random(0,255),random(0,255));
rect(200,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(225,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(250,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset, 200);
fill(random(0,255),random(0,255),random(0,255));
rect(200,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(225,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(250,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(275,175,50,50);
popMatrix();
pushMatrix();
translate(0+xOffset,400);
fill(random(0,255),random(0,255),random(0,255));
rect(200,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(225,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(250,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(275,175,50,50);
popMatrix();
//white outside rects
pushMatrix();
translate(0+xOffset,0);
fill(random(0,255),random(0,255),random(0,255));
rect(0,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(25,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(50,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(0+xOffset,400);
fill(random(0,255),random(0,255),random(0,255));
rect(0,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(25,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(50,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset,-200);
fill(random(0,255),random(0,255),random(0,255));
rect(0,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(25,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(50,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(200+xOffset,200);
fill(random(0,255),random(0,255),random(0,255));
rect(0,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(25,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(50,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(400+xOffset,0);
fill(random(0,255),random(0,255),random(0,255));
rect(0,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(25,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(50,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(75,175,50,50);
popMatrix();
pushMatrix();
translate(400+xOffset,400);
fill(random(0,255),random(0,255),random(0,255));
rect(0,100,200,200);
fill(random(0,255),random(0,255),random(0,255));
rect(25,125,150,150);
fill(random(0,255),random(0,255),random(0,255));
rect(50,150,100,100);
fill(random(0,255),random(0,255),random(0,255));
rect(75,175,50,50);
popMatrix();
//draw lines
pushMatrix();
translate(0 + xOffset,0);
line(0,300,300,600);
line(0,100,500,600);
line(0,500,100,600);
line(100,0,600,500);
line(300,0,600,300);
line(500,0,600,100);
line(0,100,100,0);
line(0,300,300,0);
line(0,500,500,0);
line(100,600,600,100);
line(300,600,600,300);
line(500,600,600,500);
popMatrix();
//xOffset = xOffset + 0.5;
}