Inter Lab | Recitation 5

Processing Documentations

In this recitation, I found one picture from the websites given to us.

This is one picture created by Vera Molnar in 1973, using computer graphic and ink on paper. This artifact is now in Courtesy of Senior & Shopmaker Gallery in New York.

I choose this picture for it looks cool to me and I think processing is able to draw something similar. And it turns out to be an easy task but super time consuming. The code for this is too long, so I would attach it at the very bottom of this documentation.

This drawing looks similar to the original artifact, since it consists only rectangles, it’s not difficult to imitate it, however, creating the rectangles one by one has no fun at all. It took me a huge amount of time to copy each rectangles and made small changes to each of them.

So, after Tuesday’s class about the animation. I used the draw() loop to create this drawing again. Using draw() and random(), the code can do the repeating tasks for me. Only using several minutes, I wrote the new code that is a lot tidy and short, and more interesting.

Here is the code for the second drawing.

float x = 0;
float y = 0;
float size = 0;
color c;
void setup(){
  size(800, 800);
  background(255, 255, 255);
  rectMode(CENTER);
  strokeWeight(2);
  noFill();
}

void draw(){
  if (millis() > 5000) {
    noLoop();
  }
  c = color(random(0, 256), random(0, 256), random(0, 256));
  x = 70 + 110 * int(random(0, 7));
  y = 70 + 110 * int(random(0, 7));
  size = 10 * int(random(1, 11));
  stroke(c);
  rect(x, y, size, size);
}

Below is the long and boring code for the first drawing.

size(800, 800);
background(255, 255, 255);

rectMode(CENTER);
strokeWeight(2);
//1, 1
stroke(#7896FF);
rect(70, 70, 100, 100);
stroke(#789600);
rect(70, 70, 80, 80);
stroke(#FF9619);
rect(70, 70, 20, 20);
//1, 2
stroke(100, 185, 123);
rect(180, 70, 100, 100);
stroke(#E5F2AB);
rect(180, 70, 90, 90);
//1, 3
stroke(#62DCE8);
rect(290, 70, 100, 100);
stroke(#EBB9F5);
rect(290, 70, 10, 10);
//1, 4
rect(400, 70, 100, 100);
//1, 5
stroke(#FFCD90);
rect(510, 70, 100, 100);
stroke(#7896FF);
rect(510, 70, 50, 50);
//1, 6
stroke(#D4FF79);
rect(620, 70, 100, 100);
stroke(#E5F2AB);
rect(620, 70, 80, 80);
stroke(#FFCD90);
rect(620, 70, 40, 40);
stroke(#FF8B79);
rect(620, 70, 5, 5);
//1, 7
stroke(#EBB9F5);
rect(730, 70, 100, 100);
stroke(#EBB9F5);
rect(730, 70, 70, 70);

//2, 1
stroke(#A78989);
rect(70, 180, 80, 80);
//2, 3
stroke(#FAFF79);
rect(290, 180, 80, 80);
stroke(#D4FF79);
rect(290, 180, 30, 30);
//2, 5
rect(510, 180, 80, 80);
stroke(#FFCD90);
rect(510, 180, 60, 60);
//2, 6
stroke(#FF8B79);
rect(620, 180, 80, 80);
//2, 7
stroke(#EBB9F5);
rect(730, 180, 80, 80);
stroke(#7896FF);
rect(730, 180, 5, 5);

//3, 1
stroke(#789600);
rect(70, 290, 60, 60);
stroke(#FFCD90);
rect(70, 290, 50, 50);
//3, 3
stroke(#869CAA);
rect(290, 290, 60, 60);
//3, 5
stroke(#7896FF);
rect(510, 290, 60, 60);
stroke(#869CAA);
rect(510, 290, 5, 5);
//3, 7
stroke(#FFCD90);
rect(730, 290, 60, 60);
stroke(#EBB9F5);
rect(730, 290, 50, 50);
stroke(#FFCD90);
rect(730, 290, 20, 20);
//4, 1
stroke(#7896FF);
rect(70, 400, 40, 40);
//4, 5
stroke(#869CAA);
rect(510, 400, 40, 40);
//4, 6
stroke(#EBB9F5);
rect(620, 400, 40, 40);
stroke(#789600);
rect(620, 400, 20, 20);
//4, 7
stroke(#7896FF);
rect(730, 400, 40, 40);

//5, 1
stroke(#EBB9F5);
rect(70, 510, 20, 20);
//5, 3
stroke(#789600);
rect(290, 510, 20, 20);
//5, 5
stroke(#FFCD90);
rect(510, 510, 20, 20);
//5, 6
stroke(#7896FF);
rect(730, 510, 20, 20);

//6, 1
stroke(#FF8B79);
rect(70, 620, 60, 60);
//6, 3
stroke(#789600);
rect(290, 620, 60, 60);
stroke(#FFCD90);
rect(290, 620, 10, 10);
//6, 5
stroke(#62DCE8);
rect(510, 620, 60, 60);
stroke(#FF8B79);
rect(510, 620, 20, 20);
//6, 7
stroke(#A78989);
rect(730, 620, 60, 60);

//7, 1
stroke(#FAFF79);
rect(70, 730, 80, 80);
stroke(#869CAA);
rect(70, 730, 30, 30);
//7, 2
stroke(#8FD3CF);
rect(180, 730, 80, 80);
stroke(#A78989);
rect(180, 730, 50, 50);
//7, 3
stroke(#869CAA);
rect(290, 730, 80, 80);
stroke(#FFCD90);
rect(290, 730, 70, 70);
stroke(#FAFF79);
rect(290, 730, 50, 50);
//7, 4
stroke(#789600);
rect(400, 730, 80, 80);
stroke(#FFCD90);
rect(400, 730, 30, 30);
stroke(#7896FF);
rect(400, 730, 20, 20);
//7, 5
stroke(#EBB9F5);
rect(510, 730, 80, 80);
//7, 6
stroke(#7896FF);
rect(620, 730, 80, 80);
stroke(#62DCE8);
rect(620, 730, 60, 60);
stroke(#7896FF);
rect(620, 730, 20, 20);
//7, 7
stroke(#8FD3CF);
rect(730, 730, 80, 80);

Work Cited

Molnar, Vera. Carrés. 1973, https://the-adaa.tumblr.com/post/11778802063 6/vera-     molnar-early-pioneer-of-computer-art. Accessed 5 Nov 2020.