Assignment 1 – Self Portrait – Bubbling Portrait

I just tried to paly around with p5.js after the class. My first lesson about this was “Auto-refresh” does not mean “Auto-save”. I learnt this the hard way. After turning the Auto-refresh on, I proceed to finish my code without the thought the save it. However, after an incident with losing the internet connections, my work was lost after the page was refreshed and I had to rewrite the code from scratch. Learning from mistakes, I saved my code after every changes and turned of “Auto-refresh”.

I sketch the portrait mostly by ellipse and arc. I started from the head which then includes eyes, nose, mouth, and hair. The eyes include a few different ellipses for the eyeballs. Nose and mouth are much simpler, just a single arc for each is sufficient.

However, the most difficult part for me was the hair. To make the front part, I used the arc to produce a half circle. Furthermore, I want to have highlights on the hair. I used the arc function with changes in stroke colors to mimic the hair strands. The most difficult thing in this step is to know the exact starting point and ending point of the arc. Below is the codes for it:

noFill();
stroke("white");
arc(width / 2 + 20, height / 2 - 15, 150, 120, PI, PI + HALF_PI - QUARTER_PI);
arc(width / 2 + 20, height / 2 - 15, 100, 120, PI, PI + HALF_PI - QUARTER_PI);
arc(
  width / 2 - 10,
  height / 2 - 15,
  150,
  120,
  PI + HALF_PI + QUARTER_PI,
  TWO_PI
);
arc(
  width / 2 - 20,
  height / 2 - 15,
  100,
  120,
  PI + HALF_PI + QUARTER_PI,
  TWO_PI
);

I then added a pony tail using the Bezier curve. The final steps were adding ears and body using simple ellipse codes.

Finally, I attempt to do animation in p5.js. Using circles, I assign random position for each circle after every reloading. Each circle will start with a random size. They will increase and decrease in size as time pass. This was done using the sin() function:

circle(10, 10, sin(x)*100);
x = x + 0.01;

for (let i = 0; i < 15; i++){
  circle(posLst[i][0], posLst[i][1], sin(sizeLst[i])*100);
  sizeLst[i] = sizeLst[i] + 0.01;
}

My sketch:

Reflection:

After trying this assignment, I realize that a lot of things can be replaced with variables. Then, the positions of the eyes, nose, etc. will be relative from that variable positioning. This would make any fix much easier in terms of position. I realized this halfway of my code when I want to move things a bit downwards. The more I have on the sketch, the long it takes for me to fix all of the position coordinates.

What I want to do next is to add interactivity into the sketch. My sketch currently only has some simple animation on the background. I also want to have animation on the portrait character as well as some interaction with the portrait.