Month: January 2024

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.

When working on this assignment, my goal was to create an image of myself with round figures. Therefore, I tried to use ellipse, circle, and arc for most of the design and limit the use of shapes with sharp or straight edges. Even when I used shapes such as rectangle, I made the corners round so that they are not sharp. To add on, another concept of this assignment was using pastel colors. Except black, all colors aren’t vibrant and I aimed to use “soft” colors throughout coding.

A section of code is provided below and I am particularly proud of them because it was my first time using ‘arc’ and ‘text’ codes. With ‘arc’ code, I initially struggled to use it because I wasn’t sure how to use PI in the code. However, with trial and error, I was able to get a grasp of it and utilize it throughout the assignment. Also, after I finished coding for the self-portrait, the upper part of the canvas was empty and I used the ‘text’ code to fill in the spaces.

Overall, I am satisfied with the outcome of the code. Although it doesn’t necessarily look like me, I am happy that my code generated a picture of a person. For improvements, I would like to learn how to code so that the eyeballs move with the mouse. Also, I think it would be interesting to let the color of the shirt change when the user clicks on the shirt. In general, making the product more interactive would make it more entertaining and dynamic.

//bang
fill('black');
arc(250, 230, 180, 175, PI, PI+PI);

// left eye
fill('white');
circle(210, 260, 40);
noStroke();
fill('black');
circle(210, 260, 22);

//left eyebrow
stroke('black');
noFill();
arc(210, 237, 30, 10, PI, 0, OPEN);

//text
textSize(50);
text('self-portrait', 125, 90);
textSize(70);
text('☀️', 30, 100);
text('🌿', 400, 100);