Week 1 self potrait

My concept

I wanted to build a portrait that resonated with me. Features like the eye lash and my face shape were something I wanted to particularly be mindful of. I wasn’t going for a moving or dynamic sketch but rather wanted to focus on the basic sketch and understanding javascript. Other then that, I just wanted to build off what we learnt in class. I also included that I was very tired this week from moving in and settling, so I drew a change of state to sleeping haha.

The main functionality would be the changing day and night.

Code

// I have kept a isNight variable which tracks if it is day or night
// since it is starting as false it means it is day time
let isNight = false; 

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

function draw() {
  // background changes based on state
  // so if isNight is true which is if it is night time the sky is dark blue
  if (isNight) {
    // dark navy sky
    background(10, 5, 80); 
  } else {
    // else it was day time
    background(100, 180, 230);
  }

  // sun or moon same depends on state
  noStroke();
  if (isNight) {
    // pale gray-white moon
    fill(240); 
    circle(50, 50, 50);
  } else {
    fill("yellow");
    circle(50, 50, 50);
  }

  //hair like the back of it
  fill("black")
  circle(200,220,300);
  // left ear
  fill(230, 190, 150);
  ellipse(95, 220, 18, 22);
  //right ear
  fill(230, 190, 150);
  ellipse(305, 220, 18, 22);
  
  // face
  fill(250, 200, 160); 
  noStroke();
  ellipse(200, 200, 210, 220); 
  // hair at the front of head
  fill("black");
  noStroke();
  ellipse(200, 120, 200, 70);

  // eyes
  if (isNight) {
    // closed eyes at night
    stroke(0);
    strokeWeight(3);
    noFill();
    arc(165, 190, 45, 35, PI, TWO_PI);
    arc(235, 190, 45, 35, PI, TWO_PI);
    noStroke();

    
  } else {
    // open eyes during the day
    fill(255);
    noStroke();
    ellipse(170, 180, 45, 35);
    ellipse(230, 180, 45, 35);
    fill(60);
    ellipse(170, 180, 20, 20);
    ellipse(230, 180, 20, 20);
  }

  // nose
  fill(230, 190, 150);
  ellipse(200, 220, 18, 22);

  // eyelashes
  
    stroke(0);
    strokeWeight(2);
    line(145, 170, 135, 165);
    line(152, 166, 148, 154);
    line(162, 161, 162, 150);
    line(255, 170, 262, 160);
    line(248, 166, 252, 154);
    line(240, 153, 235, 163);
    noStroke();
  

  //emoji for the lips
  textSize(65);
  text("👄", 168, 290);
}

function mousePressed() {
  // flips true to false or false to true, any click any where flips this
  isNight = !isNight; 
}

I struggled a bit with the eyelash placement. I wanted them to be at an angle, and I achieved exactly what I wanted. Especially placing them over the eyes was challenging and finding that placement. This was a trial and error process for sure and took me considerable time, but I am happy it looks like the way I want.

Embedded Sketch

 

How this was made

I started with the face and nose since they would be the same in both day and night. I couldn’t make the mouth like I wanted, so I looked at the “Getting Started with p5” where I saw the text function. I used the lip emoji in that function and then added the eyelashes and hair. I wanted these 2 to be static too with the day/night change. I added the sun in the back. I just used one main function ‘draw’ and had everything inside. I used the “isNight” variable for day and night. I changed the shape of the eye depending on the state. One interesting thing I learned was that each line of code draws on top of the last, so shapes drawn later cover the ones drawn earlier. It’s not about compiling, it’s just the order things get painted onto the canvas.

Reflection and improvements

I would make a dynamic sketch in the future and make it more personal as for now I just wanted this to be a reflection of myself (like quite literally) out of the shapes and techniques we learnt. I think I would add my neck and body too. Probably changes in state that reflect more things about me too.