Month: September 2020

Within the process of creating my self portrait , I struggled with a lot of different things ranging from simple writings  and ordering of codes to changing various colors, shapes and sizes of different figures, and many more. I have absolutely zero experience with coding, therefore I was only able to create this five-year-old-like-drawing of mine. However, I hope to be able to get better at coding in the future and it would be really appreciated if any of you guys could give me tips or recommendations for websites that could help me with my coding skills so  I wouldn’t  have  to  look  like  a snowman.

int backgroundColor = 255;
int x=200; 
int y=200;
float a= 100;
float b=100;
float start=180;

void setup(){
  size(500,600);
  x=width/2;
  y=height/2;}

void draw() {
  background(backgroundColor);
 //face shape 
ellipse(250, 320, 400, 400);

//nose
triangle(250,380,200,380,250,330);
//spectacles
rect(100,275,100,60);
rect(300,275,100,60);
line(100, 300,50,300);
line (400, 300, 450, 300);
 // Lips 
 pushStyle();
  fill(210, 153, 133);
  arc(250, 400, 80,80,0, PI, PIE);  
  popStyle();
  
// Eye shape 
ellipse(150, 300, 60, 30);
ellipse (350, 300, 60, 30);



//eye color
pushStyle();
fill(0);
ellipse(150, 300, 20, 20);
ellipse (350, 300, 20, 20);
popStyle();
//eyebrow
pushStyle();
fill(0);
rect(100,250,70,20,7);
rect(320,250,70,20,7);
popStyle();


}

 

For the first assignment in this course, we each had to make a self-portrait using Processing. The way I see it, self-portrait shows the way you want yourself to be presented to other people rather than how you precisely look on the exterior. Having grown in numerous different places I call home as a third-culture kid, I have always perceived myself as someone who has a spectrum of colors. Adapting was something that I grew accustomed to almost as if I became a chameleon. So even in this project I have incorporated an effect where my cartoon-like self-portrait is bouncing around the screen and, at the same time, changing colors (when a mouse is pressed). The change in color does not only happen in one area of the frame but rather everywhere in different variations. So when the background color changes, the color of my face, the color of my pupils, and the color of my name all change asynchronously. All of these animations were put into place so that I could illustrate how I adapt to the capricious environment. The following are the video of my animated self-portrait and code:

//David's self portrait

float x;
float y;
int xspeed = 2;
int yspeed = 2;
float c1 = random(255);
float c2 = random(255);
float c3 = random(255);

void setup(){
  size(500, 300);
  x = width/2;
  y = height/2;
}

void draw(){
  background(c1, c2, c3);
  stroke(10);
  noFill();
  if (x >= width-80 || x<=50) {
    xspeed *= -1;
  }
  if (y >= height-80 || y<=50) {
    yspeed *= -1;
  }
  x += xspeed;
  y += yspeed;
  
  face(x,y);
}

void face(float x, float y){
  //face
  fill(c3,c2,c1);
  ellipse(x+15, y+15, 130, 150);
  
  //eyes
  fill(255);
  ellipse(x-10, y, 30, 20);
  ellipse(x+40, y, 30, 20);
  
  //pupils
  fill(c1,c2,c3);
  ellipse(x-10, y, 10, 10);
  ellipse(x+40, y, 10, 10);
  
  //mouth
  fill(c3,c1,c2);
  arc(x+15, y+40, 80, 50, 0, 3.14);
  line(x-25, y+40, x+55, y+40);
  
  //eyebrows
  noFill();
  arc(x+40, y-10, 30, 20, 3.14+0.3, TWO_PI-0.3);
  arc(x-10, y-10, 30, 20, 3.14+0.3, TWO_PI-0.3);
  
  //ears
  fill(c3,c2,c1);
  arc(x-50, y+10, 30, 20, HALF_PI, PI+2*QUARTER_PI);
  arc(x+80, y+10, 30, 20, PI+2*QUARTER_PI,TWO_PI+2*QUARTER_PI); 
  
  //nose
  arc(x+15, y+20, 30, 15, HALF_PI, PI+2*QUARTER_PI);
  
  //NYU Cap
  fill(101, 101, 252);
  arc(x+15, y-25, 110, 100, 3.14, TWO_PI);
  fill(101, 101, 252);
  line(x+70, y-25, x+100, y-25);
  
  //text
  textSize(25);
  fill(c2,c1,c3);
  text("NYU", x-10, y-40);
  fill(c1,c3,c2);
  text("David", x-16, y+120);
}

