Assignment 1 – Self-Portrait – Introduction to Interactive Media

Concept

We had to create a self-portrait, so I tried to make an animated version of myself which turned out to be a very fun process. The code sets up the canvas using createCanvas(400, 400) and uses the draw() function to render the face. The face, eyebrows, eyes, nose, hair, ears, beard, lips, shirt, and neck are created using various shapes such as ellipses, triangles, arcs, rectangles, and lines. The fill color and stroke color of each shape is set using the fill() and stroke() functions. The background() function sets the background color to a light gray color. The color of the shirt changes from black to different shades of white and black as the fill() is set to random(255) when the mouse is clicked on the canvas. Also, the eyes blink once every second as the frameCount()% 60 will be true once every second. The code also contains commented out lines that would create a grid for reference, but this is not displayed in the final output. This helped in the positioning of the facial features.

Code

let blink = false;
let color1 = 0;
let color2 = 0;
let color3 = 0;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  
//background
background(51, 102, 153);
  noStroke();
  for (let i = 0; i < 400; i += 20) {
    fill(102, 153, 204);
    ellipse(200, 200, 400 - i, 400 - i);
  }

fill(194, 150, 130);
  noStroke();
  let face = ellipse(200,160,180,200);
  fill('white');
  let eyel = ellipse(165,140,35,15);
  let eyer = ellipse(240,140,35,15);

 fill(50, 60, 60);

//   eyebrows
  stroke(21, 19, 19);
  strokeWeight(3.5);
  noFill();
  arc(165, 130, 45, 5, PI, TWO_PI, OPEN);
  arc(240, 130, 45, 5, PI, TWO_PI, OPEN);
  
  //eyeball
  noStroke();
//   fill(0);
//   ellipse(165, 140, 15, 15);
//   ellipse(240, 140, 15, 15);
//   fill(255);
//   ellipse(164, 136, 5, 5);
//   ellipse(239, 136, 5, 5);

  
 if (frameCount % 60 == 0) {
    blink = !blink;
  }

  if (!blink) {
    fill(0);
    ellipse(165, 140, 15, 15);
    ellipse(240, 140, 15, 15);
    fill(255);
    ellipse(164, 136, 5, 5); // left eye ball
    ellipse(239, 136, 5, 5); // right eye ball
  } else {
    fill(194, 150, 130);
    ellipse(165, 140, 35, 15);
    ellipse(240, 140, 35, 15);
  }
  
  
  //nose
  fill(194, 150, 130);
  stroke(21, 19, 19);
  strokeWeight(1.5);
  triangle(200, 155, 193, 190, 207, 190); // nose tip

  //Hair
  fill('black');

  arc(200, 110, 160, 120, PI, 0);

  triangle(230,67,210,67,250,120);
  triangle(240,67,220,67,260,120);
  triangle(250,67,230,67,270,120);
  triangle(260,71,240,60,280,120);
  
  
  //Ears
  fill(194, 150, 130); // set fill color to match the face
  noStroke();
ellipse(100, 160, 20, 40); //left ear
ellipse(300, 160, 20, 40); //right ear
  
  // Beard
stroke(0); // set stroke color to black
strokeWeight(2.5);
for (let i = 115; i < 175; i += 3) {
    line(i, 180, i + 8, 115 + (i*0.88));
}

for (let i = 115; i < 175; i += 3) {
    line(400 - i, 180, 400 - (i + 8), 115 + (i*0.88));
}
for (let i = 180; i < 220; i += 3) {
    line(i, 200, i, 210);
}
for (let i = 180; i < 224; i += 3) {
    line(i, 220, i, 260);
}

  
//Lips
fill(184,63,63); // set fill color to red
noStroke();
arc(200, 210, 40, 30, 0, PI, CHORD);
  
  
  //shirt
   // fill("#151E3D"); // dark blue


  fill(color1,color2,color3);
  rect(125, 260, 150, 140);
  rect(95, 260, 30, 100); // left sleeve
  rect(275, 260, 30, 100); // right sleeve
  
 
  
  
  
  //neck 
  fill(194, 150, 130);
  rect(181, 260, 40, 30, 5);
  

//grid for refernce
//     stroke(0); // set stroke color to black
//   strokeWeight(1); // set stroke weight to 1 pixel
  
//   // draw horizontal grid lines
//   for (let i = 0; i <= 400; i += 20) {
//     line(0, i, 400, i);
//   }
  
//   // draw vertical grid lines
//   for (let i = 0; i <= 400; i += 20) {
//     line(i, 0, i, 400);
//   }
  
}
function mouseClicked() {
  if (color1 === 0) {
    color1 = random(255);
  } else {
    color1 = 0;
  }
  if (color2 === 0) {
    color2 = random(255);
  } else {
    color2 = 0;
  }
  if (color3 === 0) {
    color3 = random(255);
  } else {
    color3 = 0;
  }
}

Reflection/Future Improvements

This code provides a basic outline for an animated face and could be used as a starting point for further development. Some potential improvements for the code include adding more details to the face, such as the eyes’ pupils and reflections, more defined eyebrows, and additional shading to add depth. Adding more hair styles, clothing, or accessories to personalize the character. Incorporating user input to allow for customization of features, such as hair style, eye color, or clothing. Improving the overall structure and organization of the code, such as using functions to keep the code more modular and easier to maintain. Overall, there is room for further development and improvement in this code. I learned the usage of basic shapes, functions and some forms of interactivity which I implemented. The assignment was so open-ended that I just wanted to add more and more stuff.

Leave a Reply Cancel reply