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);
 text("Click here", 300, 250);
 //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…

Maybe? Just a little bit?