Coding Assignment – Week#1

My objective of this self-portrait assignment was to create a dynamic and animated self-portrait, drawing inspiration from the style of cartoons. The core idea was to give the portrait an animated look by discarding outlines and instead focusing on bold strokes, vibrant colors, and animated elements. I wanted to add some personal character elements as well, such as my silver earrings and short lighter hair. I believe the eyeroll-like animation also matches my look, as I sometimes receive comments that I appeared as a traditionally mean and cold Eastern European when people would first see me, and that they would be proven wrong after a while. Since the overall look of the portrait is cartoonish, the mean eye-roll appears quite cute and ironic.

Here is the sketch:

That said, I was quite proud of the eyelash animation. I used iteration from -20 to 0 to create eyelashes above the eye, and by adding the lashSpacing I was able to separate them from each other. By using the map() function, I was able to calculate the position of one of the eyelashes. I used the cos() function to create a value that swings between -1 and 1 based on the angle (angle + i). I then mapped it to a range between -10 and 10 and created a centered motion around 0, giving the eyelashes a natural appearance. I then drew each eyelash separately using the lashX coordinates for the upper vertices of the lines.

// Adding eyelashes with animation and spacing
for (let i = -20; i <= 0; i += lashSpacing) {
  // Calculate the x-coordinate for the first eyelash, centered around 0
  let lashX1 = map(cos(angle + i), -1, 1, -10, 10); 
  //Separating by 10 pixels the other 2 eyelashes
  let lashX2 = lashX1 + 10; 
  let lashX3 = lashX1 - 10; 
  stroke(0); 
  // Setting the thickness of the lines
  strokeWeight(2); 
  // drawing the eyelashes
  line(0, -16, lashX1, -25); 
  line(10, -14, lashX2, -25); 
  line(-10, -14, lashX3, -25); 
}
pop();

I was also proud of the gradient code. I used a for loop again to blend the colors by calculating a color for every line of pixels on the canvas with the help of the lerpColor().

function draw() {
  // Defining colors for the gradient
  let color1 = color(0, 0, 139);
  let color2 = color(100, 100, 255);

  // Creating a gradient background. Iterating through each vertical line of pixels
  for (let i = 0; i < height; i++) {
    // mapping the current value of i from the range 0 to height to a new range from 0 to 1
    let inter = map(i, 0, height, 0, 1);
    // calculating a color for each line of pixels using the lerpColor function
    let c = lerpColor(color1, color2, inter);
    // setting the stroke color and drawing a line through full horizontal distance of the canvas
    stroke(c);
    line(0, i, width, i);
  }

For future improvements, I would like to make the code cleaner and simpler, less repetitive. Exploring object-oriented programming techniques could be an intriguing strategy as well, which should help in making the code more organized.

 

https://editor.p5js.org/llluka/sketches/LgUxOAe6N