Assignment 1 (Self-Portrait) Shereena AlNuaimi

For this assignment, I aimed to incorporate one of my favorite things to do, that instantly fills my entire body with peace and happiness. Watching the sunset. The plan was ideally to make the background more ombre other than fading, however, as it’s my first time using p5js I found it difficult to implement that into my background. For future assignments, I’m hoping to create more interactive projects and master the ombre affect as well as getting more familiar with coding.

let rectWidth;
let rectHeight;
let rectX, rectY;
let eye1X = 170;
let eye2X = 230;
let speed = 8;

function setup() {
  createCanvas(400, 400);
  rectWidth = width/4;
  rectHeight = height/4;
  rectX = 0;
  rectY = height/2;
  angleMode(DEGREES);
}

function draw() {
  background(255, 255, 153, 10);

  //SUNSET BG
  
  rectMode(CENTER); //LIGHT ORANGE TOP
  stroke(255, 204, 0)
  fill(255,204, 0);
  rect(rectX, rectY-120, rectWidth+50, rectHeight+50);
  
  rectMode(CENTER); //D.ORANGE MID
  stroke(255, 153, 0)
  fill(255,153, 0);
  rect(rectX, rectY, rectWidth+50, rectHeight+50);

  rectMode(CENTER); //BOTTOM
  stroke(255, 102, 0)
  fill(255,102, 0);
  rect(rectX, rectY+120, rectWidth+50, rectHeight+50);
  

  
  rectX = rectX + speed;
  
  if (rectX > width){
  rectX = 0;
  }
  
  //hair
  fill(43, 28, 17);
  stroke(0, 0, 0);
  rect(200, 220, 205, 330, 90);
  
  //neck
  fill(240,190, 120);
  stroke(0,0, 0);
  rect(200, 239, 100, 100, 20);
  
  //face
  fill(240,190, 120);
  stroke(0,0, 0);
  ellipse(200, 150, 150, 175);
  
  //nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);
  
  //shirt
  fill(136, 189, 242);
  rect(200, 380, 190, 270, 50);
  
  //bangs
  noStroke();
  fill(43, 28, 17);
  rect(200, 81, 100, 40, 58);
  strokeWeight(1.5);
  
  //right eye
  fill(255);
  ellipse(eye2X, 143, 40, 40)
  
  //left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);
  
  //right pupil
  fill(51, 0, 0);
  ellipse(eye2X, 143, 15, 20);
  
  //left pupil
  fill(51, 0, 0);
  ellipse(eye1X, 143, 15, 20);
  
  //mouth
  fill(0);
  arc(200, 192, 50, 50, 0 ,180);
  
  
  
}