Assignment 8: Recreating Computer Art

This week’s assignment, which was to recreate one of the artworks from this article, was probably the hardest assignment of the semester for me. This, I realized, is due to my inexperience with coding and algorithm-based thinking. Hopefully, after this assignment, I will have a little more experience with those skills that I can put to use in future assignments 🙂

Many artworks in the article caught my eye, but the two I liked best were these:

the Dots piece (whose real name is Untitled Serigraphs):\

the Peacock piece:

However, I tried my hand at both and did not get where I wanted to be — with the first dots one, I could just manage to create a single line of ellipses. With the peacock one, I ended up with a sort of rough draft in which I found I was unable to do the lines within the circles.

My peacock piece draft:

So for Monday’s class, I decided to go for the simple shape-filled artwork. I honestly enjoyed doing it because I could do shapes quite easily, and it was a break from the frustration that I felt while working on the other two.

Here are the shapes:

 

However, I decided that I still really wanted to work on the dots piece, which had been my favorite artwork from the start, and so I got a TON (seriously, a lot) of help and finally arrived at this:

(Sorry for the unclear picture, but the screenshot was even worse.)

It’s not too much like the original, but I’m really quite happy with it because it is so much of an improvement from what I was able to do with it before. The code divides the image into a few sections — the uneven parts at the beginning and end, the two diamonds, and the part between the two. Here is the code:

void setup () {
 size (1000, 640);
 background(0, 0, 0);
 noStroke();
 rect(10, 9, 30, 619);
 rect(10, 598, 980, 30);
 rect(960, 9, 30, 619);
 rect(10, 9, 980, 30);
}

int addition = 0;
void draw() {
 println(mouseX, " ", mouseY);

 int radius =2;
 int spacing =7;
 int counter=544;
 int i = 1;
 int startY = 0;
 int endY = 0;



//first part of screen
 for (int x=63; x<120; x += spacing) {
 //ellipse(x, 329, radius, radius);
 boolean increase = false;
 for (int y=77; y<height-77; y+=spacing) {
 if (y>counter) {
 if (y>77 && y<177) {
 fill(175);
 } else {
 fill(255);
 }
 ellipse(x, y, radius, radius);
 increase = true;
 }
 }
 if (increase == true) {
 if (i == 4)
 counter -= 21;
 else 
 counter -= 7 * (i*7);
 i++;
 }
 }

//middle is 320

int lowD1=200;
int lowD2=0;
int highD1=440;
int highD2=0;

for( int x=120; x<300; x+=spacing){

 lowD1-=spacing/2;
 highD1+=spacing/2;

 if(x%3 ==0){
 //gonna have one that prints to all the way
 
 startY=0;
 endY=height-77;

 }else if(x%3 ==1){
 //one that prints from the top of the diamond to the bottom.
 startY=lowD1;
 endY=height-77;

 }else{

 startY=0;
 endY=highD1;

 }

 for (int y=startY; y<endY; y+=spacing){
 fill(175);
 //figure out shades later.
 ellipse(x, y, radius, radius);
 }


}

lowD2=320;
highD2=320;

for (int x=300; x<500; x+=spacing){

 lowD1-=spacing/2;
 highD1+=spacing/2;
 lowD2-=spacing/2;
 highD2+=spacing/2;


 if(x%3 ==0){
 //this one prints all the way to the bottom from the lowD2; 
 startY=lowD2;
 endY=height-77;

 }else if(x%3 ==1){
 //one that prints the larger diamond shape.
 startY=lowD1;
 endY=highD1;

 }else{
 //one that prints all the way to the top from the high D2;
 startY=0;
 endY=highD2;

 }

 for (int y=startY; y<endY; y+=spacing){
 fill(175);
 ellipse(x, y, radius, radius);
 //figure out shades later.
 }

}



for (int x=500; x<700; x+=spacing){

 lowD1+=spacing/2;
 highD1-=spacing/2;
 lowD2+=spacing/2;
 highD2-=spacing/2;


 if(x%3 ==0){
 //this one prints all the way to the bottom from the lowD2; 
 startY=lowD2;
 endY=height-77;

 }else if(x%3 ==1){
 //one that prints the larger diamond shape.
 startY=lowD1;
 endY=highD1;

 }else{
 //one that prints all the way to the top from the high D2;
 startY=0;
 endY=highD2;

 }

 for (int y=startY; y<endY; y+=spacing){
 fill(175);
 ellipse(x, y, radius, radius);
 //figure out shades later.
 }

}
//second last part of screen

for( int x=700; x<820; x+=spacing){

 lowD1+=spacing/2;
 highD1-=spacing/2;

 if(x%3 ==0){
 //gonna have one that prints to all the way
 
 startY=0;
 endY=highD1;

 }else if(x%3 ==1){
 //one that prints from the top of the diamond to the bottom.
 startY=0;
 endY=height-77;

 }else{
 startY=lowD1;
 endY=height-77;

 }

 for (int y=startY; y<endY; y+=spacing){
 fill(175);
 //add shades.
 ellipse(x, y, radius, radius);
 }


}

//last part of the screen

 counter=544;
 i=1;

for (int x=820; x<950; x+=spacing) {

 boolean increase=true;
 for ( int y=77; y<height-77; y+=spacing) {
 if (y<counter) {
 if (y>77 && y<177) {
 fill(175);
 } else {
 fill(255);
 }
 ellipse(x, y, radius, radius);
 increase=false;
 }
 }
 if (increase==false) {
 if (i == 4)
 counter-=21;
 else 
 counter-=7*(i*7);
 i++;
 }
 }

noLoop();

A few shoutouts:

To Aaron, for being incredibly patient and helping me to set the base for the code.
To UNIX lab friends and lab monitors, for answering all of my silly questions.
To my classmates, who without judgment threw out a bunch of really helpful suggestions to help recreate the dots piece 🙂

Thank you!