void mousePressed () {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    c1 = random(255);
    c2 = random(255);
    c3 = random(255);
  }
}

 

I struggled at first to actually start doing anything that is meaningful because I like to plan things ahead and foreseeing how the coding will go is quite difficult. I took inspiration from my Snapchat Bitmoji, knowing it’s just for ideas not copying.

I made some quick research on Processing’s Reference pages and decided that the beginShape() might be a very suitable method for drawing the face, hair, and eyes (basically figures I thought would require complex drawing to be perfected).

I tried out the function and this is what I was able to do before realizing that the shape of the face can just be an ellipse for the sake of simplicity and because beginshape() will take a very long time to draw a curved shape.

 

 

 

 

 

 

 

I then started to master the small operations that I code for each part of the portrait, and I drew a very detailed eye which contains the eye itself, the brown iris, the white sclera, the pupil, and dark brown eyebrows.

Even though the eye was on point, I realized that making the portrait realistic will just make it weird and ugly so the rest of the face should just be more cartoon-like.

I drew a simple nose with just one outline from the right and some detail at the bottom, and I made a very simplistic but appropriate slightly-smiling mouth. The main function used was the “arc” function and I also struggled at first to understand how the radian angles calculations were carried out but I got things right simply by very long trial and error.

After completing most of the face, I decided to draw the hair using the beginShape() function which I struggled with earlier, and it turned it to be extremely useful for irregular shapes. By now, I was almost blindly typing numbers and automatically making calculations of dimensions and distances.

I made the ears using another arc function, and I decided to make the background a still photo of something that represents me; squash. I played squash for 5 years and even though I stopped playing years ago, I adore the sport and still play for fun until today.

Lastly, I decided to make use of the clicking of mouse function in a simple creative way where if you click the mouse the colors of the eyes and the clothing randomly change simultaneously.

 

//Assignment 1 Yahia Beethoven Tayel self portrait

//Initializing the variables before any function
//In case the image doesn't load
int backgroundColor = 255;
//dimesnions of the portrait
float x;
float y;

//randomized variables for the color of the clothes when mouseclicked
float r = 0;
float g = 0;
float b = 0;

float r1 = 96;
float g1 = 49;
float b1 = 1;

//setting up the plane on which the portrait is drawn
void setup() {
  size(500, 640);
  x = width/2;
  y = height/2;
  PImage img;
  img = loadImage("squash_background.PNG");
  img.resize(500, 640);
  background(backgroundColor);
  background(img); 
}  

//the main draw function that makes the face
void draw() {

 
//draws neck
fill(241, 194, 125);
stroke(205, 133, 63);
rect(x - 43, y+180, 90, 60);

//draws the face
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);
ellipse(x, y, 6.5*x/5, 7*y/6);

//draws the hair
strokeWeight(3);
fill(45, 23, 13);
stroke(0);

beginShape();
vertex(x/4 + 24, y - 25);
vertex(3*x/8, 2*y/3);
vertex(x/2, y/2.3);
vertex(5*x/8, y/3);
vertex(3*x/4, y/3.75);
vertex(7*x/8, y/4.45);
vertex(x, y/4.5);
vertex(x+10, y/4.7);
vertex(9*x/8, y/4.45);
vertex(5*x/4, y/4);
vertex(11*x/8, y/3);
vertex(3*x/2, y/2.3);
vertex(13*x/8, 2*y/3.2);
vertex(x+3*x/4 - 24, y - 25);
vertex(13*x/8 - 20, 2*y/3 +20);
vertex(3*x/2 - 30, y/2.3 +55);
vertex(11*x/8 - 5, y/3 +60);
vertex(5*x/4 +15, y/2.3 +55);
vertex(11*x/8 - 10, y/3 +50);
vertex(9*x/8 +15, y/2.3 +25);
vertex(9*x/8 - 15, y/2.3 +35);
vertex(x- 15, y/2.3 +33);
vertex(7*x/8, y/2.3 +30);
vertex(5*x/8 +30, y/2.3 +25);
vertex(5*x/8 +15, y/2.3 +20);

vertex(x/2, 2*y/3);
endShape(CLOSE); 


//draws the eyes
strokeWeight(4);
fill(255);
stroke(0);

