Week 1 – Self Portrait

My Concept
My concept was to create a simple self-portrait using the shapes and colors we learned in class. My self-portrait includes a face, hair, eyes, a nose, a mouth, ears, and a blue shirt. I also added a red cap as the interactive part of the portrait. The cap follows the mouse as the user moves it around the canvas.

I kept the design simple because I am still learning how coordinates, shapes, and colors work in p5.js.

A Code Highlight
The part of my code that I am particularly proud of is the moving cap:

// Cap
fill(170, 25, 25);
ellipse(mouseX + 65, mouseY + 25, 100, 25);

// Cap moves with the mouse
noStroke();
fill(200, 40, 40);
ellipse(mouseX, mouseY, 180, 80);

I am proud of this section because it makes my portrait interactive. Instead of giving the cap a fixed position, I used “mouseX” and “mouseY”. This causes the cap to follow the horizontal and vertical position of the mouse. I added numbers to the brim’s position so it stays connected to the main part of the cap.

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(180, 220, 255);

  // Shirt/Top
  noStroke();
  fill(60, 120, 200);
  square(150, 380, 200);

  // Ears
  fill(195, 140, 100);
  ellipse(145, 270, 40, 70);
  ellipse(355, 270, 40, 70);

  // Head
  fill(195, 140, 100);
  ellipse(250, 270, 200, 240);

  // Hair
// Hair
fill(50, 30, 20);
arc(250, 220, 190, 160, PI, TWO_PI);

  // Eyes
  fill(255);
  ellipse(210, 260, 42, 28);
  ellipse(290, 260, 42, 28);

  // Pupils
  fill(40);
  circle(210, 260, 14);
  circle(290, 260, 14);

  // Nose
  stroke(110, 70, 50);
  strokeWeight(3);
  line(250, 275, 240, 310);
  line(240, 310, 255, 310);

  // Mouth
  stroke(100, 30, 30);
  strokeWeight(4);
  line(225, 330, 250, 340);
  line(250, 340, 275, 330);

  // Cap 
  noStroke();
  fill(200, 40, 40);
  ellipse(mouseX, mouseY, 180, 80);

  // Cap that moves with mouse movement
  fill(170, 25, 25);
  ellipse(mouseX + 65, mouseY + 25, 100, 25);

  //  The mouse coordinates in the console
  print(mouseX + "," + mouseY);
}

 

Embedded Sketch
<>

How This Was Made:
I made this project in the p5.js Web Editor. I built the portrait by combining simple shapes, including square(), circle(), ellipse(), line(), and arc(). I used fill() to give the shapes different colors. I also used stroke(), noStroke(), and strokeWeight() to control the outlines.

The code inside setup() creates the canvas once. The code inside draw() runs repeatedly, which allows the cap to update its position whenever the mouse moves. Additionally, the order of the code is important because shapes drawn later appear in front of earlier shapes.

I used the official p5.js reference pages provided in class to check how the drawing commands work. Additionally I used the course week 1 power points as it gives a clear and broad explaination of all functions and codes I had to use to complete the portrait. Chiefly, every part of the portrait was drawn directly with p5.js shapes and colors.

Reflection and Future Improvements
This project helped me understand how basic shapes can be combined to create a recognizable person. I also learned that coordinates control where each shape appears and that the order of the code affects which shapes appear in front. The most difficult part was placing the facial features and hair correctly. I had to adjust their coordinates and sizes until they fit the head. Making the cap follow the mouse also helped me understand how mouseX and mouseY can make a sketch interactive. In the future, I could improve the portrait by adding more details to the hair, clothing, and background. I could also make the eyes follow the mouse or add more movement after learning additional p5.js commands.