Author: Ishika Menrai

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.

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.