ellipse(3*x/4, 4*y/5, x/3.5, y/8);
ellipse(5*x/4, 4*y/5, x/3.5, y/8);

//draws the iris
strokeWeight(3);
fill(r1, g1, b1);
stroke(0);

ellipse(3*x/4, 4*y/5, x/7, y/9);
ellipse(5*x/4, 4*y/5, x/7, y/9);

//draws the pupil

fill(0);
stroke(0);

ellipse(3*x/4, 4*y/5, x/13, y/15);
ellipse(5*x/4, 4*y/5, x/13, y/15);

//draws the white spot
strokeWeight(1);
fill(255);
stroke(255);

ellipse(3*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);
ellipse(5*x/4 + x/38, 4*y/5 - y/25, x/25, y/40);

//draws the eyebrows
strokeWeight(1);
fill(43, 29, 14);
stroke(43, 29, 14);
arc(3*x/4 - 3, 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI + 0.4, TWO_PI+QUARTER_PI/2 +0.4);
arc(5*x/4 -3 , 4*y/5-y/10, x/3, 13, HALF_PI+QUARTER_PI, TWO_PI+QUARTER_PI/2 - 0.4);

//draws the nose
noFill();
stroke(205, 133, 63);
strokeWeight(4);

//arc(x+12, 5*y/6 + 10, 7, y/2.5, 0, HALF_PI);
arc(x-18, 5*y/6 + 75, 7, y/2.5, PI, PI+QUARTER_PI+0.5);
//took the two nostrils idea from aysha of this class
arc(x - 23, y+30, 21, 21, HALF_PI-QUARTER_PI/3, PI+2*QUARTER_PI);
arc(x+16, y+30, 21, 21,  -HALF_PI, HALF_PI+QUARTER_PI/2);
arc(x-3, y+40, 30, 21,  0, PI);

//draws the mouth
noFill();
stroke(0);
arc(x, y+95, 95, 21,  0, PI);
strokeWeight(7);
point(x+47.5, y+95);
point(x-47.5, y+95);

//draws the ears 
strokeWeight(3);
fill(241, 194, 125);
stroke(205, 133, 63);

arc(x/4 + 26, y - 10, x/4, y/3.5, HALF_PI, PI+HALF_PI );
arc(x+3*x/4 - 26, y - 10, x/4, y/3.5, -HALF_PI, PI-HALF_PI);


//draws shoulders
fill(r, g, b);
stroke(0);
beginShape();
vertex(0, 2*y);
vertex(x/4, y+240);
vertex(x+3*x/4, y+240);
vertex(2*x, 2*y);
endShape();

} 
//functions that are called when the mouse is clicked to randomly change the colors of both the eyes and the clothes simultaneously
void mousePressed() {
   r = random(255);
   g = random(255);
   b = random(255);
   
   r1 = random(255);
   g1 = random(255);
   b1 = random(255);
}

 

I learned a lot through this simple assignment and I look forward to future assignments which will help develop my skills in programming much more.

 

 

size(800, 800);
background(0,25,0);

//hair
fill(25,2,0);
square(150, 150, 500);
//fringe

//head
fill(245,245,220);
circle(400,400,400);
noFill();

//neck
stroke(245,245,220);
fill(245,245,220);
rect(340,590, 110, 150, 7);

//fringe
stroke(25,2,0);
fill(25,2,0);
triangle(150,350,450,200,500,230);
triangle(150,350,300,200,450,200);
noFill();
noStroke();

// outer eye
stroke(0);
fill(255);
ellipse(325,350,60,40);
ellipse(470,350,60,40);
noFill();
noStroke();

// green part of eye
stroke(0);
fill(0,60,70);
circle(325,350,25);
circle(470,350,25);
noFill();
noStroke();

// puipl
stroke(0);
fill(0,0,0);
circle(325,350,5);
circle(470,350,5);
noFill();
noStroke();

//mouth
stroke(255,192,203);
fill(255,192,203);
triangle(360,510,380,500,400,510);
triangle(400,510,420,500,440,510);
triangle(360,510,400,530,440,510);
noFill();
noStroke();

//nose
stroke(217,179,130);
fill(217,179,130);
circle(390,436,14);
circle(420,436,14);
noFill();
noStroke();

//shirt or shoulders
fill(100,0,50);
rect(150,680,510, 200);
noFill();

Unintentionally turning myself into Mrs.Potato Head….

void setup() {
  size (640, 480);
};

