Author: Fatima Nadeem

For this week, I created a generative art piece using Processing. The project involved creating a simplistic art piece while implementing Object-oriented programming principles. My artwork includes a spiral, sort of Fibonacci spiral, using rectangles that have a random stroke color with fixed opacity and no fill.

Here are some images at different times into the artwork along with a video:

 

 

 

 

 

 

 

 

 

 

 

The design may seem like something very complex and difficult to implement but it actually is very simple. The only difficulty I encountered was when trying to implement it using OOP. Initially, it just would not work as intended. So, I started off by writing code in one piece and then sectioning it out. After that, I made the class and defined different functions and then played around with values to find some designs that I really like. Additionally, this time I worked on adding interactivity within the art. For this design, the user can choose to continue the spiral in the opposite direction once it has already ended. As its layout and final outcome is dependent on user liking, once the anti-clockwise spiral has completed, user can hold the mouse as long as they want until they achieve their final design.

I would happily say that this project has by far been the most fun. Even after deciding on a design initially, I tweaked the variables several times and found myself staring at amazing generative art on screen for an hour.

Here is the code for the art:

Spiral myspiral;

void setup(){
  size(600,600);
  background(0);
  noFill();
  rectMode(CENTER);
  frameRate(25);
  myspiral = new Spiral();
}

void draw(){
  //change to clockwise rotation once an anticlockwise spiral is completed
  //mouse is held
  if(mousePressed && myspiral.rect_height<=0){
    myspiral.draw_clockwise();
  }
  else{
    myspiral.draw_anticlockwise();
  }
}

public class Spiral{
  float rect_width;
  float rect_height;
  int change_width;
  int change_height;
  int initial_height;
  
  Spiral(){
    initial_height = 1500;
    rect_width = 0;
    rect_height = 1500;
    change_width = 3;
    change_height = 5;

  }
  
  void draw_anticlockwise(){
    if (rect_height>0) {
      //make it pivoted at center
      translate(width/2,height/2);
      //angle of rotation
      rotate(rect_width + noise(rect_width*0.01));
      //random color fill, fixed transparency
      stroke(random(255),random(255),random(255),100);
      //spiral series of rectangles
      rect(0,0,1080-rect_width, rect_height);
      //updating change
      rect_width += change_width;
      rect_height -= change_height;
    }
  }
  
  void draw_clockwise(){
    if (rect_height <= 0 && rect_height >= (-1 * initial_height)) {
      //make it pivoted at center
      translate(width/2,height/2);
      //angle of rotation
      rotate(rect_width - noise(rect_width*0.01));
      //random color fill, fixed transparency
      stroke(random(255),random(255),random(255),100);
      //spiral series of rectangles
      rect(0,0,1080 + rect_width , rect_height);
      //updating change
      rect_width -= change_width;
      rect_height -= change_height;
    }
  }
  
}

 

For this week, I created an art piece using primitive Processing functions and loops that we have learned in class so far. Putting all this into practice, I decided to implement a digital carpet design. Something to look forward to: It changes color 60 times in a second! Now let us look into the design process.

Production Process:

To imitate the carpet look,  I went with a 400×600 pixel frame size. Being clueless about the creative process, in the beginning, I tried several designs and struggled with the implementation. So after a couple of hours of crying and disappointment, I started to sketch using pen and paper; ok, digital pen and paper. Here is how it went:

With the design and proportions sketched out, it made the implementation so easy. I started with initializing the variables that would help control the size of everything to keep the design proportional. I am so glad that I was able to not hard-code and still implement the code efficiently. The magic behind, simple maths!

Then, I started working on the different parts of the design, row by row. While the implementation of a particular design in a row was simpler, the desired design was a trial and error process. After writing the code of each line, it was important to check how it displays on the screen and interacts with the existing design. Often times the design would be messed up (see the attached production process images) and then this would require different parts of code to be shifted around to achieve the desired look.

 

 

 

 

 

 

To make the artwork more bright and happening, I made the color of the different parts of the design change but within a color palette. Might sound like something very complex, but random() got the job done. Restricting the values to random() enabled the beautiful color scheme that you can see below. My screen in the video does not do justice to colors, so below is a screenshot also.

If only I was creative enough, I could have implemented additional design elements into my art. However, I am delighted that I was able to finish this project to the best of my ability.

The final design might not be what I originally had high hopes about, I still believe that I have made significant progress with my design process. I look forward to several other design assignments as an opportunity to improve my designs and production process.

 

Here is the final code for the design:

//Global variables to keep it proportionate
int boxsize = 20;
int horizontalbox = 20;
int verticalbox = 30;
int circlesize = 7;

