Week 1: Self Portrait – Fatema Nassar

Description:

I have used processing before, but the way I used it was very different. I found it really interesting to try to imagine processing as a canvas with dimensions. Sadly though, a canvas would be much easier to use, as u do not need to calculate the position of each small detail in a portrait, you kind of analyze it with your eye(a much quicker process).

Even though it was a boring process that took a long time, I do believe that in the end, I was able to figure out the pixel setup, and the speed of the process was multiplied.

process:

I started with the eyes, and it took me quite some time to figure out how to draw them. I did figure out in the end that drawing a normal eye, however, may not look as good. So, I decided to make it more like animation eyes to make it look more natural and less forced.

After I finished the eyes, I started working on the mouth. I think I felt like making a slanted mouth looked nicer than a classic mouth would’ve, so I went for it.

 

The hair was quite a struggle. I first tried using a random number generator to make circles that would imitate curly hair. However, sadly after hours of debugging, making the random circles not appear in a square frame took me much more time than I expected, so I decided to use a processing curve instead. The curve still took me some time to figure out, as I never used it on processing before, but when I finally finished the right hair side, I added the left, and the hair was perfect. I also added the back part of the hair separately, as when I decided not to make a neck, the darker part of the hair at the back made the hair look more realistic.

Finally, I put the background. I used purple translucent circles over one another to make the background. The circles, I believe, work well with the no-neck style of the portrait, and I decided to use the color purple for the NYUAD pride we all have :)).

code:

and here to my final code after all the comments and replaced little pieces were removed.

// Public variables
int dimWidth = 1200;
int dimHeight = 900;

int faceHeight = 675;
int faceWidth = 500;