void draw() {
  hair();
  drawHead(); 
  drawLeftEye();
  drawRightEye();
  drawLips();

  leftNostril();
  rightNostril();
  noseTip();
  bangs();

  //255,192,203 is pink
};

void drawLeftEye() {

  fill(255, 255, 255);
  int x1=56;
  int y1=46;
  ellipse(x1+200, y1+120, 105, 55); //eyewhite
  fill(160, 82, 45); //iris color
  ellipse(x1+200, y1+120, 55, 55);
  fill(0, 0, 0);
  ellipse(x1+200, y1+120, 20, 20);
};

void drawRightEye() {
  int x1= 200;
  int y1=  46;
  fill(255, 255, 255);
  ellipse(x1+180, y1+120, 105, 55); //eyewhite
  fill(160, 82, 45); //iris color
  ellipse(x1+180, y1+120, 55, 55);
  fill(0, 0, 0);
  ellipse(x1+180, y1+120, 20, 20);
};

void drawHead() {
  int x1= 640;
  int y1= 480;
  fill(255, 239, 213);
  ellipse(x1/2, y1/2, 300, 400);
};


void drawLips() {

  fill(255, 192, 203);
  noStroke();
  int a = 30;
  int b =75;
  int c =100;
  int d =20;
  int e = 150;
  int f= 75;
  int g= 270;
  int h= 200;
  triangle(a+165, b+250, c+165, d+250, e+165, f+250);
  triangle(e+165, f+250, h+165, d+250, g+165, f+250);
  triangle(a+165, b+250, e+165, e+250, g+165, f+250);
  stroke(0, 0, 0);
  line(30+165, 75+250, 270+165, 75+250);
};
void leftNostril() {
  fill(255, 239, 213);
  int a= 640/2;
  int b= 480/2;
  ellipse(a-30, b, 40, 50);
};

void rightNostril() {
  fill(255, 239, 213);
  int a= 640/2;
  int b= 480/2;
  ellipse(a+20, b, 40, 50);
};
void noseTip() {
  fill(255, 239, 213);
  int a= 50;
  int b= 50 ;
  int c= 75;
  int d=100;
  int e=100;
  int f= 100;
  int g= 125;
  int h= 50;

  quad(a+230, b+150, c+230, d+150, e+230, f+150, g+230, h+150);
};

void bangs() {

  fill(78, 53, 36);
  int x1= 100;
  int y1= 200;
  int x2= 200;
  int y2= 200;
  int height= 210;
  int width= 210;
  arc(320, 110, height, width, 6*PI/6, 12*PI/6);
};

void hair() {

  fill(78, 53, 36);
  int x1= 640;
  int y1= 480;
  ellipse(x1/2, y1/2, 400, 500);
  //noStroke();
  rect(x1/2-200, y1/2, 400, 500);
};

 

 

After my first not-so-successful-exposure to Processing this summer, I was terrified to play around with it ever again. All these numbers and pixel-counting seemed nothing but confusing. However, three months later, here I am: sitting in front of my laptop and trying to battle Processing by drawing a whole self-portrait, now in Java!

With all of my courage and creativity, I decided to first draw (more like draft?) what I was about to code:

 

The main challenge was to figure out which features to use, which functions to include, and…count the pixels to place everything where it should be. For my hair and face, I decided to go with circles, triangles, and rectangles in the draw() function. From the previous class, I got a little curious about the pressedKey() color-changing feature and have decided to try it in my portrait. As a result, I got a portrait of myself that changes the color of the shirt whenever the ‘c’ button is pressed.

Here is how it looks like:

 

 

And, of course, the code:

// This is Amina's Portrait!

float shirt_color_r = 170;
float shirt_color_g = 125;
float shirt_color_b = 206;

// Let's set this up...
void setup() {
  size(440, 500);
}

