Recitation 5: Processing Basics

 

I chose this picture because it brings back fond memories every time I see it. I also chose it because I really like the shapes of the pyramid and how there are different layers to consider. Since I am new to processing I didn’t want to make it too hard for myself but I also wanted to create something that used many “bodies” so I could understand how the coordinates work. I chose the pyramid because each “body” has four points and I needed to create 7 of them.

When I drew my picture I only wanted to focus on the pyramid itself. I wanted to make the pyramid semi-3D so I make the top part look flat. I then went from top to bottom creating each shape on my sketch. I then looked at it and thought that the white on white was a little too bland so I changed the color to yellow. I added a darker tone of yellow to the top and 3rd levels of the pyramid to create a shadow. 

I then tried to animate the pyramid. I decided to animate the color. When you first press start, the pyramid is black but when you click on it the color slowly changes to yellow. This animation reminded me of how the pyramid changed colors as clouds went over it.

Looking back on this project I think that I might have oversimplified the image but since I am still new to processing I believe that this was a good start. I think that the shapes are very similar to the pyramid in the picture but the way I drew it on paper made it look 2D. Because I was following the coordinates of the drawing, my processing ended up looking a little bland as well. I think that processing was a really cool way to create art. I never really thought about design that was not done by hand before this. I think that this recitation really opened my eyes to the new possibilities of art that technology can provide.

int change;
int r = 0;
int g = 0;
int b = 0;
void setup() {
  size(800, 700);
  change = 1;
}
void draw() {
  // Your drawing code goes here
  background(255);
  println(mouseX, mouseY);

fill(#8C8E2E);
beginShape(); //top
vertex(310, 90);
vertex(440, 90);
vertex(510, 100);
vertex(240, 100);
endShape(CLOSE);

fill(r,g,b);
beginShape(); //2nd hexagon
vertex(240, 100);
vertex(510, 100);
vertex(540, 130);
vertex(210, 130);
endShape(CLOSE);

beginShape(); //3nd hexagon
vertex(180, 130);
vertex(570, 130);
vertex(590, 160);
vertex(160, 160);
endShape(CLOSE);

fill(#8C8E2E);
beginShape(); // 1st rectangle
vertex(180, 160);
vertex(570, 160);
vertex(570, 180);
vertex(180, 180);
endShape(CLOSE);

fill(r,g,b);
beginShape(); //3nd hexagon
vertex(180, 180);
vertex(570, 180);
vertex(610, 260);
vertex(150, 260);
endShape(CLOSE);

beginShape(); //4nd hexagon
vertex(130, 260);
vertex(630, 260);
vertex(655, 390);
vertex(105, 390);
endShape(CLOSE);

beginShape(); //5nd hexagon
vertex(80, 390);
vertex(680, 390);
vertex(730, 520);
vertex(30, 520);
endShape(CLOSE);

if (mousePressed) {
  r += 3;
  g += 3;
  b += 0;
}
}