Month: September 2024

Concept

For my self-portrait, I wanted to create something that represents who I am on the surface and who I sometimes become inside. Growing up, I was a huge fan of Dragon Ball Z, so for this project, I decided to make a portrait of myself that can transform into a ‘Super Saiyan.’ For this assignment, we were required to use p5.js to create the self-portrait using the shapes and lines we learned in our first week. Before getting started, I drew the following images to guide my code; let’s call this the R&D part of the process:

 

The Process

The process for this project was quite enjoyable. I had a lot of fun experimenting with different colors, shapes, and lines while creating the portrait. I started from scratch, using an ellipse to resemble the face, and other shapes as the building blocks for the body’s anatomy. Once the basic human figure was drawn in JavaScript, the hair surprisingly became the most time-consuming aspect. I had to use triangles to accurately represent how my hair looks to closely match my image. I used online resources like ‘Google Color Picker’ to find the unique color codes that created my desired effect. A simple if-else statement was also used to enable the switch from normal to Super Saiyan. Be sure to stick around to find out about my favorite part of the code that sells the entire effect.

if(keyIsPressed === true) // he turns 'Super Sayain' { background(174, 224, 235);

 

Code that I am Proud of:

The code that I’m particularly proud of is the one where I used a ‘for loop’. I started coding last fall, and during that time, I learned the basics, all the way up to classes and object-oriented programming. With this knowledge in mind, I wanted to experiment with how loops would function (no pun intended) in this self-portrait. The best way to integrate this was by using a for loop. It’s one thing to see your code run in a terminal, but it’s another glorious moment to see the visuals your code can produce. That’s exactly how I felt when I saw my code turn into something visually intriguing. The following code creates the energy around my transformed character to maximize the intended effect:

// The following loop is for the energy around our 'Sayain'
    for (let i = 0; i < 20; i++) 
    {
      let x1 = random(width);
      let y1 = random(height);
      let x2 = x1 + random(-30, 30); // Randomizing the length and direction of the lines
      let y2 = y1 + random(-30, 30);
      line(x1, y1, x2, y2);
    }

The final Outcome:

The moment you’ve all been waiting for! To turn Super Saiyan, press any key on your keyboard (for simplicity, try pressing the spacebar 😉)

Reflection:

I thoroughly enjoyed every part of creating this self-portrait, and it taught me how to visualize my code and think creatively while coding. Although I faced some challenges in aligning each shape with others, overall, this assignment helped me strengthen both my creative and coding skills. For future improvements, I’d like to implement more conditionals, variables, loops, and classes in this portrait and in my future projects. I’d also like to explore how these elements can be integrated with 3D models in p5.js to create something so interactive that people would become truly captivated by my work.

Concept
My concept centres around the idea that a cat represents an important aspect of my identity, being my favourite animal and symbolising certain personal traits like independence, curiosity, and playfulness. In this project, I wanted to create an interactive experience where a simple click could reveal the transition between a cat and my self-portrait. The idea was to make this transformation not just about visuals but also about the connection between the two images—how the cat symbolises me in a more abstract way and how that symbolism morphs into a more literal self-portrait. The goal was to capture a sense of play and surprise, inviting the viewer to engage with the piece and reflect on how we often associate certain animals with our personalities or characteristics.

function draw() {
  if (showCat) {
    drawCat();
  } else {
    drawPerson();
  }
}

 

This function is simple yet crucial for the interactive element of my project. It efficiently toggles between two distinct visual representations based on user interaction. The conditional logic is straightforward but powerful, allowing for a seamless transition between the cat and the self-portrait. What I find particularly satisfying about this piece of code is how it encapsulates the entire concept in just a few lines. It’s a perfect example of how simplicity in code can lead to a more engaging and fluid user experience. This function effectively bridges the gap between concept and execution, making the interaction feel natural and intuitive.

Reflection and Future Improvements
Reflecting on the project, I’m pleased with how the interactive element turned out, but I see a lot of potential for further refinement. One area I would like to focus on in the future is adding more realism to the visuals, particularly through the use of shadows and shading techniques. Currently, the transition between the cat and the self-portrait is clean and simple, but adding shadows could give the images more depth and make the transformation feel more lifelike. I also want to explore more advanced rendering techniques to enhance the texture and detail of both the cat and the self-portrait. Additionally, experimenting with subtle animations during the transition could add another layer of sophistication, making the experience even more engaging. This project has been a great learning experience, and I’m excited to see how I can push it further to create a more polished and immersive piece.

Welcome to my first IM project!

Concept: I was surprised that I can include emojis in coding so I wanted to play around with it. I went with a simple but cute design since this is my first time coding. I used the emojis to make eyes as well as a waving hand that is tracked by the mouse. I also used my two favorite colors, blue and purple, to make a little smile.

Code: I was a bit worried on how to implement the hijab in the sketch because I did not want to use two circles. I ended up using the stroke of the ellipse to make the hijab and it turned out great!

//face and hijab
fill('rgb(218,173,130)')
stroke('rgb(112,11,11)')
strokeWeight(30)
ellipse(200,200,250,300)

 

Reflection and improvements: Overall I had fun exploring the different variables and testing things out! I didn’t really know what I was getting myself into when I chose to enroll in this class but I’m glad I did. Interactive media seems like the perfect blend between computer science and art, two things I’ve always wanted to try out. Coming back to the sketch, in the future, I would try making a curved line for the smile because I couldn’t figure out how to do that.

Concept
For this project, I decided to create a more abstract, cartoonish self-portrait. The simplified shapes give the drawing a cute and playful look, which fits well with the style I am aiming for. The strawberry-shaped hat I featured in the portrait is an item I gave to my little sister for her birthday, which adds a personal touch to the project. (She made me wear this hat for days) The background is inspired by Astana, which has the most beautiful sky I’ve seen, which makes this project even more meaningful to me.