// Let's draw!
void draw() {
  
  // How about a sunset sky?
  fill(140, 83, 131);
  noStroke();
  rect(0, 0, 440, 280);
  
  // Earthy background...
  fill(204, 188, 188);
  rect(0, 280, 440, 560);
  
  // Hair...
  fill(135, 107, 85);
  circle(220, 170, 200);
  rect(120, 170, 200, 200);
  
  // Here is the face and the neck!
  fill(247, 212, 184);
  ellipse(220, 200, 150, 180);
  rect(190, 270, 60, 45);
  
  // Eyes:
  fill(255, 255, 255);
  triangle(190, 170, 180, 180, 200, 180);
  triangle(260, 170, 250, 180, 270, 180);
  fill(135, 107, 85);
  rect(180, 160, 20, 3);
  rect(250, 160, 20, 3);
  circle(190, 180, 10);
  circle(260, 180, 10);
 
  // Nose:
  fill(215, 173, 157);
  triangle(220, 200, 210, 230, 230, 230);
  
  // Lips:
  fill(215, 173, 157);
  stroke(245, 157, 151);
  triangle(220, 265, 190, 250, 250, 250);
  //triangle();
  
  // Fancy t-shirt!
  noStroke();
  fill(shirt_color_r, shirt_color_g, shirt_color_b);
  rect(190, 315, 60, 100);
  triangle(250, 315, 250, 415, 350, 415);
  triangle(190, 315, 190, 415, 100, 415);
  rect(100, 415, 250, 100);
}

void keyPressed() {
  if (key == 'c') {
    shirt_color_r = random(255);
    shirt_color_g = random(255);
    shirt_color_b = random(255);
  }
}

It was a fun experience mastering the RGB-color system, the shapes syntax for Processing, and counting pixels for the frame. As there is still a lot for me to learn, coming into the future and having more time to work on the assignment, I would have made several improvements to the portrait by:

• • • eliminating hardcoding numbers for the pixels/dimensions;
    • implementing different movement features with mouseX and mouseY functions, such as closing the eyes or smiling;
    • using more advanced programming concepts and syntax, not just filling my code with shapes like rect(), triangle(), and circle();
    • doing more research about Processing features and focusing on quality than quantity – thanks to my classmates who posted here now I know about arc(), strokeWeight(), vertex().

I am glad that I finally am becoming more comfortable using Processing and cannot wait to improve building on the present experience. Next time, I will try to be more careful with pre-assignment research and will pay close attention to the quality of my code.

One step at a time…

 

There she is, Processing Sarah and her two moods!

I’m not sure what the second mood is, but maybe a video will make it clearer.

https://youtu.be/QN89B1quGJk

I started working by looking for inspiration, I looked through the old blog posts here, openprocessing.org  (which is a great source to look at the works of people from all over the world and different age and skill levels), and youtube.

 

This research helped me find new tools I could use for the more complex shapes such as the beginShape(), endShape() function. Additionally, thanks to Jana from last(?) year, I found a cursor tracker code that helped a lot in finding the coordinates of certain points on the screen. You can find that code at the end of my work.

Next, I sketched a really rough draft to brainstorm and figure out the geometric shapes and functions needed to create my portrait. I then realized that some elements of the portrait will use the arc function, so I spent some time playing around with it and inserting different values and angles.

I got to coding the static elements of my portrait. I tried my best to make it resemble me somehow and I found that giving it a half-bun would be perfect to mark that resemblance.

Finally, I wanted to add a factor of animation and thought that going for a moving background could be cool. I settled for making something that makes my character look like she’s in a state of hypnosis…? I drew multiple circles in the code and created an “expand” variable that was added with every iteration of the draw function until the circle width and height reached a specific value which corresponds to the screen size (or the previous circle). Then, it restarts from the default width and height. When you hover over the eyes, you get a similar effect which was done using the same logic.

 

here’s the code!

// color palette:

color bgColor = color(198,197,185);
color skinColor = color(239,211,187);
color noseColor = color(220,190,200);
color blushColor = color(193,112,122,30);
color lipColor = color(193,112,112);
color frecklesColor = color(184,150,133);
color hairColor = color(80,71,70); 
color firstBlue = color(84,106,123);
color secondBlue = color(98,146,158);
color thirdBlue = color(224,234,236);
color irisColor = color(52,42,25);

//declaring variables
int x;
int y;
int ellipse1WH;
int ellipse2WH;
int ellipse3WH;
int ellipse4WH;
int ellipse5WH;
int iris1WH;
int expand = 3;
int irisExpand = 1;



