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.