The assignment this week is to recreate an old computer art design from an issue of “Computer Graphics and Art”. So the original:
Here are a few instances of my recreation of this design:
The images here don’t seem to be particularly clear, so I uploaded a video as well:
To my understanding of the original design, a few things are controlled, there are a set number of big squares that divide up the screen; all shapes are squares; the size of the smallest square in each big square are all the same; each outer square is of equal distance to its adjacent squares.
On the other hand, there are also random elements to play with, the position of the smallest square, the number of the small squares in each big square. I also added the randomness of adding the project and creator to the first instance where there is only a small square. As a result, there is a possibility in which no project and creator name appears in the image, as in instance 3 listed above. Below is the code I used:
int sqrLength = 180; // the length of each big square
int x,y; // coordinates of each smaller square
int numLines; // how many small squres in big square
int counter = 0; // how many times square with only 1 squre inside appear
fullScreen();
for(int i =0; i<width; i=i+sqrLength){ //draw big squares
for(int j=0; j< height; j=j+sqrLength){
rect(i,j,sqrLength,sqrLength);
}
}
noFill();
for(int i =0; i<height/sqrLength; i++){ //draw vertically
for(int j=0; j<width/sqrLength; j++){ //draw horizontally
numLines = int(random(0,13));
x = int(random(30+180*j,120+180*j));
y = int(random(30+180*i,120+180*i));
if(numLines == 0){
counter++;
if(counter==1){
textSize(20);
fill(0, 102, 153);
text(“RANDOM”, x, y);
pushMatrix();
translate(x,y);
rotate(HALF_PI);
text(“SQUARES”,0,-33);
rotate(HALF_PI);
text(“ROSS”,-30,-33);
rotate(HALF_PI);
text(“JIANG”,-30,-5);
popMatrix();
noFill();
}
}
float xIncre = float(x-180*j)/(numLines+1); //the increment value of each small square
float yIncre = float(y-180*i)/(numLines+1);
for (int k = 0; k<numLines+1; k++){ //draw small squres
float lengthIncre = (float((150-(x-180*j)))/(numLines+1))*k+xIncre*k+30;
rect(x-xIncre*k,y-yIncre*k,lengthIncre,lengthIncre);
}
}
}