void setup(){
 size(500,500);
 x = width/ 2;
 y = height / 2;
 ellipse1WH = 100;
 ellipse2WH = 80;
 ellipse3WH = 60;
 ellipse4WH = 40;
 ellipse5WH = 20;
 iris1WH = 6;
 
}
 
 void draw(){
   //moving bg
  background(bgColor);
  stroke(firstBlue);
  strokeWeight(60);
  noFill();
  //drawing the circles
  ellipse(x,y,ellipse1WH,ellipse1WH);
  stroke(secondBlue);
  ellipse(x,y,ellipse2WH,ellipse2WH);
  stroke(145,179,187);
  ellipse(x,y,ellipse3WH, ellipse3WH);
  stroke(192,212,216);
  ellipse(x,y,ellipse4WH,ellipse4WH);
  stroke(thirdBlue);
  strokeWeight(40);
  ellipse(x,y,ellipse5WH,ellipse5WH);

  //circles expanding
  ellipse1WH = ellipse1WH + expand;
  ellipse2WH = ellipse2WH + expand;
  ellipse3WH = ellipse3WH + expand;
  ellipse4WH = ellipse4WH + expand;
  ellipse5WH = ellipse5WH + expand;
  //upper limit
   if (ellipse1WH > 500 ){
    ellipse1WH = 100;
      
 }
 
 if (ellipse2WH > 480 ){
    ellipse2WH = 80;
      
 }
 if (ellipse3WH > 460 ){
    ellipse3WH = 60;
      
 }
 if (ellipse4WH > 440 ){
    ellipse4WH = 40;    
 }
 if (ellipse5WH > 420 ){
    ellipse5WH = 20;    
 }
 
 //hair1, behind the face
 noStroke();
 fill(hairColor);
 //right side
 beginShape();
 vertex(286,82);
 vertex(395,166);
 vertex(395,450);
 vertex(360,450);
 vertex(269,96);
 endShape();
 
 rect(108,356,287,100,10);
 
 beginShape();
 vertex(217,82);
 vertex(108,166);
 vertex(108,450);
 vertex(143,450);
 vertex(269,96);
 endShape();
 
 
  //face
  fill(skinColor);
  noStroke();
  ellipse(x,y,250, 300);
  
  //neck
  
  rect(208,380,90,100,7);
  
  //torso
  triangle(0,500,271,424,271,500);
  triangle(500,500,271,424,271,500);
  
  //eyebrows
  strokeWeight(5);
  stroke(0);
  line(180,190,215,185);
  line(282,185,317,190);
  
  //eyes
  
  arc(197,213,35,13,0, PI); //left
  arc(295,211,35,13,0,PI); // right
  
 
 
  
  //eyelashes
  strokeWeight(1);
  
  //left eye
  line(179,215,174,219);
  line(186,219,183,224);
  line(195,218,195,225);
  line(203,218,207,225);
  line(213,216,219,220);
  
  //right eye
  line(279,215,274,219);
  line(286,219,283,222);
  line(295,218,295,223);
  line(303,218,307,223);
  line(310,212,318,219);
  
 //eye animation
 if (mouseX >= 176 && mouseX <= 215 && mouseY >= 208 && mouseY <= 222  || mouseX >= 276 && mouseX <= 313 && mouseY >= 208 && mouseY <= 222 ){
   
   //covers closed eyes
   stroke(skinColor);
   fill(skinColor);
   ellipse(195,213,55,30);
   ellipse(295,211,55,30);
    
   //open eyes
   fill(255);
   ellipse(195,217,50,50);
   ellipse(295,215,50,50);
   stroke(irisColor);
   strokeWeight(15);
   ellipse(195,217,iris1WH,iris1WH);
   ellipse(295,215,iris1WH,iris1WH);
   noStroke();
   fill(0);
   ellipse(195,217,15, 15);
   ellipse(295,215,15,15);
    
   //eye expanding
   iris1WH = iris1WH + irisExpand;
   if (iris1WH > 45) {
     iris1WH = 6;
   }
   
   
 }
  ////nose
  noFill();
  stroke(0);
  strokeWeight(2.5);
  beginShape();
  vertex(255,256);
  vertex(255,276);
  vertex(240,283);
  endShape();
  
  //cheeks/blush
  //left
  noStroke();
  fill(blushColor);
  ellipse(178,270,40,40);
  
  //right
  ellipse(323,270,40,40);
  
  //freckles
  fill(frecklesColor);
  
  //left
  ellipse(178,260,3,3);
  ellipse(169,273,3,3);
  ellipse(187,273,3,3);
  
  
  //right
  ellipse(323,260,3,3);
  ellipse(314,273,3,3);
  ellipse(332,273,3,3);
  
  //mouth
  stroke(lipColor);
  strokeWeight(5);
  noFill();
  arc(250,330,80,30,0,PI);
  
  
  
  //hair2, bangs
  
  noStroke();
  fill(hairColor);
  //left
  beginShape();
  vertex(253,101);
  vertex(243,169);
  vertex(129,224);
  vertex(132,202);
  vertex(228,100);
  endShape();
  
  beginShape();
  vertex(224,102);
  vertex(161,127);
  vertex(116,200);
  vertex(113,221);
  vertex(230,113);
  endShape();
  
  //right
  beginShape();
  vertex(253,101);
  vertex(267,169);
  vertex(368,223);
  vertex(371,202);
  vertex(280,100);
  endShape();
  
  beginShape();
  vertex(284,104);
  vertex(352,137);
  vertex(387,183);
  vertex(387,222);
  vertex(364,222);
  vertex(277,128);
  vertex(286,94);
  endShape(CLOSE);
  
  //bun
  ellipse(253,68,75,75);
    
  
  //cursor tracker from Jana
  print(mouseX);
  print(" ");
  println(mouseY);
 }

 

 

 

