Assignment 1 – Self Portrait | Ahmad Hafizh

This is our first assignment for the Intro to IM Spring 2024 class. We are introduced to p5js in the class, and after messing around with it for a while, I began to grasp hold of the program.

 

The assignment focuses on creating a self-portrait using p5js. I was heavily inspired by Perry the Platypus when creating this because of the simple shape that can be translated using the program.

Perry the Platypus. Disney

The code that I used for the portrait is posted below. I am still confused about the arc shape, which requires a lot of planning before using. As you can see, the hat in my code is not perfectly hat-shaped enough. Nonetheless, this exercise encouraged me to practice using it more.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(178, 216, 216);
  rectMode(RADIUS);
  fill(255, 234, 0);
  rect(200, 320, 100, 30, 20);

  //mustache
  rectMode(CENTER);
  fill(132, 90, 27);
  rect(200, 300, 100, 30, 20);

  //eyes
  ellipseMode(RADIUS);
  fill(255);
  ellipse(50, 200, 30, 30);
  ellipseMode(CENTER);
  fill(100);
  ellipse(50, 200, 30, 30);

  //eyes
  ellipseMode(RADIUS);
  fill(255);
  ellipse(350, 200, 30, 30);
  ellipseMode(CENTER);
  fill(100);
  ellipse(350, 200, 30, 30);

  //hat
  fill(132, 90, 27);
  ellipse(200, 120, 300, 30);
  arc(200, 50, 130, 200, -3.95, QUARTER_PI, OPEN);
}