Week 1 – Self Portrait – Introduction to Interactive Media

Hello!! For my first assignment in Intro to IM, I made a self portrait using p5.js. I just combined basic shapes and a few lines for smaller details like the nose and glasses.

Embedded Sketch!!

How I made it!!

I started by making the body using a simple rectangle shape and then added an ellipse on top for the face. For the eyes, I created a wider white ellipse with a smaller black ellipse on top to create the pupil. For the hair, I used the arc() function set to only draw the top half of a circle so it sits like a dome over the head. I also added a moon in the night sky background and glasses over the eyes since I always wear glasses.

The main source I used to help me code was the p5js reference site to remind myself of the parameters of each shape especially for the arc.

Code Highlights

//glasses
    stroke(0);
    strokeWeight(4);
    noFill();
    ellipse(width/2.5, height/1.9, 45, 30);
    ellipse(width/1.66, height/1.9, 45, 30);
    line(width/2.5+22, height/1.9, width/1.66-22, height/1.9);
    line(width/2.5-22, height/1.9, width/2.5-40, height/1.9-5);
    line(width/1.66+22, height/1.9, width/1.66+40, height/1.9-5);

The glasses gave me the most trouble. I had to line up two more ellipses exactly on top of the eyes without covering the pupils so I used noFill() so I would get only an outline instead of a solid shape. Then I needed a bridge line connecting the two lenses and two more lines angled slightly outward on each side to look like the arms of the glasses. Getting all of them to actually connect at the same points took a lot of trial and error.

//moon
    fill(255, 255, 220);
    noStroke();
    ellipse(340, 50, 50, 50);
    fill('#464444');
    ellipse(352, 42, 45, 45);

I found that I could fake a crescent shape by drawing a full ellipse and then covering part of it with a second ellipse painted the exact same color as the background

Reflection and Ideas:

This assignment was fun and I found myself losing track of time while doing it, for future assignments I would love to go more in depth with p5.js and add animations and more detailed drawings.. I could have added more details in the background and maybe even designed the body to make it look more detailed.

Leave a Reply Cancel reply