Category: Spring 2024 – Aya (Section 002)

For assignment #1, I found myself wanting to do something a bit unusual, as the emergent ideas that popped up in my brain told me to do something weird and abstract, like a self-portrait of myself but with weirdness added as a layer. So, thanks that I have a bit of knowledge using applications such as GIMP, I did a sketch of what I wanted to code, but taking into account that I did not want to make around 600+ lines of code.

The first step for this was to take a photo of myself, and then crop it to the 400×400 resolution to be allowed to use as a pixel reference. After cleaning the image and drawing what I would like to program, as shown in the screenshots below, it allowed me to proceed with the code implementation.

For the silhouette, I was a bit worried of not finding a particular function to allow drawing a free shape, but thanks to p5.js’ documentation, I found that the function beginShape(); can do what I wanted, so it was only a matter of drawing a lot of vertices with vertex(x,y);, according to the X and Y coordinates in GIMP, to fully draw my silhouette and proceed with the rest of the details.

The beginShape();code part is written like this for the sketch:

beginShape(); //I found this function helpful, as it allowed me to make the silhouette.
   vertex(2,383)
   vertex(0,400)
   vertex(346,400)
   vertex(325,375)
   vertex(315,382)
   vertex(300,369)
   vertex(304,351)
   vertex(283,348)
   vertex(316,230)
   vertex(312,211)
   vertex(328,190)
   vertex(316,106)
   vertex(313,100)
   vertex(310,46)
   vertex(285,26)
   vertex(269,22)
   vertex(248,10)
   vertex(200,10)
   vertex(164,17)
   vertex(126,45)
   vertex(95,78)
   vertex(83,117)
   vertex(86,179)
   vertex(73,192)
   vertex(79,236)
   vertex(94,255)
   vertex(112,258)
   vertex(120,325)
   vertex(105,347)
   vertex(80,357)
   vertex(64,359)
   vertex(2,383)
 endShape(); //Custom shape ends here.

This sketch took a lot of time as there were too many details, such as the many squares that act as the transparency placeholder for editing software and the triangles with abnormal X and Y positions. I have to admit it was fun and liberating to create something like this, but it took a lot of time, patience, and creativity to found a way to bring my idea into reality.

For future works, maybe I can implement other software to fully grasp the scope of what I want to create, as how I used GIMP to make the sketch and X and Y references. And regarding future improvements, maybe limit myself to only use p5.js (as an artist with only a stencil, its knowledge, and a white canvas) and integrate interactivity.

One trivia about me is that I really love hiking, but I’m not very good at it. For most of my life, I’ve lived in a mountainous area in the Philippines, providing me with ample opportunities to go hiking. While I love the activity, I easily get tired and take hours to reach the top of a mountain. I thought it would be nice to create a self-portrait about my hiking experiences. Inspired by Pauline Wee’s Koala portrait from the examples provided, I decided to add some interactive elements when the mouse is pressed.

The concept is ‘Me  Before and After Hiking.’ I have created changes in facial expression and background color that occur when the mouse is pressed. Specifically, when the mouse is not pressed, you can see me with a happy face with blushes, indicating excitement before hiking. And, when the mouse is pressed, you can see me sweating with an exhausted face and a change of background color to indicate the exhaustion after hiking and the passage of time.

The section of code that I am particularly proud of is presented below. I was particularly proud of this section of code made for the change of facial expression when the mouse is pressed because I felt like I did a great job in making my code concise. Originally, I had multiple if-statements for each of the changes. However, I realized that I could just combine all these if-statements into one! It was quite challenging to combine the if-statements because I had to consider all the orders of the shapes to make a great-looking self-portrait.

// change of facial expression when mouse is pressed
  if (mouseIsPressed) {
    //left eye
    line(146, 193, 168, 203);
    line(146, 209, 166, 203);
    //right eye
    line(256, 193, 233, 203);
    line(256, 209, 233, 203);

    // mouth
    fill("red");
    arc(faceX, faceY + 73, 40, 40, PI, 0);
    line(faceX - 20, faceY + 73, faceX + 20, faceY + 73);

    // sweat drops
    sweatdrops(0);
    sweatdrops(30);
    sweatdrops(60);
  }
  //when mouse is not pressed
  else {
    //eyes
    fill(0);
    ellipse(160, 200, 15, 18); //left eye
    ellipse(242, 200, 15, 18); //right eye

    // eyelashes
    line(146, 193, 154, 197); //left eyelash
    line(256, 193, 250, 197); //right eyelash

    // mouth
    fill("red");
    arc(faceX, faceY + 53, 40, 40, 0, PI);
    line(faceX - 20, faceY + 53, faceX + 20, faceY + 53);

    // blush
    stroke("#FE847E");
    fill("#FE847E");
    ellipse(faceX - 60, 245, 20, 15);
    ellipse(faceX + 60, 245, 20, 15);
  }

Overall, I am very satisfied with the outcome of this assignment, although it may not be perfect. I find my self-portrait quite cute. This was my first time working with P5.js, and I found it very fun. Actually, I found this experience to be  similar to my experiences with Python and Processing. For improvements, I think adding animations like pouring rain or dripping sweat to my self-portrait would have made it more interesting. Also, it would have been more engaging to add additional interactions, like the body moving in response to cursor position.

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.