Category: Spring 2024 – Aya (Section 002)

For this assignment, I wanted to create a self portrait that not only resembled the way I looked like but also had an alternative appearance which would be activated using interactive component. Last year, I went to Halloween party where I dressed as character called Walter White from a TV show called Breaking Bad. I added a button (titled “Say My Name”) which repeats the iconic dialogue from one of the show’s most important episodes . This button also acts as a toggle for transformation between enlarging strokes, as well as changing the background color, shirt color, adding glasses, a hat, removing hair, adding a beard etc. It also activates iconic music from the show as soon as it’s pressed.

This is the part where everything happens and all the classes are activated from. As such, it is the most important part of my code and also handles the audio (it is a toggle button hence I want it to toggle between two states, and therefore I need several checks and booleans). Although I would say getting the shapes right and drawing them proportionally was equally hard to do. Fortunately, I had experience with P5 before which is why I wanted to add more stuff than it was initially proposed in the assignment. Overall, I really enjoyed making this portrait and hope you like it. In the future, I could potentially add more interactive components in the background or some dynamic elements like eyes that follow a mouse cursor.

function toggleTransform() {
  hatvisible = !hatvisible;
  toggleGlasses();
  toggleHair();
  toggleBeard();
  toggleShirtColor();
  toggleBackgroundcolor();
  displaytext = !displaytext; 
  if (songcheck == false) {
    song.play();
    songcheck = true;
  } else {
    songcheck = false;
    song.stop();
  }
}

 

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);
}

 

My initial idea was to make a simple self-portrait however after playing around with the options p5 provides, I settled on using 3D shapes to complete my project.

I quickly realized that making a human head would look very odd and uncanny in 3D, so instead I chose to make an animal, specifically a chimp, as it was easier to abstract it into basic shapes.

Most of the structure is composed of ellipsoids. Ellipsoids offered me the most amount of options. Alternatively, I considered using custom geometry however that proved too difficult to create. I also considered using Bezier curves for certain shapes, but the same issue of complexity, as well as their limitation of being exclusively a plane discouraged me from pursuing that route.  To shorten the code, I encapsulated the process of drawing an ellipsoid into it’s own function.

  // Function to draw ellipsoid with specified colors
  function drawEllipsoid(rx, ry, rz, fillColor, translateParams) {
    fill(fillColor);
    push();
    translate(...translateParams);
    ellipsoid(rx, ry, rz);
    pop();
  }

I am happy that I was able to add directional lighting. Without the lighting, I had to display the wireframe of the shapes which made the project look unpolished.

There are many improvements I can make, like tweaking the proportions of the shapes. I really wanted to add a texture file for the fur of the monkey, but I couldn’t figure out how to make it compatible with an online compiler.