Author: Yupu Chen

Concept

For my personal portrait, I attempted to neglect facial details and focus on skeleton shapes. Therefore, I choose to create a simple Wooden Manikin Model to present myself with some primitive shapes. The whole image is about the model sitting on a beach watching the ocean and the sky while enjoying a cup of hot coffee. It is (or I am) having a wonder vacation!

I decided to use a manikin model because I want my self-portrait to focus less on my face and more on a lifestyle of mine (or at least a desired lifestyle of mine). Therefore, I decided to zoom out and give more space to the environment. In this portrait, the clouds are moving and the coffee is giving out heat. But try to drink the coffee? The coffee cup will move away! This adds a bit more fun to my vacation on the beach!

Highlight of my code

I am particularly proud of the coffee cup and its tray and its interaction. I used mouseX and mouseY to see if the mouse is on the coffee cup. If it is, the cup and the tray will move a bit to the left; if not, it will move back to the start position. Here’s the code:

let tray = 10;
// draw the coffee tray
stroke(255);

if (246 < mouseX && mouseX < 266 && 400 < mouseY && mouseY < 414) {
  beginShape();
  curveVertex(220, 414);
  curveVertex(220 - tray, 414);
  curveVertex(228 - tray, 418);
  curveVertex(247 - tray, 418);
  curveVertex(257 - tray, 418);
  curveVertex(265 - tray, 414);
  curveVertex(265 - tray, 414);
  endShape();
  stroke(0);

  stroke(255);
  rect(224, 400, 20, 14);

  heat(230);
  heat(240);
  heat(250);
} else {
  beginShape();
  curveVertex(233, 414);
  curveVertex(233, 414);
  curveVertex(241, 418);
  curveVertex(260, 418);
  curveVertex(270, 418);
  curveVertex(278, 414);
  curveVertex(278, 414);
  endShape();
  stroke(0);

  stroke(255);
  rect(246, 400, 20, 14);

  heat(250);
  heat(260);
  heat(270);
}

In the meantime, I created a function called heat() to draw the heat. It simplifies my code to some extent.

function heat(xcoord) {
  noFill();
  beginShape();
  curveVertex(xcoord, 370);
  curveVertex(xcoord, 370);
  curveVertex(xcoord - 5, 380);
  curveVertex(xcoord, 390);
  curveVertex(xcoord - 5, 395);
  curveVertex(xcoord - 5, 395);
  endShape();
}

Reflections and future considerations

I could better improve my work by adding more details to the background, such as waves, mountains, shells, etc, to better create an atmosphere of a vacation by the ocean. This could potentially strengthen the visual appeal of my work.

In terms of interactivity, I tried to make the arm of the model to move and to always look at the mouse. I tried different ways and functions such as atan2() and rotate(), but none of them worked. I look forward to learning more about how to do it.

Here’s the link to the full version of my code: https://github.com/Yupu-Chen/Intro-to-IM-Fall-2023/blob/main/selfportrait.js

Resources: p5.js reference page