This is my self-portrait.
My first thought was about which shapes to use to create the hair. My initial plan was to use lines, but then I was worried that filling out the final hair shape would become an issue. So, after some research, I found the beginShape() and endShape() method using vertices.
I proceeded to sketch out a rough desired shape on a piece of paper (as shown below),

then went on to coding and figuring out where each vertex should be.
This included a lot of hardcoding and needed a lot of messing around with the positions, but it was, in my opinion, easier to hardcode in this case specifically, since there were a lot of points/vertices to consider.
The shape I started with was the hair. The head shape (ellipse) and neck(rectangle) followed, and then I added another shape to cover the top of the head with more hair.
I kept the background, the eyes, mouth, and nose simple, by using basic shapes and colors. And I finally decided to add some “animation”, by making each eye close or the mouth smile if the mouse pointer hovers over them.

void setup(){
  size (400,400);
}

void draw(){
  //background color
  background(0,153,153);
  
  //drawing the hair first to be on the bottom layer
  fill(53,36,23);
  stroke(0);
  strokeWeight(1.5);
  beginShape();
  vertex(222,76);
  vertex(192,50);
  vertex(130,48);
  vertex(40,126);
  vertex(68,122);
  vertex(58,174);
  vertex(82,208);
  vertex(57,250);
  vertex(57,350);
  vertex(310,350);
  vertex(310,204);
  vertex(329,225);
  vertex(314,114);
  vertex(270,74);
  vertex(222,76);
  endShape();
  
  //drawing the face shape and the neck
  fill(208, 167, 136);
  stroke(0);
  strokeWeight(1.5);
  rect(175,170,45,160);
  ellipse(190,180,160,200);
  
  //drawing the hair piece to cover the top of the head
  fill(53,36,23);
  noStroke();
  beginShape();
  vertex(110,79);
  vertex(110,170);
  vertex(205,115);
  vertex(280,170);
  vertex(277,79);
  endShape();
  
  //drawing the nose:
  stroke(0);
  strokeWeight(3);
  noFill();
  line(180, 210,178,220);
  line(178,220,188,220);
  
  //drawing the mouth without a smile:
  strokeWeight(5);
  stroke(205, 115, 115);
  line(180, 245, 200, 245);
  //making the mouth smile:
  if (mouseX > 180-5 && mouseX < 200+5){
    if (mouseY > 245-5 && mouseY < 245 +5){
      //this covers the previous mouth with the skin color
      strokeWeight(5);
      stroke(208, 167, 136);
      line(180, 245, 200, 245);
      //this draws on the new smile
      strokeWeight(5);
      stroke(205, 115, 115);
      bezier(170,240,180,250,215,240,215,240);
    }
  }
  
  //drawing the eyes open:
  noStroke();
  fill(255);
  ellipse(160, 180, 35, 35);
  ellipse(220, 180, 35, 35);
  fill(155, 115, 84);
  ellipse(160, 180, 23, 23);
  ellipse(220, 180, 23, 23);
  noStroke();
  fill(0);
  ellipse(160, 180, 10, 10);
  ellipse(220, 180, 10, 10);
 
  //closing the left eye:
    if(mouseX > 160-(35/2) && mouseX < 160+(35/2))
  {
    if(mouseY > 180-(35/2) && mouseY < 180+(35/2))
    {
      //this covers the previous open eye
      fill(208, 167, 136);
      ellipse(160, 180, 38, 38);
      //this draws on the closed eye
      strokeWeight(5);
      stroke(0);
      line(150, 180, 170, 180);
    }
  }
  //closing the right eye:
  if(mouseX > 220-(35/2) && mouseX < 220+(35/2))
  {
    if(mouseY > 180-(35/2) && mouseY < 180+(35/2))
    {
      //this covers the previous open eye
      fill(208, 167, 136);
      ellipse(220, 180, 38, 38);
      //this draws on the closed eye
      strokeWeight(5);
      stroke(0);
      line(210, 180, 230, 180);
    }
  }
}

 

 

