# Cubism, the Pyramids, and a Rainbow

For this week’s assignment, I was torn between two illustrations from Computer Graphics and Art that I found interesting. One was more complex than the other, or so it seemed to me, and thus I began trying out the more difficult one. Halfway through (realizing that option one would take a while), I decided to try my second option. I was eager to see it coded because, frankly, to me it is the more aesthetically pleasing one.

I copied Random Squares by Bill Kolomyjec, which appeared in Computer Graphics and Art in August, 1977. The Processing sketch I made can be found online.

The generation of the squares is mostly based on randomness, as the code shows, in order to stay true to Kolomyjec’s title. I also added other features (stroke color and weight) that are not present in the publication’s image, which the user can control.

```int columns = 7;
int rows = 5;
int gridSquare = 100;
//sides of each square on the grid
//thus, 7x5 squares on the grid
int squareSide = 20;
//sides of the "originating", smaller square within each square on the grid
boolean mouseP = false;
boolean keyP = false;
int hue = 0;
//used to set the stroke() in HSB color mode
int weight = 1;
//used to set the strokeWeight()
int loop = 0;

void setup(){
size(700, 500);
//canvas size corresponds to columns, rows, and gridSquare
background(255);
fill(0);
textSize(22);
//instructs the user to click on the canvas
}

void draw(){
if(mousePressed && mouseP == false){
background(255);
textSize(18);
text("Press UP or DOWN to change color.", 200, 210);
text("Press LEFT or RIGHT to change stroke weight.", 150, 250);
text("Press ANY OTHER KEY for black.", 200, 290);
//lets user know about the features of the program
fill(255);
mouseP = true;
}

if(keyPressed && keyP == false && mouseP == true){
background(255);
if(keyCode == UP){
colorMode(HSB);
stroke(hue, 240, 240);
if(hue != 230){
hue = hue + 10;
};
}
//UP key increases hue (230 is the maximum)
else if(keyCode == DOWN){
colorMode(HSB);
stroke(hue, 240, 240);
if(hue != 0){
hue = hue - 10;
};
}
//DOWN key decreases hue (0 is the minimum)
else if(keyCode == LEFT){
if(weight != 1){
weight--;
};
strokeWeight(weight);
}
//LEFT key decreases stroke weight (1 is the minimum)
else if(keyCode == RIGHT){
if(weight != 10){
weight++;
};
strokeWeight(weight);
}
//RIGHT key increases stroke weight (10 is the maximum)
else{
stroke(0);
};
//any other key sets stroke to black
for(int i = 0; i < (columns*gridSquare); i = i + gridSquare){
line(i, 0, i, rows*gridSquare);
};
//creates grid's rows
for(int i = 0; i < (rows*gridSquare); i = i + gridSquare){
line(0, i, columns*gridSquare, i);
};
//creates grid's columns
line((columns*100) - 1, 0, (columns*100) - 1, (rows*100) - 1);
line(0, (rows*100) - 1, (columns*100) - 1, (rows*100) - 1);

for(int i = 0; i < (columns*gridSquare); i = i + gridSquare){
for(int j = 0; j < (rows*gridSquare); j = j + gridSquare){
int xDisplacement = int(random(10, gridSquare - squareSide - 10));
int yDisplacement = int(random(10, gridSquare - squareSide - 10));
rect(i + xDisplacement, j + yDisplacement, squareSide, squareSide);
//creates "originating" square
int divisions;
if(xDisplacement < 40 || yDisplacement < 40 || xDisplacement > 60 || yDisplacement > 60){
if(xDisplacement < 20 || yDisplacement < 20 || xDisplacement > 80 || yDisplacement > 80){
divisions = int(random(2, 4));
}
else{
divisions = int(random(4, 6));
};
}
else{
divisions = int(random(6, 10));
};
//randomly selects how many rectangles there will be between the "originating" square and the grid square
int upperDivisions = yDisplacement/divisions;
int lowerDivisions = (gridSquare - (yDisplacement + squareSide))/divisions;
int leftDivisions = xDisplacement/divisions;
int rightDivisions = (gridSquare - (xDisplacement + squareSide))/divisions;
for(int k = 1; k < divisions; k++){
line(i + (leftDivisions*k), j + (upperDivisions*k), (i + gridSquare) - (rightDivisions*k), j + (upperDivisions*k));
line(i + (leftDivisions*k), j + (upperDivisions*k), i + (leftDivisions*k), (j + gridSquare) - (lowerDivisions*k));
line((i + gridSquare) - (rightDivisions*k), j + (upperDivisions*k), (i + gridSquare) - (rightDivisions*k), (j + gridSquare) - (lowerDivisions*k));
line(i + (leftDivisions*k), (j + gridSquare) - (lowerDivisions*k), (i + gridSquare) - (rightDivisions*k), (j + gridSquare) - (lowerDivisions*k));
};
// creates said rectangles
};
};
keyP = true;
}
else if(!keyPressed && keyP == true){
keyP = false;
};
}```

There is something visually satisfying about the illusion of depth in a 2D space that the squares accomplish. The effect makes the “denser” squares on the grid look like pyramids that point either inwards, towards the screen, or outwards, towards the user. I added the change of hue because I’m a great fan of bright colors and their variation along the visible light spectrum (which I also used in my previous assignment). Finally, I enabled changing the stroke weight because the effect the image completely, and in my opinion, makes it more interesting. It somewhat reminded me of Cubist paintings…