Code snippet
A piece of code that I’m particularly proud of is the implementation of eye blinking on the character. The eyes alternately open and close, creating a simple but effective animation. Here’s the relevant code snippet:

if (millis() - lastBlink > interval) {
  push()
  fill(0);
  stroke(0);
  strokeWeight(3);
  line(295, 400, 335, 400);
  line(355, 400, 405, 400);
  pop()

  if(millis() - lastBlink > interval + blinkDuration) {
    lastBlink = millis();
  }
  
} else {
    fill(0);
    circle(315, 400, 25)
    circle(385, 400, 25)
}

This block of code is responsible for the blinking logic, checking the elapsed time and switching between drawing closed eyes (lines) and open eyes (circles).

Sketch

Reflection and ideas for future improvements
Creating this project helped me get more familiar with p5.js, especially in terms of working with different forms and layers. The biggest challenge was figuring out how to draw curves correctly and how to handle time intervals in p5js. However, this project gave me the confidence to experiment further with p5.js and possibly add more complex animations or interactive elements in the future.

In the future I would like to add interactivity to the sketch, such as making the eyes follow the cursor, or adding background changes depending on the time of day. I also plan to refine the background, adding more details that more accurately convey the atmosphere of Astana.

Short Description

For the first assignment of my intro to IM class, we had to design a self-portrait of yourself. I have been wanting to take an IM/ IMA class for the past two years at NYU, so I was really excited to get started and work on this project. I wanted my portrait to portray some of my favorite characteristics of who I am as a person. As such, portrait is a small reflection of the character that I am.

Character Design Concept

For my character, I took inspiration from the appearance of Duolingo character. Now before you judge, I often feel the need to add contrast and extensive detail to a design, so I have trouble simplifying my ideal design into primary shapes and colors. Therefore, specifically referencing Violet (my favorite) from Duolingo, I was able to simplify how the human anatomy is suppose to look and add details accordingly to my needs.

The Outfit

My next I asked myself, “what did I want my character to wear?” And so, I decided to dress her up in one of my to-go outfits in a black tank top, green cargo pants, and pair of off-white sneakers.  In addition, I have a cartilage piercing and two lobe piercing on one of my ears, so I added silver jewelry that I typically wear on my character’s ear. I could have added my other ear, but I thought my character looked good as it was. I also can’t forget my pair of silver/blue glasses, so my character can look even more like me.

The Background

After I had completed my character design, I moved onto the background and added some little detail of things I liked. At first, I wanted a cool animated background, but then I realized I wasn’t that comfort/ knowledge on p5 and decided on a plain background of my favorite color – burgundy red. Then, in the corner of the screen is my pet cat (Mio), who I love very much. Lastly, I added “Hello!” to the background to greet anyone that may come across my character.

The Coding Process

Given this was my first time working in p5, I am really happy with the outcome of my design. I had some issue with simplicity and wanting to do more than I was currently able to do. However, after experimenting and testing the p5 reference functions, I was able to work a lot more comfortably.

The Hardships 

THE HAIR. I believe the thing I work on the longest out of everything on my character was the hair. I could not find a shape that fit exactly what I wanted, and the math functions for the shapes were initially all so confusing to me. Eventually I searched up ‘character designs in p5’ on Google to see if hair was just supposed to look bad with the simple shapes, but I came across a post by Erika Noma who used the bezier() function and life was good again. I wouldn’t say my hair is how I imagined it to look, but it works. Although understanding the parameters was a little confusing to me, I do recommend anyone wanting to do a simple curvy/ waving shape to use this function because you’re able to insert 4 different points.

// hair front (on face)

fill('#927242');
bezier(200, 85, 245, 80, 280, 143, 257, 160) // left hair
bezier(200, 85, 135, 80, 120, 140, 135, 160) // right hair

The Brightside/ Greatest Achievement

After working through several shapes and functions to find the perfect hair shape, I felt like I became an expert on the math components of p5. For some functions such as arc() and rotate(), I didn’t realize at first the angles were measured radians, not degrees. You can imagine my confusion when errors were blowing up on the console and the shapes started flying across my screen. Through this project, the unit circle became my best friend and biggest support :’).

As such, through this experience, I was able to encode a simple waving action to my character. With the help of ChatGBT to understand the push(), pop(), and translate() functions that were outside of the p5 reference page, I was able to tweak my project to move based on the x-position of the mouse. The code below is the function for the waving action of my character. I am super proud I was able to make my character come to life and turn my difficulties into something positive.

/* right arm
  -- translate the center to where the arm would pivot 
  -- push() & pop() so it doesn't affect the rest of the drawing 
  -- let angle which the arm will wave based on the x-position of the mouse 
*/

fill("rgb(242,222,203)") // filled at the top for the arms 
push()
translate(245, 230)
let angle = map(mouseX, 0, width, PI/ 10 , PI / 4) 
rotate(angle)
ellipse(0, -40, 15, 100)   // right arm 
fill('rgb(233,200,170)')
circle(0, -113, 20) // right tiny circle hand :3 
pop()

My Final Self-Portrait Reflection

Overall, I am pretty satisfied with the outcome of my final design. I was able to incorporate different aspects of myself onto my character and show who I am as a person. Given I was hesitant and unsure if I could implement something that moves in my project, I feel I have learned a lot through my experience with p5 and overcoming technical difficulties. Going forward, I hope to learn more about the potentials of p5 (frames, rendering, input/output, etc) and continue to design fun projects.  I advise anyone starting out with p5 to not give up and continue to learn through trial and error!

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.