Self-Portrait: Me?

Portrait

Concept

I wanted to create a simple cartoon that is somewhat similar to me but still includes some caricature aspects to it. I tried to use the shapes we learnt in class to create this [not so] realistic caricature of myself. Since this was my first time using p5js, I managed to use the different shapes to create my self-portrait.

Code

I am proud of the entire code since this was my first time properly coding. It took me some time to coordinate the positions of different parts of the face, especially the mouth and teeth, and the eyes and glasses.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function setup() {
createCanvas(350, 350);
background(220,220,220);
//Hair
noStroke();
fill(90, 56, 37);
arc(150, 135, 170, 170, PI, TWO_PI);
rect(65, 135, 170, 135);
//neck
noStroke();
fill(229, 181, 161);
rect(125, 220, 50, 60);
// Head
fill(232, 190, 172);
ellipse(150, 150, 145, 165);
// Eyes
fill(255);
ellipse(115, 135, 27, 15);
ellipse(185, 135, 27, 15);
fill(0);
ellipse(115, 135, 10, 15);
ellipse(185, 135, 10, 15);
//Nose
fill(229, 181, 161);
triangle(150, 145, 140, 165, 160, 165);
//Mouth
fill(225, 160 , 164);
arc(140, 185, 80, 40, 0, HALF_PI);
fill(255, 255, 255);
rect(140, 185, 40, 5);
//Ears
fill(232, 190, 172);
ellipse(70, 150, 15, 30);
ellipse(230, 150, 15, 30);
//eyebrows
noFill();
stroke(0, 0, 0);
strokeWeight(2);
line(100, 115, 120, 110);
line(180, 110, 200, 115);
//Glasses
noFill();
stroke(0, 0, 0);
strokeWeight(2);
circle(115, 135, 40);
circle(185, 135, 40);
line(136, 135, 165, 135);
line(95, 135, 80, 140);
line(205, 135, 220, 140);
//Body
noStroke();
fill(0,0,0);
rect(75, 275, 150, 150, 30);
fill(229, 181, 161);
triangle(125, 275, 175, 275, 150, 290);
}
function draw() {
print(mouseX + "," + mouseY);
}
function setup() { createCanvas(350, 350); background(220,220,220); //Hair noStroke(); fill(90, 56, 37); arc(150, 135, 170, 170, PI, TWO_PI); rect(65, 135, 170, 135); //neck noStroke(); fill(229, 181, 161); rect(125, 220, 50, 60); // Head fill(232, 190, 172); ellipse(150, 150, 145, 165); // Eyes fill(255); ellipse(115, 135, 27, 15); ellipse(185, 135, 27, 15); fill(0); ellipse(115, 135, 10, 15); ellipse(185, 135, 10, 15); //Nose fill(229, 181, 161); triangle(150, 145, 140, 165, 160, 165); //Mouth fill(225, 160 , 164); arc(140, 185, 80, 40, 0, HALF_PI); fill(255, 255, 255); rect(140, 185, 40, 5); //Ears fill(232, 190, 172); ellipse(70, 150, 15, 30); ellipse(230, 150, 15, 30); //eyebrows noFill(); stroke(0, 0, 0); strokeWeight(2); line(100, 115, 120, 110); line(180, 110, 200, 115); //Glasses noFill(); stroke(0, 0, 0); strokeWeight(2); circle(115, 135, 40); circle(185, 135, 40); line(136, 135, 165, 135); line(95, 135, 80, 140); line(205, 135, 220, 140); //Body noStroke(); fill(0,0,0); rect(75, 275, 150, 150, 30); fill(229, 181, 161); triangle(125, 275, 175, 275, 150, 290); } function draw() { print(mouseX + "," + mouseY); }
function setup() {
  createCanvas(350, 350);
  background(220,220,220);

  //Hair
  noStroke();
  fill(90, 56, 37);
  arc(150, 135, 170, 170, PI, TWO_PI);
  rect(65, 135, 170, 135);
  
  //neck
  noStroke();
  fill(229, 181, 161);
  rect(125, 220, 50, 60);
  
  // Head
  fill(232, 190, 172);
  ellipse(150, 150, 145, 165);

  // Eyes
  fill(255);
  ellipse(115, 135, 27, 15);
  ellipse(185, 135, 27, 15);
  fill(0);
  ellipse(115, 135, 10, 15);
  ellipse(185, 135, 10, 15);

  //Nose
  fill(229, 181, 161);
  triangle(150, 145, 140, 165, 160, 165);

  //Mouth
  fill(225, 160 , 164);
  arc(140, 185, 80, 40, 0, HALF_PI);
  fill(255, 255, 255);
  rect(140, 185, 40, 5);
  
  //Ears
  fill(232, 190, 172);
  ellipse(70, 150, 15, 30);
  ellipse(230, 150, 15, 30);
  
  //eyebrows
  noFill();
  stroke(0, 0, 0);
  strokeWeight(2);
  line(100, 115, 120, 110); 
  line(180, 110, 200, 115);
  
  //Glasses
  noFill();
  stroke(0, 0, 0);
  strokeWeight(2);
  circle(115, 135, 40);
  circle(185, 135, 40);
  line(136, 135, 165, 135);
  line(95, 135, 80, 140); 
  line(205, 135, 220, 140);
  
  //Body
  noStroke();
  fill(0,0,0);
  rect(75, 275, 150, 150, 30);
  fill(229, 181, 161);
  triangle(125, 275, 175, 275, 150, 290);
}

function draw() {
   print(mouseX + "," + mouseY);
}

Approach and Reflection:

I spent some time figuring out what commands/shapes I should use to make the cartoon a basic face before adding self-specific aspects. It took some trial and error for the different parts to come together as a whole. In the future, I would probably like to experiment further with my code to test moving features or other interactive aspects to make it more interesting.