Assignment 1 – Self Portrait

As I started the assignment, I had a bunch of trouble with the parameters of shapes that I used as well as the coordinate system. Thankfully, I was able to overcome this obstacle by consulting with the p5js Reference. I also used Owen Roberts’ grid code to help me position the shapes properly.

Initially, my idea was to recreate my passport photography in a minimalistic manner. I used a variety of shape primitives in p5 to make this happen and I also explored using RGB and Hex codes for color. Additionally, I wanted a piece of the portrait to represent NYU so I researched the RGB values of the NYU purple and used it as the background.

The following code was used to get the desired result:

function setup() {
  createCanvas(400, 400);
  background(87, 6, 140);
}

function draw() {
  //ears
  fill(232, 190, 172);
  stroke(0);
  ellipse(110, 200, 30, 60);
  ellipse(290, 200, 30, 60);

  //neck
  fill(232, 190, 172);
  stroke(0);
  rect(170, 290, 60, 80);

  //body
  fill("#5A5A5A");
  rect(75, 320, 250, 200, 40);
  fill(232, 190, 172);
  stroke(0);
  arc(200, 320, 80, 40, 0, PI, CHORD);
  fill(232, 190, 172);
  noStroke(0);
  arc(200, 320, 60, 40, 0, PI);

  //face
  fill(232, 190, 172);
  stroke(0);
  ellipse(200, 200, 180, 200);
  //eyes
  fill(255);
  ellipse(160, 180, 50, 30);
  ellipse(240, 180, 50, 30);
  fill("#1569C7");
  ellipse(160, 180, 20, 20);
  ellipse(240, 180, 20, 20);
  fill(0);
  ellipse(160, 180, 8, 8);
  ellipse(240, 180, 8, 8);
  //eye shine
  fill(255);
  ellipse(165, 175, 5, 5);
  ellipse(245, 175, 5, 5);
  // nose
  fill("#9F7967");
  noStroke(0);
  quad(190, 215, 210, 215, 220, 225, 180, 225);
  fill(0);
  ellipse(194, 220, 7, 7);
  ellipse(205, 220, 7, 7);
  stroke(0);
  line(210, 164, 210, 215);
  //hair
  fill("#c89f73");
  noStroke(0);
  ellipse(200, 108, 173, 65);
  triangle(110, 180, 115, 100, 150, 110);
  triangle(290, 180, 285, 100, 250, 110);
  //mouth
  fill(231, 106, 106);
  stroke(0);
  arc(200, 260, 60, 13, 0, PI);
  arc(200, 260, 60, 8, PI, 0);
  fill(0);
  stroke(0);
  line(170, 260, 230, 260);
}

As visible from the code I also played around with the outline of the used shapes.

Following is the final version of the self portrait.

In retrospect, this was a great assignment as an introduction to p5 and I really enjoyed doing it! In the future, I would like to focus more on making artwork interactive as I have a few ideas I would like to explore such as psychedelic art.