void facee(){
  hairB();
  fill(#D0BEB4);
  noStroke();
  ellipse(dimWidth/2, dimHeight/2, faceWidth, faceHeight);//face
  fill(222,93,131, 20);
  noStroke();
  circle(dimWidth/2+faceWidth/4,dimHeight/2+faceHeight/5, 100);//blush
  circle(dimWidth/2-faceWidth/4,dimHeight/2+faceHeight/5, 100);//blush
  
  //eyes
  eye(dimHeight/2-20, dimWidth/2+75, true);
  strokeWeight(0.5)  ;
  eye(dimHeight/2-20, dimWidth/2-75, false);

  //nose
  stroke(#8A6856);
  bezier(dimWidth/2-3, dimHeight/2+faceHeight/6 +3,
          dimWidth/2, dimHeight/2+faceHeight/6,
          dimWidth/2, dimHeight/2+faceHeight/6,
          dimWidth/2+5, dimHeight/2+faceHeight/6 +5);
  
  noStroke();
  
  //hair
  hair();
  
  //mouth
  
  mouth(); 
}

void backGround(){
}

void eye(int centerY, int centerX, boolean flag){
  int eyeHeight = faceHeight/3;
  int eyeWidth = faceWidth/6;
  fill(230);
  stroke(0);
  strokeWeight(0.5);
  ellipse(centerX, centerY, eyeWidth,eyeHeight);
  
  noStroke();
  fill(164,204,206);
  ellipse(centerX+2, centerY+eyeHeight/4, eyeWidth/1.5, eyeHeight/2); //blue color
  fill(50  );
  ellipse(centerX+6, centerY+eyeHeight/2.8, eyeWidth/3, eyeHeight/4); //black color
  fill(255,150);
  ellipse(centerX-10, centerY+eyeHeight/4, eyeHeight/5, eyeWidth/4); //white color
  
  stroke(0);
  noFill();
  strokeWeight(1);
  bezier(centerX+eyeWidth/5,centerY+eyeHeight/2+2,
            centerX+1,centerY+eyeHeight/2,
            centerX-1,centerY+eyeHeight/2,
            centerX-eyeWidth/5,centerY+eyeHeight/2+2);
            
  if(flag){
    lashes(centerX, centerY-eyeHeight/2,
        centerX + eyeWidth/7, centerY- eyeHeight/2+ eyeHeight/30,
        centerX + eyeWidth/5, centerY- eyeHeight/2, 
        centerX + eyeWidth/3, centerY- eyeHeight/2- eyeHeight/10,
        1);
    brows(centerX+eyeWidth/2+10, centerY-eyeHeight/1.8,
          centerX+30, centerY-eyeHeight/1.6,
          centerX-10, centerY-eyeHeight/1.5,
          centerX-eyeWidth/2+20, centerY-eyeHeight/1.5);
  }
  else{
    lashes(centerX, centerY-eyeHeight/2,
        centerX - eyeWidth/7, centerY- eyeHeight/2+ eyeHeight/30,
        centerX - eyeWidth/5, centerY- eyeHeight/2, 
        centerX - eyeWidth/3, centerY- eyeHeight/2- eyeHeight/10,
        -1);
    brows(centerX-eyeWidth/2-10, centerY-eyeHeight/1.8,
          centerX-30, centerY-eyeHeight/1.6,
          centerX+10, centerY-eyeHeight/1.5,
          centerX+eyeWidth/2-20, centerY-eyeHeight/1.5);
  }
}

void hair(){
  fill(51,34,17); 
  beginShape();
  vertex(dimWidth/2, dimHeight/2-faceHeight/1.9);
  curveVertex(dimWidth/2, dimHeight/2-faceHeight/1.9);
  curveVertex(dimWidth/2+faceWidth/1.7, dimHeight/2-faceHeight/1.2);
  curveVertex(dimWidth/2+faceWidth/1.7, dimHeight/2+faceHeight/2.2);
  curveVertex(dimWidth/2+faceWidth/2, dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2+faceWidth/2, dimHeight/2+faceHeight/2);
  vertex(dimWidth/2+faceWidth/2, dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2+faceWidth/4, dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2+faceWidth/3, dimHeight/2+faceHeight/3);
  curveVertex(dimWidth/2+faceWidth/3, dimHeight/2-faceHeight/4);
  curveVertex(dimWidth/2, dimHeight/2-faceHeight/3);
  curveVertex(dimWidth/2, dimHeight/2-faceHeight/3);
  vertex(dimWidth/2, dimHeight/2-faceHeight/3);
  endShape();
  beginShape();
  vertex(dimWidth/2, dimHeight/2-faceHeight/1.9);
  curveVertex(dimWidth/2, dimHeight/2-faceHeight/1.9);
  curveVertex(dimWidth/2-faceWidth/1.7, dimHeight/2-faceHeight/1.2);
  curveVertex(dimWidth/2-faceWidth/1.7, dimHeight/2+faceHeight/2.2);
  curveVertex(dimWidth/2-faceWidth/2, dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2-faceWidth/2, dimHeight/2+faceHeight/2);
  vertex(dimWidth/2-faceWidth/2, dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2-faceWidth/4, dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2-faceWidth/3, dimHeight/2+faceHeight/3);
  curveVertex(dimWidth/2-faceWidth/3, dimHeight/2-faceHeight/4);
  curveVertex(dimWidth/2, dimHeight/2-faceHeight/3);
  curveVertex(dimWidth/2, dimHeight/2-faceHeight/3);
  vertex(dimWidth/2, dimHeight/2-faceHeight/3);
  endShape();
}

void hairB(){
  fill(41,24,7);
  beginShape();
  vertex(dimWidth/2-faceWidth/2,dimHeight/2);
  vertex(dimWidth/2+faceWidth/2,dimHeight/2);
  vertex(dimWidth/2+faceWidth/2,dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2+faceWidth/2,dimHeight/2+faceHeight/2);
  curveVertex(dimWidth/2-faceWidth/2,dimHeight/2+faceHeight/2);
  vertex(dimWidth/2-faceWidth/2,dimHeight/2+faceHeight/2);
  endShape();
}

void lashes(int x1, int y1, int x2, int y2, int x11, int y11, int x12, int y12, int flag){
  bezier(x1,y1, x2,y2, x11,y11, x12,y12);
  bezier(x1+10*flag,y1+3, x2+10*flag,y2+3, x11+10*flag,y11+3, x12+10*flag,y12+3);
  bezier(x1+20*flag,y1+13, x2+20*flag,y2+13, x11+20*flag,y11+13, x12+20*flag,y12+13);
}

void brows(float x1, float y1, float x2, float y2, float x11, float y11, float x12, float y12){
  strokeWeight(4);
  bezier(x1,y1, x2,y2, x11,y11, x12,y12);
}

void mouth(){
  stroke(#A74242);
  strokeWeight(2);  
  fill(#A74242);
  bezier(dimWidth/2-faceWidth/6,dimHeight/2+faceHeight/3,
          dimWidth/2-5,dimHeight/2+faceHeight/2.5,
          dimWidth/2+5,dimHeight/2+faceHeight/2.5,
          dimWidth/2+faceWidth/5,dimHeight/2+faceHeight/3.5);
  noFill();
  bezier(dimWidth/2-faceWidth/6,dimHeight/2+faceHeight/3 -5,
          dimWidth/2-faceWidth/6,dimHeight/2+faceHeight/3,
          dimWidth/2-faceWidth/6,dimHeight/2+faceHeight/3,
          dimWidth/2-faceWidth/6-5,dimHeight/2+faceHeight/3 +5);

  bezier(dimWidth/2+faceWidth/5,dimHeight/2+faceHeight/3.5-5,
          dimWidth/2+faceWidth/5,dimHeight/2+faceHeight/3.5,
          dimWidth/2+faceWidth/5,dimHeight/2+faceHeight/3.5,
          dimWidth/2+faceWidth/5+5,dimHeight/2+faceHeight/3.5+5);
}



void setup(){
  size(1200,900);
  background(255);
  noLoop();
}

void draw(){
  //background
  int dim = dimWidth/4;
  fill(89,46,131,100);
  noStroke();
  for(int i=0; i<5; i++){
    circle(dimWidth/2, dimHeight/2, dim);
    dim+= dimWidth/4;
  }

  facee();
}

 

Leave a Reply