# Recreating the Computer Art

For this week’s assignment, I chose this pattern to recreate,

and here is my recreation of this art.

After quite a few attempts, I decided to do the simplest way to recreate this art; I coded the squares one by one.

Here is the coding.

```void setup() {
size(300, 300);
background(255);
rectMode(CENTER);
noFill();
}

void draw() {
//the largest squares
rect(50, 50, 90, 90);
rect(50, 150, 90, 90);
rect(50, 250, 90, 90);
rect(150, 50, 90, 90);
rect(150, 150, 90, 90);
rect(150, 250, 90, 90);
rect(250, 50, 90, 90);
rect(250, 150, 90, 90);
rect(250, 250, 90, 90);
// the second largest squares
rect(45, 45, 60, 60);
rect(60, 150, 60, 60);
rect(50, 260, 60, 60);
rect(160, 60, 60, 60);
rect(160, 150, 60, 60);
rect(150, 260, 60, 60);
rect(260, 60, 60, 60);
rect(260, 150, 60, 60);
rect(250, 260, 60, 60);
// the third largest squares
rect(45, 45, 30, 30);
rect(60, 150, 40, 40);
rect(50, 260, 30, 30);
rect(160, 60, 40, 40);
rect(160, 150, 30, 30);
rect(150, 260, 40, 40);
rect(260, 60, 30, 30);
rect(260, 150, 40, 40);
rect(250, 260, 30, 30);
// the smalles squares
rect(45, 45, 10, 10);
rect(60, 150, 20, 20);
rect(50, 260, 10, 10);
rect(160, 60, 20, 20);
rect(160, 150, 10, 10);
rect(260, 60, 10, 10);
rect(250, 260, 10, 10);
// some additional squares to make the appearance closer to the original
rect(60, 150, 10, 10);
rect(160, 60, 10, 10);
rect(60, 150, 50, 50);
rect(160, 60, 50, 50);
rect(60, 150, 40, 40);
rect(160, 60, 40, 40);
rect(60, 150, 30, 30);
rect(160, 60, 30, 30);
}```

This looks rather different from the original, since the gaps between the squares within one pattern is not uniform. Also,  this coding is not really a good way to recreate, as everything is fixed and it takes time if more patterns need to be created (mine consists of only 9 patterns whereas the original contains 70 of them).