void setup(){
  size(400,600);
  background(0);
}

void draw(){
  
  //Random small Circles in the middle of canvas
  for(int x = boxsize*5; x<=boxsize*15; x+=circlesize){
    for(int y = boxsize*10; y<=boxsize*20; y+=circlesize){
      if(y>=boxsize*10 && y<=boxsize*20 && x>=boxsize*5 && x<=boxsize*15 ){
        noStroke();
        fill(random(100),0,random(250));
        circle(random(x),random(y),circlesize);
      }
    }
  }
  
 
  //Random circles in 3rd row
  for(int x = 0; x<=width; x+=circlesize){
    for(int y = 0; y<=height; y+=circlesize){
      if(y>=boxsize*3 && y<=boxsize*6){
        noStroke();
        fill(random(100),0,random(250));
        circle(random(x),y,circlesize);
      }
    }
  }
  
  //Random circles in te third last row
  for(int x = 0; x<=width; x+=circlesize){
    for(int y = 0; y<=height; y+=circlesize){
      if(y>=boxsize*24 && y<=boxsize*27){
        noStroke();
        fill(random(100),0,random(250));
        circle(random(x),y,circlesize);
      }
    }
  }
  
  //Line Strokes in 2nd row
  for(int i = boxsize; i <= boxsize*3; i+=(boxsize*2)/10){
    strokeWeight((boxsize*2)/10);
    stroke(random(250),0,75);
    line(0,i,width,i);
  }
  
  //Line strokes in 2nd last row
  for(int i = boxsize*27; i <= boxsize*29; i+=(boxsize*2)/10){
    strokeWeight((boxsize*2)/10);
    stroke(random(250),0,75);
    line(0,i,width,i);
  }
  
  stroke(0);
  line(0,boxsize*6,width,boxsize*6);
  
  //slanted lines in 4th Row
  for(int j = 0; j< width+boxsize; j+=boxsize/5){
    strokeWeight(4);
    stroke(random(100),0,50);
    line(j, boxsize*6, j-boxsize, boxsize*8);
  }
  
  stroke(0);
  line(0,boxsize*24,width,boxsize*24);
  
  //Slanted lines in 4th last row
  for(int j = 0; j< width+boxsize; j+=boxsize/5){
    strokeWeight(4);
    stroke(random(100),0,50);
    line(j-boxsize, boxsize*22, j, boxsize*24);
  }
  
  //fills at top and bottom for finish
  fill(0);
  strokeWeight(3);
  rect(0,0,width,boxsize);
  rect(0,boxsize*29,width,height);
  
  //slanted lines 6th row , right
  for(int j = boxsize*15; j< width+boxsize*4; j+=boxsize/5){
    strokeWeight(4);
    stroke(random(250),0,50);
    line(j, boxsize*10, j-boxsize*4, boxsize*15);
  }
  
  //slanted lines 7th row, right
  for(int j = width+boxsize*4; j>boxsize*11 ; j-=boxsize/5){
    strokeWeight(4);
    stroke(random(250),0,50);
    line(j, boxsize*15, j+boxsize*4, boxsize*20);
  }
  
  //slanted lines 6th row, left
  for(int j = boxsize*5; j>-boxsize*5 ; j-=boxsize/5){
    strokeWeight(4);
    stroke(random(250),0,50);
    line(j, boxsize*10, j+boxsize*4, boxsize*15);
  }
  
  //slanted lines 7th row, left
  for(int j = 0; j< boxsize*9; j+=boxsize/5){
    strokeWeight(4);
    stroke(random(250),0,50);
    line(j, boxsize*15, j-boxsize*4, boxsize*20);
  }
  
  //small boxed grid 5th row
  for(int x=0; x<=width; x+=(boxsize*2)/10){
    for(int y=boxsize*8; y<=boxsize*10; y+=(boxsize*2)/10){
      noStroke();
      fill(random(250),0,random(250));
      rect(x,y,(boxsize*2)/10,(boxsize*2)/10);
    }
  }
  
  //small boxed grid 8th row
  for(int x=0; x<=width; x+=(boxsize*2)/10){
    for(int y=boxsize*20; y<=boxsize*22; y+=(boxsize*2)/10){
      noStroke();
      fill(random(250),0,random(250));
      rect(x,y,(boxsize*2)/10,(boxsize*2)/10);
    }
  }
  
  //big circles in the middle of screen
  for(int x=boxsize*6; x>=boxsize/4; x-=boxsize/4){
    stroke(random(250),0,150);
    circle(width/2,height/2,x);
  }
  
}

 

 

