Recreated Computer Graphics – Introduction to Interactive Media

Browsing through different graphics generated by computer programs, I found one piece from Edward Zajec very interesting. It is the first piece of a series of graphics called The Cube: Theme and Variation Series. In this graphic, the combination of geometric shapes builds a three-dimensional architecture on a two-dimensional plane. Zajec’s work can be divided into four layers or four parts. Every part is not closely connected, so the graphic shows different layers of the foundation of a huge architecture.

Here’s my recreation of Zajec’s piece. It’s not one-hundred-percent proportional to Zajec’s piece.

My code is attached below.

//basic set up
size(700, 700);
background(255);
float gap1 = 15;
float gap2 = 20;
float gap3 = 25;


//draw background tilted lines
stroke(0);
float x1 = 0;
float y1 = 0;
float x2 = width;
float y2 = height;

strokeWeight(7);
for (int i = 0; i < 106; i += 1) {
  if (x1 <= width && y1 <= height) {
    line(x1, 0, 0, y1);
    x1 += 700/50;
    y1 += 700/50;
  }

  if (x2 > 0 && y2 > 0) {
    line(width, y2, x2, height);
    x2 -= 700/50;
    y2 -= 700/50;
  }
}

//draw lower object L
stroke(255);
strokeWeight(3);
float yPosL = (height-gap3*2)*0.8;
line(gap3, yPosL, width-gap3, yPosL); //lower bound
noStroke();
fill(0);
rect(gap3, yPosL-gap2, width-gap3*2, gap2);//lower rect
fill(255);
quad(gap3*3+12, yPosL-gap2*4, width-gap2, yPosL-gap2*4, width-gap2, yPosL-gap2, gap3, yPosL-gap2);
for (int j = 0; j < 20; j += 1) { //horizontal lines
  stroke(0);
  strokeWeight(1.5);
  float indentation = (gap3*2+12)/20;
  line(gap3+indentation*j, yPosL-gap2-j*3, width-gap3, yPosL-gap2-j*3);
}



//draw middle object F+
stroke(255);
strokeWeight(3);
float yPosM = height/2+gap2;
line(gap3, yPosM, width-gap3, yPosM);//lower bound
noStroke();
fill(0);
rect(gap3, yPosM-gap2, width-gap3*2, gap2);//bottom rect
rect(gap3, yPosM-gap2*9, gap2, gap2*9);//vertical rect 1

fill(255);
quad(gap3+gap2, yPosM-gap2, gap3+gap2, yPosM-gap2*9, gap3+gap2*4, yPosM-gap2*11.5-5, gap3+gap2*4, yPosM-gap2*4); //vertical quad 1
quad(gap3, yPosM-gap2*9, gap3+gap2, yPosM-gap2*9, gap3+gap2*4, yPosM-gap2*11.5-5, gap3+gap2*3, yPosM-gap2*11.5-5);//xie quad 1

for (int a = 0; a < 19; a += 1) { //horizontal lines in xie quad 1
  stroke(0);
  strokeWeight(1.5);
  line(gap3+gap2*3/18*a, yPosM-gap2*9-(gap2*2.5+5)/18*a, gap3+gap2+gap2*3/18*a, yPosM-gap2*9-(gap2*2.5+5)/18*a);
}
noStroke();
quad(gap3+gap2, yPosM-gap2, gap3+gap2*4, yPosM-gap2*4, width-gap2, yPosM-gap2*4, width-gap2, yPosM-gap2);

for (int b = 0; b < 19; b += 1) { //horizontal lines in vertical quad 1
  stroke(0);
  strokeWeight(1.5);
  line(gap3+gap2+gap2*3/18*b, yPosM-gap2-gap2*3/18*b, width-gap3, yPosM-gap3-gap2*3/18*b);
}

for (int numL = 1; numL < 4; numL += 1) {
  fill(0);
  rect(gap3+gap2*8.5*numL, yPosM-gap2*4, gap2, gap2*3); //vertical rect 2 - 4
  noStroke();
  fill(255);
  quad(gap3+gap2*(8.5*numL+1), yPosM-gap2*4, gap3+gap2*(8.5*numL+3), yPosM-gap2*7, gap3+gap2*(8.5*numL+3), yPosM-gap2*4, gap3+gap2*(8.5*numL+1), yPosM-gap2);//vertical quad 2 - 4
  quad(gap3+gap2*8.5*numL, yPosM-gap2*4, gap3+gap2*(8.5*numL+1), yPosM-gap2*4, gap3+gap2*(8.5*numL+3), yPosM-gap2*7, gap3+gap2*(8.5*numL+2), yPosM-gap2*7);//xie quad 2 - 4
  for (int c = 0; c < 19; c += 1) { //lines in xie quad 2 - 4
    stroke(0);
    strokeWeight(1.5);
    line(gap3+gap2*8.5*numL+gap2*3/18*c, yPosM-gap2*4-(gap2*3)/18*c, gap3+gap2*(8.5*numL+1)+gap2*3/18*c, yPosM-gap2*4-(gap2*3)/18*c);
  }
}

//draw upper lower object L
float yPosUL = yPosM-gap2*6;
float xPosUL = gap3+gap2*8.5;

