I chose to replicate this artwork because the particular pattern and organisation of the shapes provided some sort of comfort to me. I liked the aesthetic appeal of the repetition of squares. I initially set up the grid and border by using the line (for border) and rectangle (for grid) tool.
The challenge was that each square on the grid has its own pattern. In total, there were 35 different styles I had to account for. I decided that the most efficient way to code would be to create a for-loop for each square. This was the for-loop I decided to use for square #1 in the first row:
for (int i=0; i<6; i++){
rect((21+7i),(200+5i),(80-12i),(80-12i));
However, the for loop didn’t work. I later asked Aaron what the problem could be. He told me that I couldn’t multiply ‘i’ with a number by placing it next to a variable, I had to use the ‘*’ sign. It was a small error, but because I couldn’t figure it out on time I had hard-coded 80% of my project, which resulted in my code being long and inefficient. It was also extremely time consuming, but it also felt quite surprisingly meditative to hard code this project.
I also assumed that the dark values created by some of the rectangles (ex. below) would not be created by the rectangle tool, but the line tool and change in stroke weight. Hence I was skeptical of using the rectangle tool instead of the line tool throughout the process. But I was also afraid to use the line tool because of how incredibly time consuming it would be (in addition to hard-coding). I was surprised to find that the values can be created by the rectangle tool depending on how close the shapes are to each other, which gives the illusion of darker/lighter values.
from original artwork
The code for my project:
void setup(){
size(660,480); //w,h
}
void draw(){
background(255,255,255);
//border
strokeWeight(15);
line(0,0,660,0);
line(0,0,0,480);
line(660,0,660,480);
line(0,480,660,480);
//square skeleton 1st row
strokeWeight(1);
rect(15,15,90,90);
rect(105,15,90,90);
rect(195,15,90,90);
rect(285,15,90,90);
rect(375,15,90,90);
rect(465,15,90,90);
rect(555,15,90,90);
//SS 1st column
rect(15,105,90,90);
rect(15,195,90,90);
rect(15,285,90,90);
rect(15,375,90,90);
//SS 2nd column
rect(105,105,90,90);
rect(105,195,90,90);
rect(105,285,90,90);
rect(105,375,90,90);
//SS 3rd column
rect(195,105,90,90);
rect(195,195,90,90);
rect(195,285,90,90);
rect(195,375,90,90);
//SS 4th column
rect(285,105,90,90);
rect(285,195,90,90);
rect(285,285,90,90);
rect(285,375,90,90);
//SS 5th column
rect(375,105,90,90);
rect(375,195,90,90);
rect(375,285,90,90);
rect(375,375,90,90);
//SS 6th column
rect(465,105,90,90);
rect(465,195,90,90);
rect(465,285,90,90);
rect(465,375,90,90);
//SS 7th column
rect(555,105,90,90);
rect(555,195,90,90);
rect(555,285,90,90);
rect(555,375,90,90);
//1st square
noFill();
rect(23,23,75,75);
rect(30,30,60,60);
rect(38,38,45,45);
rect(46,46,30,30);
rect(54,54,15,15);
//1st square 2nd row
noFill();
rect(23,112,75,75);
rect(32,120,60,60);
rect(42,128,45,45);
rect(50,136,30,30);
rect(59,142,15,15);
//1st square 3rd row
rect(21,200,80,80);
rect(24,204,68,68);
rect(27,208,56,56);
rect(30,212,44,44);
rect(33,216,32,32);
rect(36,220,20,20);
//1st square,5th row
rect(24,385,70,70);
rect(32,395,50,50);
rect(40,405,25,25);
//1st square, 4th row
rect(21,290,80,80);
rect(26,295,70,70);
rect(31,300,60,60);
rect(36,305,50,50);
rect(41,310,40,40);
rect(47,315,30,30);
rect(52,320,20,20);
//2nd square
noFill();
rect(110,21,80,80);
rect(115,26,70,70);
rect(120,31,60,60);
rect(125,36,50,50);
rect(130,41,40,40);
rect(135,46,30,30);
rect(140,51,20,20);
//rect(145,56,10,10);
//2nd square 2nd row
rect(130,130,20,20);
//2nd square 4th row
rect(150,310,20,20);
//2nd square 5th row
rect(115,390,60,60);
rect(125,410,20,20);
//2nd square 3rd row
rect(111,200,80,80);
rect(119,210,65,65);
rect(128,220,50,50);
rect(137,230,35,35);
rect(146,240,20,20);
//3rd square
noFill();
rect(200,21,80,80);
rect(205,26,70,70);
rect(210,34,58,58);
rect(215,40,48,48);
rect(220,46,38,38);
rect(225,51,28,28);
rect(230,56,18,18);
//3rd square 2nd row
rect(200,110,80,80);
rect(205,115,70,70);
rect(210,120,60,60);
rect(218,125,46,46);
rect(224,130,36,36);
rect(230,135,26,26);
rect(236,140,16,16);
//3rd square 7th row
rect(240,400,20,20);
//3rd square 3rd row
rect(200,200,80,80);
rect(205,208,65,65);
rect(210,216,50,50);
rect(215,224,35,35);
rect(220,232,20,20);
//3rd square, 4th row
rect(203,293,75,75);
rect(208,299,65,65);
rect(215,310,50,50);
rect(223,320,35,35);
rect(230,330,20,20);
//4th square
noFill();
rect(298,27,70,70);
rect(310,40,50,50);
rect(322,52,30,30);
rect(334,62,14,14);
//4th square 2nd row
//noFill();
for (int i = 0; i <4; i++){
rect(295+7*i,118+10*i,70-15*i,70-15*i);
}
//4th square 3rd row
noFill();
for (int i=0; i<7; i++){
rect(290+5*i,200+3*i,80-10*i,80-10*i);
}
//4th square 4th row
rect(295,300,60,60);
rect(302,310,40,40);
rect(310,319,20,20);
//4th square 5th row
for (int i=0; i<5; i++){
rect(290+5*i,383+7*i,75-15*i,75-15*i);
}
//7th square
noFill();
rect(560,20,77,77);
rect(565,25,66,66);
rect(570,30,55,55);
rect(575,35,40,40);
rect(580,40,25,25);
//7th square 2nd row
noFill();
rect(560,110,80,80);
rect(565,115,70,70);
rect(568,118,60,60);
rect(572,122,50,50);
rect(576,126,40,40);
rect(581,130,30,30);
rect(585,135,20,20);
//7th square 5th row
rect(570,300,60,60);
rect(580,310,40,40);
rect(590,320,20,20);
//7th square 4th row
for(int i=0; i<9; i++){
rect(560+i*6,200+i*5,80-10*i,80-10*i);
}
//7th square 7th row
for(int i=0; i<7; i++){
rect(560+i*4,380+i*3,80-10*i,80-10*i);
}
//6th square
noFill();
rect(480,27,70,70);
rect(495,43,45,45);
rect(510,57,20,20);
//6th square 2nd row
noFill();
rect(470,110,80,80);
rect(475,116,70,70);
rect(480,121,60,60);
rect(485,126,50,50);
rect(490,131,40,40);
rect(495,136,30,30);
rect(500,141,20,20);
//6th square 7th row
rect(480,390,60,60);
rect(490,400,40,40);
rect(500,410,20,20);
//6th square 3rd row
for(int i=0; i<7;i++){
rect(470+3*i,200+6*i,80-10*i,80-10*i);
}
//6th square 4th row
for(int i=0; i<7;i++){
rect(470+5*i,290+3*i,80-10*i,80-10*i);
}
//5th square
rect(382,25,74,74);
rect(390,30,55,55);
rect(395,35,40,40);
rect(400,40,25,25);
//5th square 2nd row
rect(400,130,20,20);
//5th square 4th row
rect(390,300,55,55);
rect(407,317,20,20);
//5th square row 3
for(int i=0; i<7;i++){
rect(380+7*i,200+5*i,80-10*i,80-10*i);
}
//5th square row 5
for(int i=0; i<7;i++){
rect(380+3*i,380+4*i,80-10*i,80-10*i);
}
}