For the first assignment for Intro To IM for Fall 2020, we were required to create a self portrait using processing. At the beginning the process seemed a bit daunting as I only had experience create visuals for the web or for print using design tools like Adobe Photoshop and Illustrator. I completed this project by breaking up the feature of the portrait into in different parts and then break up those features [if required] into more parts.

Feature of the face [or the further broken down feature] was a function. I opted to make my the self portrait this way because it made it easy to layer features since I would only have move one line of code to this since a feature is encapsulated as a single function.

The main components of the self portraits were  the face neck and hair. Each of these features were different functions and were called from the “draw” function.

The face was further broken down into components. These were forehead, chin, eyes, eyesbrows, nose and lips.

 

void setup() {
  size(640, 480);
  background(111, 143, 114);
}

int scale = 2;
int faceWidth = 80;

float centerX = 320;
float centerY = 240;

void draw() {
  neck();
  face();
  hair();
}

void face() {
  fill(210, 153, 108); //skin color
  middleOfFace();
  foreHead();
  chin();
  eye();
  eyeBrows();
  nose();
  lips();
}

void foreHead() {
  arc(centerX, centerY-100, faceWidth*scale, 50*scale, PI, 2*PI, OPEN);
}

void middleOfFace() {
  rect(centerX-faceWidth*scale/2, centerY-102, faceWidth*scale, 84);
}

void chin() {
  arc(centerX, centerY-20, faceWidth*scale, 85*scale, 0, PI);
}
void hair() {
  pushStyle();
  fill(0, 0, 0);
  arc(centerX, centerY-105, 160, 105, PI, 2*PI);
  triangle(centerX-faceWidth, centerY-105, centerX-faceWidth+20, centerY-105, centerX-faceWidth, centerY-40);
  triangle(centerX+faceWidth, centerY-105, centerX+faceWidth-20, centerY-105, centerX+faceWidth, centerY-40);
  
    popStyle();
}

void eye() {
  //left sclera
  fill(255, 255, 255);
  arc(centerX-30, centerY-80, 30, 13, PI, PI*2);
  arc(centerX-30, centerY-80, 30, 13, 0, PI);
  //right sclera
  fill(255, 255, 255);
  arc(centerX+30, centerY-80, 30, 13, PI, PI*2);
  arc(centerX+30, centerY-80, 30, 13, 0, PI);

  //iris
  pushStyle();
  fill(0, 0, 0);
  circle(centerX-30, centerY-80, 8);
  circle(centerX+30, centerY-80, 8          );
  popStyle();
}

void eyeBrows() {
  pushStyle();
  noFill();
  stroke(0, 0, 0);
  strokeWeight(2);
  arc(centerX-30, centerY-87, 38, 8, PI, PI*2); //left eyebrow
  arc(centerX+30, centerY-87, 38, 8, PI, PI*2); //right eyebrow
  popStyle();
}

void neck() {
  pushStyle();
  fill(210, 153, 108); //skin color
  noStroke();
  int neckWidth = 55;
  rect(centerX-neckWidth/2, centerY+50, neckWidth, 70);
  popStyle();
}


void nose() {
  int noseWidth=30;
  int yShift = -10;
  fill(217, 168, 130);
  quad(centerX, centerY-45+yShift, centerX-noseWidth/2, centerY+yShift, centerX, centerY+5+yShift, centerX+noseWidth/2, centerY+yShift);
}

void lips() {
  pushStyle();
  fill(210, 153, 133);
  int lipsWidth = 50;
  int lipsHeight = 16;
  ellipse(centerX, centerY+25, lipsWidth, lipsHeight);
  arc(centerX, centerY+23, lipsWidth, 6, 0, PI);
  popStyle();
}