Month: September 2024

Concept

For my self portrait I wanted something that represented a few aspects of my personality in ways that I don’t normally think about them. I tried to think of puns/inside jokes within my life that would add to the self portrait both visually and conceptually. I also knew that I wanted to add some interactive component/movement in the portrait but was unsure as to what exactly I wanted when I got started.

Components

To walk you through some of these components lets starts with the most obvious, the color changing background and sun-emoji mouse. I am a visiting student from New York, and have spent the last 10 years in Harlem, NYC but am originally from Florida. Florida is often referred to as “the Sunshine State” and although I consider myself a New Yorker, still believe that being born there is important to who I am. I found implementing the color tracking background components and sunshine mouse to be relatively simple but spent a lot of time working on this piece because of the color theory aspect. I had a very difficult time match the colors of the background to a “Floridian sunrise” but ended up on settling with this blue (representing night) to orange (daytime) transition.

let c = color(mouseX-200, 100, 100);
  background(c);

//sun
 textSize(48);
 text("☀️", mouseX, mouseY);

An aspect I am proud of

Another component I would like to highlight is the camera/flash feature. A big hobby of mine if film photography so I thought I’d add in a little camera around my neck to capture some beautiful scenery. I added the flash mainly because I wanted something interactive but also thought of it as a joke because I am quite bad at taking photos with flash. Although this code is also quite simple, it is what I would like to highlight as what I am particularly proud of because I had quite a bit of difficulty trying to get it to work. I was having a lot of trouble distinguishing the uses between mousePressed(), mouseClicked(), and mouseIsPressed() but ended up solving the problem by finding a tutorial on the click-event feature.

//camera flash
  if (mouseIsPressed){
    //referenced vidianindhita's tutorial
    noStroke();
    fill('white');
    ellipse(380, 550, 50, 50);
  }

My final product

Reflection

All in all, I really enjoyed this assignment and was excited to work with something new. I found manipulating the shapes to make different images more difficult than I expected it to be and enjoyed the challenge of trying to figure out what shapes could make what facial features. In the future, I would like to fix the color issue with the sunrise because I think it is a super cool feature that just needs a bit of tinkering. I’d also like to try and figure out what other dynamic pieces I could add. For instance maybe moving clouds or a sun that rises on it’s own without the mouse. Also, I did attempt to track my pupils onto the mouse within the parameters of the whites of my eyes but didn’t make much progress so hopefully I can figure that out too.

I have always considered music to be an essential part of my life. Whenever I want to get something done or need to lift my mood, I turn to music. So, for the self-portrait assignment, I decided to design a portrait that interacts with music. The life and happiness of my portrait depend on music: when there is no music, it reflects a very bad mood, and the heart stops beating. I used different shapes to draw the portrait, but drawing the heart was particularly challenging. Initially, I tried using the Heart equation, but it was difficult. Fortunately, I found an easier method online. To make the portrait react to music, I used p5.AudioIn to capture my computer’s microphone input, which I then used to alter parts of the portrait as the amplitude changes. If the user presses the mouse, the background color changes to simulate disco lights. The final design is decent but still needs some improvements.  

NOTE: Seems like I can’t use the mic on WordPress. Run the code on the P5 editor

The following part of the code is interesting but challenging to implement. To create the disco light effect, I needed to incorporate a time delay. Unfortunately, I couldn’t find a direct way to implement the delay. After some research, I discovered that I could use frameCount to achieve the delay and, consequently, the disco lights.

//function to turn on the disco light (One second cycle)
function discoLight() {
  let level = map(mic.getLevel(), 0, 1, 50, 255);

  if (frameCount % 60 < 10) {
    background(level, 0, 0);
  } else if (frameCount % 60 < 20) {
    background(0, level, 0);
  } else if (frameCount % 60 < 30) {
    background(0, 0, level);
  } else if (frameCount % 60 < 40) {
    background(level,0 , level);
  }
  else if (frameCount % 60 < 50) {
    background(0, level, level);
  }
  else if (frameCount % 60 < 60) {
    background(level, level, level);
  }
}

Overall, working with p5 has been an interesting learning experience. I faced some challenges, especially with the coordinate system. I was so used to working with the standard coordinate system, so adjusting to the inverted system was somewhat difficult. However, I believe that with time, I will overcome these challenges. The portrait may require further enhancements: future work might involve analyzing the sound so that the mouth moves when someone sings or talks, instead of merely reacting to the beat. Since some parts move relative to the music level and I haven’t tested the code with very loud sounds, I’m concerned that certain elements might move further than expected, causing disorientation of the entire portrait. To address this, I plan to map the sound input so that everything works smoothly regardless of the amplitude. Additionally, another improvement could be ensuring that every part of the portrait remains proportional to the whole. This way, whenever I change one element, the entire portrait adjusts accordingly without becoming disoriented.

Background
As I was learning how to draw using P5.js, I initially experimented by arranging shapes and figures randomly. I found myself drawing a robotic face because it was easy to arrange boxes and shapes, even if they didn’t resemble a familiar human face. As I became more comfortable with using various shapes and gained an understanding the coordinate system, thanks to the detailed references on the P5.js website, I wanted to create something more human-like. I started by sketching a simple drawing (below) of a man wearing a tie in my notebook.

I managed to complete the drawing in P5.js  and it appeared better than I expected. I also added some features including dynamic objects and mouse inputs. However, I was not fully pleased with ‘my almost portrait’ as I did not like how the lower part turned out. I faced challenges in filling  the colours  on the lower body and arms because my drawing had a lot of independently connected lines as seen below. So I wanted to make the lower part look better.

My Final Portrait
Despite the fact that I was very impressed with how my portrait had turned, I did not like the fact that everything below the head had to remain with the background colour.
So I decided to come up with a simpler design by changing the lower body and adding a neck and a small chain and I could now colour it different from my background.
I had added some a Moon and Sun emoji which simultaneously passed indicating day and night. I set some offsets for the smoke from the man’s cigarette so it appears to ascend upwards.
Lastly but not least, I was curious to explore  mouse input functions, so I added blinking on pressing the mouse.
My final Portrait can be seen below:

Achievements I am most proud of

I have managed to learn so much in such a simple assignment.  One achievement I am most proud of is how I managed to add some dynamic objects and features in my portrait. One of them being the moving smoke, where I added some offset to move the smoke upwards and some ‘Shake’ variable to make the smoke shaking as it ascends. Below is the code for that:

// Drawing Ciagerette tip 
circle(220, 375, 10);
// Drawing Cigarette smoke 
fill(12, 12, 12);
// Used this shape/Curve from (https://p5js.org/examples/repetition-bezier/)
bezier(220, 375, 200, 350, 250, 320, 230, 300);
bezier(222, 380, 210, 355, 260, 330, 240, 310);
noFill();
// Adding Movable smoke to make it dynamic
fill(fade, fade, fade)
bezier(220+shake, 375+Smokeoffset, 200-shake, 350+Smokeoffset, 250+shake, 320+Smokeoffset, 230-shake, 300+Smokeoffset);
bezier(222+shake, 380+Smokeoffset, 210-shake, 355+Smokeoffset, 260+shake, 330+Smokeoffset, 240-shake, 310+Smokeoffset);
noFill();

Reflections and ideas for future works

Creating a portrait has  been a very nice assignment. I have gained understanding on working with P5.js. I have also experiences the importance of properly commenting my code as it was easier to navigate the code and see what to improve, which could have been very difficult without proper comments.
For future, I would love to add more functionality and make use of many other  features that I was not able to use in this assignment such as the 3D objects, loading images, rotation and many other.