Category: Fall 2022 – Shiloh

I started by experimenting with the shapes and trying out what I could do with them. I went along with what I thought looked good and came up with this:

I then looked at the previous self-portraits done by students in this course and in the p5js website. I made a list of things I found cool and wanted to incorporate or explore. This is my list:

• try automating something
• add a thing that interacts with mouse movements
• try an interesting style
• pick visually pleasing colors
• Rounded edges

I first tried to see if I can generate hair within a certain range automatically. I used a for loop that creates arcs and used the random function to generate numbers within a certain X and Y range, I also used the random number to pick an index from a list of colors so that the hair is in different colors. I tried a few strips of hair to see what changing different things would do.

In class when we were playing with moving ellipses I used that for loop and while experimenting with generating many circles at random places this happened and thought it looked similar to worn-out old pictures where the corners have changed color/faded like this:


I didn’t like the way the hair looked so I didn’t end up using that, and started sketching characters in different styles and noted things I liked about each one. I picked a color palette that felt vintage and faded.

I implemented the sketch in p5js and experimented with hair/no hair and decided without hair (I might try to implement a similar one with hair, but I didn’t like it here).

I wanted to add some animation/mouse interaction so I thought I might let it close its eyes if the mouse passes over them, but after adding the background (the for loop generated ellipses) the mode felt eerie so I decided to let it open its eyes when the mouse passes over its eyes, the background darkens, and the mouth opens.

reflection:
I really enjoyed working on this project and exploring p5js.
I think it would be interesting to explore allowing the user to alter the character (add hair? change eye size? color?)
it would also be interesting to experiment with other styles.

Concept

After getting introduced to p5.js I was excited to dive more into this program and try out new things. I decided to come up with a self-portrait that also depicts an important hobby in my life. I like playing football. It is a sport that relieves my stress and makes me excited. Therefore, I felt the need to include a soccer ball in my self-portrait which you can see below.

 

When I first started with the drawing I was so confused about how am I going to draw the main features of the face. I do not have a background in art and art was never a passion for me. However, I found this task an opportunity to explore art even more and find out how can I represent complicated things using simple objects. Therefore, I started playing with the different shapes in p5.js and was able to combine them in a way to create a face and an upper body. I had to explore new features in the reference page like the quad function to be able to draw my hair, eyes, and arms.

 

I liked how the eyes of my portrait look. I could have done the eyes in a much simpler way by creating an ellipse. However,I decided to try out new shapes and see what I could get. Therefore, as seen in this code above I used two triangles and a quad to represent each eye. Furthermore, I only added a black stroke to the upper half of the eyes to represent the eyelid. To create the Iris for each eye, I used the ellipse feature with 3 parameters and this way I was able to create circles.

Ideas for Improvements

After completing my self-portrait, I was so happy with how it looked but I still that it needs some improvement to look better. I believe that I could have done the ball to look more realistic. This would be by creating more pentagons inside the ball and connecting them in a better way. Furthermore, in the future, I would like to make my full body portrait and show all my body features. In addition to this, I would like to make the drawing dynamic and make it move  by putting the ball on portrait’s foot and start juggling with the ball.

 

 

Concept

For my self portrait assignment, I decided to go with a simple cartoon-y style. I was kind of inspired by anime style art, so I sketched out how I wanted my final result to look like on a piece of paper:

It didn’t really turn out like that sketch, but the overall idea was still followed through. I mainly used ellipses and arcs. Originally, I was going to go for just my head, but I decided to add a neck and shoulders to add a more to the self portrait element. There was a lot of guessing and adjusting with this assignment, such as the eyes and the hair. Additionally, I wanted to add some sort of interactivity, so I made the blush appear if the mouse X-position was within the face. I feel like with this, it makes it a bit more fun as opposed to just having the blush there statically.

Highlights

The part I struggled the most with was my bangs, but it turned out to be what I’m most proud of in the assignment because it took perseverance and a lot of trial and error to get it to look like the way I wanted it to.  At first, I tried to use bezierVertex(), which was in the shapes section of the reference. However, it was really hard to understand where to put the points to make the shape I wanted. It also took a lot of guessing and still didn’t turn out the way I wanted.

The second method I tried was doing two ellipses for the bangs and a rectangle for my hair. I had to add another ellipse for the top of my head or else it would look like I was bald. The rectangle for my hair was perfectly fine, but I still wasn’t completely satisfied with the look and shape of my bangs.

So the final shape I tried was the arc for my bangs. I used arc for my eyebrows as well, so I feel like I should’ve done this method first but I wanted to experiment with bezierVertex(). The arcs were a bit tedious because it was a lot of guessing where each side of the bangs would be positioned. I also had to adjust the arc shape, width, and height multiple times before I got the final product.

Reflection and Future Directions

A future improvement or idea I want to incorporate is a blinking animation when the mouse is pressed. I would also like to add different facial features, such as anger or sadness. Right now, the background is also quite plain so it would be nice to add something else to it, for instance a landscape or abstract art. Overall, since I’ve done p5 in the past, this was a nice refresher and a fun assignment.

Two lectures. One assignment.

During the first lecture, we learned how p5.js work and the ways to create (seemingly) simple shapes. Second lecture, we dipped tip of our toes on making simple animations. And now we have an assignment: making a self-portrait. Although I do not have an artistic background, I did not want to create an ugly object and call it a portrait of myself. So, I discarded the difficult details. Instead of filling the entire canvas with my face, I decided to make it small. Still, I was pretty sure that I am not good at creating faces, so I turned the head sideway.

Initial Design

Better. But now, it became hard to say that it is my portrait. It looks as it a random person sitting. So, I started to lay out what characteristics I can give to this random person so that it somehow resembles myself. So, I took a picture of myself doing this assignment. Then I extracted some visible characteristics: pose, skin tone, color of clothes, and so on. After some time of planning, I started to think about how I should build this image of myself. So, I went to the p5.js reference page and skimmed through it. For pose, I could use rotate(). For color of clothes, fill(). Using circles and rounded rectangles seemed a good way to create less stiff image. At one point, I thought to myself that it is enough of planning, so I started to work on p5.js.

Difficulties

I knew I would have to go though a ton of trials and errors just to create something that may resemble what I planned. But there was one thing that kept annoyed me: rotate(). I now know better about it, but at the time, I could do nothing but to see my arms fly out of my body and disappear from my sight. After a lot of trials and errors, I could somehow bring back my arms and put it on my body. The outcome somewhat resembled myself, but I was not satisfied. I learned and know how to create animate objects in p5.js, and I wanted to somehow use it. So, I tried to change my arm’s angle of rotation to make it look as if I am typing something. And I saw my arms fly again. It is time for trials and errors.

// this is a pseudo code
rotate(radians(30));
rect(100, 100, 4, 95, 2);

Luckily, soon enough, I realized that there was a way to have a control over the axis of rotation: use translate() and then create objects at relative coordinate of 0, 0. This way, I get to move my arms while my arms still attached to my body.

let rArmAngle = 168;
let v1 = -0.2;

function animateRightArm() {
  fill(250,240,230);
  translate(width/2,height/2);
  translate(95,47);
  rArmAngle += v1;
  if (rArmAngle >= 168 || rArmAngle <= 161) {v1=-v1;}
  rotate(radians(rArmAngle));
  rect(0, 0, 100, 28, 20);
  resetMatrix();
}

And here is my final result: me making my self-portrait.

Maybe I should have figured out how to use rotation() properly before using it right away and manually fix problems. But for next time, now that I figured out how to fix an axis of rotation, I will work on figuring out how to move multiple axis of rotation to create joints, before I start typing codes.