For the first weekly production assignment, I worked in Processing to make a not-so-realistic self-portrait. The objective was to work with the basic functions and primitive shapes in Processing. This process, frustrating but fun, got me accustomed to the syntax implementation. Additionally, it was a great way to involve in process of researching and discovering different implementation techniques.

Production Process:

I started the assignment with high hopes, thinking to incorporate many artistic elements unaware of how difficult it would be. I sketched some designs digitally and to make it look more cool and trendy, I tried to sketch some Snapchat filters.

Having no experience with Processing beforehand, I had no idea where to start with and how to implement my sketch. After hours of watching different tutorials and trying different things, I decided to take each element one by one and try to implement the simplistic version. Later, I could work on it more to the best of my ability.

1- Size and Background

To start off, I set the size of the canvas to 350×450, resembling a photo ID dimensions standard. Then I used loops to create a grid and ellipses to create a ripple pattern. While I tried to work with different things to incorporate a gradient, I ended up resorting to a solid color background with white strokes.

//ripple effect looking background by creating not filled ellipses using loop
  while(x<= height){
    stroke(250);
    strokeWeight(0.75);
    noFill();
    ellipse(width/2,height/2,x,y);
    x = x + 30;
    y = y + 40;
  }
  
  //grid background
  for(int z = 10; z <= width; z+= 10){
    noFill();
    stroke(250);
    strokeWeight(0.01);
    line(z,0,z,height);
  }
  
  for(int z = 10; z <= height; z+= 10){
    noFill();
    stroke(250);
    strokeWeight(0.01);
    line(0,z,width,z);
  }

2- Face and Shoulders

I tried to do my best in finding the best color to match my skin tone. While the face doesn’t look realistic any bit, but I worked with different sizes of ellipses to form basic features. To make the shoulders, I used continuous curves and filling in any remaining places using rectangles. The eyes were also made using ellipses. The nose and smile were completed using curves.

3- Hair

The most time-consuming and frustrating part was making hair. As I wanted to sort of incorporate my somewhat wavy and color-treated hair, I spent so much time trying different things. Finally, I ended up making three rectangles with different transparency for the gradient. To make some waves and blend the colors in I made some ellipses and positioned them to give the effect of highlights. That is the part where so many ellipses come into effect.  Additionally, for the forehead hair, I used curves, and rather than filling, I just used a thicker stroke. While the code for this part is long, but here is a small snippet:

//hair made using small ellipses and gradient look using rectangles
  fill(52,30,25); //dark brown
  ellipse(width/2, height/2, 190, 220);
  fill(90,42,33,60);   //light brown
  rect(80,204, 188, 150);
  fill(124,30,11,190);  //red
  rect(82,245, 187, 110);
  
  //ellipses to curve hair
  fill(90,42,33,120);
  ellipse(85, 198, 15, 40);
  ellipse(101, 202, 15, 40);
  ellipse(248, 198, 15, 40);
  ellipse(264, 202, 15, 40);
  ellipse(84, 233, 15, 60);

//forehead hair by using continuous curves
  stroke(52,30,25);
  strokeWeight(35);
  beginShape();
  curveVertex(76, 202); // the first control point
  curveVertex(110, 188); // is also the start point of curve
  curveVertex(175, 133); //last point
  curveVertex(184, 115); //last control point
  endShape();

4- Dress

To make the portrait look sort of cute, I used rectangles to make a dress top. For the same reason, I chose a lighter shade of pink and polka dot effect. Nothing fancy, just some rectangles, circles, and cute colors.

5- Accessories

To jazz it up a little more, I wanted to include my everyday accessories at least. So, there you see my most emotionally valuable necklace and my classic nerdy glasses. For the necklace, it was two lines and a circle. The glasses were a couple of rectangles and lines.

//glasses
  stroke(20);
  strokeWeight(2.75);
  rect(126,227,40,20);
  rect(185,227,40,20);
  line(126,227,105,223);
  line(224,227,244, 222);
  line(167,232,184, 232);

//necklace
  strokeWeight(1.2);
  stroke(240,198,31);
  line(148,350,174,398);
  line(174,398, 203, 349);
  noStroke();
  fill(252,20,102);
  circle(175,396,8);

Also here is a short look at the production process:

And there you have the final self-portrait. Although I am kinda disappointed that I was unable to make it look like what I originally intended, I am proud that I got to learn something new and put that in effect. One of the weaknesses of the code is surely the hard-coded position coordinates, which I am in no way proud to do. My takeaway from this production is to practice more and try to be more creative in the implementation. Hopefully, with each production, I would learn more and find ways to enhance my code.

Cheers to a great semester ahead!