Assignment 1 – “Self-Portrait” by Sara Al Mehairi

Overview

For this assignment, I initially had a bit of uncertainty about the theme involved with creating a self-portrait using JavaScript. Stick figures seemed like a starting point, but I decided to draw inspiration from the cartoon TV show Gravity Falls. My goal was to capture the same facial structure that made the show so memorable from my childhood, appreciating its cool graphics. So, let me introduce you to Sara, the new character on Gravity Falls!

Challenges

Drawing inspiration from Gravity Falls presented several challenges, particularly in replicating the facial structures of the original characters using only ellipses, rectangles, and triangles. Coordinating the shapes, especially the triangles, definitely tested my patience. Gladly & after several attempts, I sought assistance from Desmos (advanced graphing calculator) to recreate and visualize my canvas in terms of coordinates, I found that pretty helpful!

reflection

My initial intention was to animate multiple objects on the screen, including the sun transforming into a darker color against an ombre background to symbolize sunset (ideally, user-controlled). However, I underestimated the time required for the graphic design itself & hope to implement animations in future projects. While I consider myself familiar with other languages, I wouldn’t claim that p5.js is my expertise. Overall, I found great enjoyment in this project and am proud of the results, particularly the implementation of a simple animation for the “Mukhawar” or Emirati traditional wear. If anyone is interested in the code, you can find it below!

// Welcome to the behind-the-scenes of Sara's self-portrait!

function setup() {
  createCanvas(500, 600);
  frameRate(10);
}

function draw() {
  background(153, 175, 191);
  
  // sun
  noStroke();
  fill(242, 209, 44);
  ellipse(0, 0, 300, 300);
  
  // clouds
  noStroke();
  fill(240);
  
  ellipse(100, 200, 60, 50);
  ellipse(60, 200, 60, 50);
  ellipse(20, 200, 60, 50);
  ellipse(75, 180, 60, 50);
  ellipse(45, 180, 60, 50);
 
  ellipse(500, 170, 70, 60);
  ellipse(460, 170, 70, 60);
  ellipse(420, 170, 70, 60);
  ellipse(485, 140, 70, 60);
  ellipse(445, 140, 70, 60);
  
  ellipse(300, 80, 70, 60);
  ellipse(260, 80, 70, 60);
  ellipse(220, 80, 70, 60);
  ellipse(280, 60, 70, 60);
  ellipse(245, 60, 70, 60);
  
  // ground
  fill(54, 99, 57);
  rect(0, 500, 500, 100);
  
  // neck
  fill(138, 98, 134);
  rect(190, 295, 130, 100);
  
  // hijab
  noStroke();
  fill(138, 98, 134);
  ellipse(245, 300, 190, 140);
  rect(165,180,175,120)
  triangle(325, 158, 410, 480, 300, 680);
   
  // face
  noStroke();
  fill(214, 176, 150);
  ellipse(240, 295, 160, 120);
  rect(175,180,145,120)
  
  //eyelashes
  push();
  stroke(0);
  strokeWeight(2)
  line(160, 240, 200, 255);
  line(170, 230, 200, 255);
  line(295, 240, 200, 255);
  line(285, 230, 200, 255);
  pop();
  
  // eyes
  fill(255);
  stroke(0)
  ellipse(200, 250, 60, 60);
  ellipse(255, 250, 60, 60);
  
  fill(0);
  ellipse(200, 245, 7, 7);
  ellipse(255, 245, 7, 7);
   
  // hair
  noStroke();
  fill(38, 20, 2);
  push();
  rotate(PI/9);
  rect(280, 45, 98, 50);
  rotate(PI/-6);
  rect(135, 200, 80, 30);
  pop();
  
  // hijab 2 (top part)
  fill(138, 98, 134);
  arc(253, 180, 175, 100, PI, TWO_PI);
  rect(165, 185, 10, 30);
  
  // hair 2
  fill(38, 20, 2);
  arc(250, 185, 155, 60, PI, TWO_PI);
  
  // mouth
  fill(255);
  stroke(0);
  arc(230, 305, 60, 37, 0, PI, CHORD);
  
  // hijab 3
  fill(138, 98, 134);
  noStroke();
  rect(166, 177, 9, 30);
  rect(320, 170, 17, 60);

  // eyebrows
  push();
  stroke(21, 19, 19);
  strokeWeight(2);
  noFill();
  arc(195, 215, 35, 10, PI, TWO_PI, OPEN);
  arc(255, 215, 35, 10, PI, TWO_PI, OPEN);
  pop();
  
  // body
  fill(163, 106, 145);
  rect(130, 385, 240, 255, 20, 15, 10, 5);
  push();
  rotate(PI/14);
  rect(210, 343, 65, 225, 20, 15, 10, 5);
  rotate(PI/-9);
  rect(260, 427 , 65, 220, 20, 15, 10, 5);
  pop();
  
  // sleeves
  fill(138, 98, 134);
  triangle(330,440,350,600,340,600);
  triangle(165,440,140,600,130,600);
  
  // dress
  fill(50, 46, 82);
  rect(210, 390, 65, 220, 20, 15, 10, 5);

  // crystal animation
  // inspired by https://editor.p5js.org/nanou/sketches/rJ-EMpxa
  var spot = {
  x:50,
  y: 25,
  };

  var col = {
      r:255,
      g:0,
      b:0,
  };
  
  spot.x= random (215, 270);
  spot.y= random (390, 480);

  noStroke();
  col.r = random (100, 255);
  col.g = (0);
  col.b = random (100, 200);
    
  fill (col.r, col.g, col.b, 120);
  ellipse (spot.x, spot.y, 10, 10);
  
  // neckline
  fill(138, 98, 134);
  arc(240, 384, 100, 80, 0, PI, CHORD);
  
  // mark
  fill(0,95);
  ellipse(280,290,2,2);
  
  // nose
  fill(214, 176, 150);
  stroke(0);
  arc(228, 279, 15, 25, 0, PI/3 + PI);
  
}

// Thank you so much!