for (int numUL = 0; numUL < 3; numUL += 1) {
  stroke(255);
  strokeWeight(5);
  line(xPosUL+gap2*8*numUL, yPosUL, xPosUL+gap2*6+gap2*8*numUL, yPosUL); //bottom line 1 - 3
  noStroke();
  fill(0);
  rect(xPosUL+gap2*8*numUL, yPosUL-gap2*2.5, gap2*6, gap2*2.5); //horizontal rect 1 - 3
  fill(255);
  quad(xPosUL+gap2+gap2*8*numUL, yPosUL-gap2*5.5, xPosUL+gap2*4+gap2*8*numUL, yPosUL-gap2*8.5, xPosUL+gap2*4+gap2*8*numUL, yPosUL-gap2*5.5, xPosUL+gap2+gap2*8*numUL, yPosUL-gap2*2.5); //quad 2.1
  quad(xPosUL+gap2+gap2*8*numUL, yPosUL-gap2*2.5, xPosUL+gap2*4+gap2*8*numUL, yPosUL-gap2*5.5, xPosUL+gap2*9+gap2*8*numUL, yPosUL-gap2*5.5, xPosUL+gap2*6+gap2*8*numUL, yPosUL-gap2*2.5);//quad 1.2
  for (int f = 0; f < 19; f += 1) {
    stroke(0);
    strokeWeight(1.5);
    line(xPosUL+gap2+gap2*8*numUL+gap2*3/18*f, yPosUL-gap2*2.5-(gap2*3)/18*f, xPosUL+gap2*6+gap2*8*numUL+gap2*3/18*f, yPosUL-gap2*2.5-(gap2*3)/18*f);
  }
  noStroke();
  quad(xPosUL+gap2*8*numUL, yPosUL-gap2*5.5, xPosUL+gap2+gap2*8*numUL, yPosUL-gap2*5.5, xPosUL+gap2*4+gap2*8*numUL, yPosUL-gap2*8.5, xPosUL+gap2*3+gap2*8*numUL, yPosUL-gap2*8.5); //xie quad 2.4
  for (int h = 0; h < 19; h += 1) {
    stroke(0);
    strokeWeight(1.5);
    line(xPosUL+gap2*8*numUL+gap2*3/18*h, yPosUL-gap2*5.5-(gap2*3)/18*h, xPosUL+gap2+gap2*8*numUL+gap2*3/18*h, yPosUL-gap2*5.5-(gap2*3)/18*h);
  }
  noStroke();
  quad(xPosUL+gap2*6+gap2*8*numUL, yPosUL+5, xPosUL+gap2*6+gap2*8*numUL, yPosUL-gap2*2.5, xPosUL+gap2*9+gap2*8*numUL, yPosUL-gap2*5.5, xPosUL+gap2*9+gap2*8*numUL, yPosUL-gap2*2.5-5);//quad 1.3
  noStroke();
  fill(0);
  rect(xPosUL+gap2*8*(numUL+1), yPosUL-gap2*5.5, gap2, gap2*5.5);//vertical rect 2 - 3
}

//special case for 1
line(xPosUL, gap3, xPosUL+gap2, yPosUL); //left line 1 - 3
fill(0);
rect(xPosUL, gap3, gap2, yPosUL-gap3); //vertical rect 1
fill(255);
quad(xPosUL+gap2, gap3, xPosUL+gap2*4, gap3, xPosUL+gap2*4, yPosUL-gap2*5.5, xPosUL+gap2, yPosUL-gap2*2.5); //quad 1.1

//special case for 2 - 3
line(xPosUL+gap2*8, yPosUL-gap2*5.5, xPosUL+gap2*8, yPosUL);//left line 2
line(xPosUL+gap2*16, yPosUL-gap2*5.5, xPosUL+gap2*16, yPosUL);//left line 3



//draw upper object
for (int m = 0; m < 2; m += 1){
stroke(255);
strokeWeight(6);
fill(255);
rect(xPosUL+gap2*8+m*gap2*8, gap3, gap2*6.5, gap2*3.5); //horizontal rect 1.1
noStroke();
fill(0);
rect(xPosUL+gap2*8+m*gap2*8, gap3, gap2*6.5, gap2*3.5); //horizontal rect 1.2
stroke(255);
strokeWeight(5);
fill(255);
quad(xPosUL+gap2*14.5+m*gap2*8, gap3+gap2*3.5, xPosUL+gap2*14.5+m*gap2*8, gap3, xPosUL+gap2*16+m*gap2*8, gap3, xPosUL+gap2*16+m*gap2*8, gap3+gap2*2);//quad 1
}


//draw black frame
fill(0);
noStroke();
rect(0, 0, gap3, height);
rect(0, 0, width, gap3);
rect(width-gap3, 0, gap3, height);
rect(0, height-gap3, width, gap3);


//white frame line
stroke(255);
strokeWeight(2);
line(gap2, gap2, gap2, height-gap2);
line(gap2, gap2, width-gap2, gap2);
line(gap2, height-gap2, width-gap2, height-gap2);
line(width-gap2, gap2, width-gap2, height-gap2);

Leave a Reply Cancel reply