For this assignment, we had to create a self-portrait in p5js. I began by deciding which elements of myself were important to incorporate. Of course, this includes basic features like eyes, nose, mouth but also things like my wavy hair or silver earrings. Once I figured out what to incorporate, I began making shapes in p5js, making sure the layers were right to get the results I wanted. The final result of my self-portrait is as follows:

As I worked, I realized making shapes in this program is quiteee annoying, especially because you need to play guess and check when figuring out coordinates. This led to it taking more time than expected, especially when it came to places where there are many shapes combined. For example, the eyes are something I am proud of because I went a step further to make them a tad bit more realistic by adding a flash spot. You can see the code for this below:

//eyes
  push()
  stroke('black')
  fill('white');
  ellipse(220,190,30,19)
  fill('black');
  circle(220,190,12)
  fill('white')
  circle(224,186,4)
  pop()
  push()
  stroke('black')
  fill('white');
  ellipse(280,190,30,19)
  fill('black')
  circle(280,190,12)
  fill('white')
  circle(284,186,4)
  pop()

Overall though, I think this assignment was a great introduction to creating objects in Javascript and required a lot of self-teaching from the references on the p5js website when it came to things like arcs, rounding out rectangles, push and pop, ellipses, etc. Breaking down myself into simple shapes really pushed my creativity when it came to combining shapes like ellipses and rectangles and circles for my hair and bangs. I was able to think outside the box on how to create what I wanted because I wasn’t even sure what the best way to get what I wanted to create was. My hope for the future is the be able to understand curves better to be able to make more custom shapes from scratch. Perhaps one day I can revisit this self-portrait and make it more realistic.

 

Concept:

This was my first project using p5.js, and also my first for this class. So, I decided to experiment and explore as much as I could to build a solid foundation for the projects ahead.

To start, I used a photo of myself to get a rough idea of how to align my basic features. The goal was to create a portrait as realistic and true to life as possible. I used different shapes, like ellipses, arches, and rectangles, to form the features, and added line strokes to bring in more detail.

Since I’m a computer science major, I wanted to add some movement and interactivity, instead of just making a still portrait. First, I made the eyes follow the cursor by adjusting their position as the cursor moved. At first, though, the pupils kept escaping the eyes, so I had to put some limits on the movement to keep them inside the eyes. Then, since I love flowers, I created a function that draws small flowers whenever the mouse clicks anywhere on the screen. This made it look like I was looking in the direction where each flower appeared, reflecting my interest and excitement for flowers. After every five flowers, I added a little celebration with confetti falling from above. Once the confetti finished, the flowers slowly started falling too. The user would then need to refresh the page to draw more flowers.

Ideally, I would’ve made the flower creation loop infinite, so the user wouldn’t have to refresh to make new flowers. However, I’ve been feeling really worn out with work lately, so I decided to leave it as is. The idea was that I needed to refresh before getting more work — since the project is meant to reflect me, not just being a simple program, it kind of shows that I need a break too.

Click anywhere to make flowers. I’ll be super happy if you can make 5 !

Highlights:

I think the highlight of my project was the confetti and the flowers falling down. It added a fun sense of celebration and reflected my love for flowers.

// confetti falling down if celebration has started
if (celeb_start) {
for (let i = 0; i < confetti.length; i++) {
confetti[i].y += confetti[i].speedY; // move the confetti down
confetti[i].x += confetti[i].speedX; // move the confetti horizontally to give a wavy effect
fill(confetti[i].color);
noStroke();
ellipse(confetti[i].x, confetti[i].y, 10, 10);
}

// removing confetti that has gone off the screen
confetti = confetti.filter(c => c.y < height);
}

// falling flowers after celebration
if (flower_count >= 5 && !celeb_start) {
celeb_start = true;

// pause for 1 second before the celebration starts
setTimeout(() => {
generateConfetti(); // start the confetti
}, 300);

// pause for 5 seconds after confetti
setTimeout(() => {
makeFlowersFall(); // making flowers fall
}, 3000); // confetti and delay time
}

// move the falling flowers
for (let i = 0; i < fall_flowers.length; i++) {
fall_flowers[i].y += fall_flowers[i].speedY; // make flowers fall
fall_flowers[i].x += fall_flowers[i].speedX; // adding horizontal drift to the flowers
drawFlower(fall_flowers[i].x, fall_flowers[i].y);
}

// removing flowers that have fallen off the screen
fall_flowers = fall_flowers.filter(f => f.y < height);
}

I also liked the idea of making the shirt with a round neckline using a skin-colored semi-circle (to extend the neck skin), which gave the clothes a more realistic look. This saved me time because creating the shirt itself with that structure would have been much more difficult than simply extending the neck.

Reflections, ideas for future work & Improvements:

I have slightly wavy hair and wanted to capture that instead of using simple straight line strokes. I tried using sin() functions to create the waves, but I couldn’t get it right due to time constraints. Since the thing I love most about myself is my hair, I really want to make it more realistic and true to mine. I also hope to make my bangs look more natural by using arches instead of line strokes.

I could definitely improve the aesthetics of the background and add a more appealing scenery. Since the theme of this portrait is all about flowers and positive vibes, I could create a garden in the background to complement that idea. Lastly, I’d love to make a full-body portrait with a nice dress in the future.

Project Concept

For my first assignment, I envisioned creating a  portrait using only one shape thats minimalist yet offers visual depth. I decided that pixel art was the perfect medium for this idea since Its built out of squares yet shading features help provide the sense of depth. Its structured grid format and the ability to control each individual “pixel” felt ideal for achieving the clean aesthetic I had in mind.

Challenges Faced

While my initial plan was to use nested loops to generate the grid and automate the process, as a complete coding beginner, I encountered errors that made it difficult to implement this approach. To overcome this, I decided to hardcode each pixel manually. This allowed me to fully control the placement and colors but turned the process into a labor-intensive task. Every pixel had to be individually positioned and assigned a color, which made the project take much longer than anticipated. It obviously isn’t ideal but I gained a hands-on understanding of positioning features , drawing features.

Key Takeaways

Despite the challenges, this project turned out to be a significant learning experience. Some of the key insights I gained include:

1. The necessity of loops and conditions: Hardcoding each pixel gave me total control, but it also highlighted how essential loops are for reducing repetitive tasks and improving efficiency in coding. When I wanted to change my background in the end, it wasn’t possible because that’d need me to hardcode everything all over again.
2. Improved understanding of p5.js positioning: By working manually on every pixel, I developed a solid understanding of how p5.js handles positioning and coordinates, which will undoubtedly help me in future projects.
3. Patience and problem-solving: This project tested my patience but also pushed me to find doable solutions when my initial approach didn’t work as planned.

 

Reflection

For this self-portrait, I wanted to create a clean, simple, and expressive representation of myself, combining basic shapes like ellipses, arcs, and rectangles. The goal was to balance realism and a playful, cartoon-like aesthetic while incorporating distinct features like a small beard, expressive eyebrows, and stylized hair. I focused on ensuring proportionality and seamless transitions between shapes, such as the neck connecting to the head and the shirt integrating an arc and rectangle for a polished look.

I’m proud of how the self-portrait turned out, as it reflects a good balance of simplicity and personal expression. The use of arcs and ellipses allowed me to create distinct facial features, and the small beard adds a unique touch to the design. However, there is room for improvement. In the future, I’d like to experiment with adding shading or gradients to enhance depth and realism. Additionally, I could explore animations, such as blinking eyes or a waving hand, to bring the portrait to life. This project has been a rewarding exercise in creative coding, helping me better understand shape integration and design principles in p5.js.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  // Drawing the neck
  fill(240, 200, 170);
  rect(180, 280, 40, 20);

  // Drawing the head
  fill(240, 200, 170);
  ellipse(200, 200, 150, 180);

  // Drawing the eyes
  fill(255);
  ellipse(170, 190, 30, 20);
  ellipse(230, 190, 30, 20);

  fill(50);
  ellipse(170, 190, 10, 10);
  ellipse(230, 190, 10, 10);

  // Adding eyebrows using arcs for expression
  stroke(50);
  strokeWeight(3);
  noFill();
  arc(170, 175, 40, 10, PI, TWO_PI);
  arc(230, 175, 40, 10, PI, TWO_PI);

  // Drawing the nose
  stroke(150, 100, 80);
  strokeWeight(2);
  line(200, 190, 200, 220);
  arc(200, 220, 20, 10, 0, PI);

  // Adding mouth
  noStroke();
  fill(200, 80, 80);
  arc(200, 250, 50, 30, 0, PI);

  // Adding a small beard below the mouth
  fill(100, 50, 30);
  arc(200, 280, 70, 30, 0, PI);

  // Drawing the hair 
  fill(50);
  arc(200, 150, 160, 120, PI, TWO_PI);
  rect(120, 150, 20, 80);
  rect(260, 150, 20, 80);

  // Drawing ears on both sides of the head
  fill(240, 200, 170);
  ellipse(125, 200, 20, 40);
  ellipse(275, 200, 20, 40);

  // Drawing a shirt 
  fill(100, 150, 200);
  noStroke();
  arc(200, 347, 100, 100, PI, TWO_PI);
  rect(150, 345, 100, 50);
}

 

 

 

For this project, I created an animated self portrait using  p5.js. The design uses basic shapes like ellipses, arcs, triangles and lines to create the structure of the face.

My 2 favourite things that I spent so much time on is the eyelashes as I had  a hard time adjusting the angles and the coordinates which I couldn’t just calculate, I had to just guess where to place them and see how it looks after running (trial and error).

Here’s the code snippet for the eyelashes:

stroke("Black");
strokeWeight(3);
line(160,170,150,145);
line(240,170,250,145);
line(180,170,190,145);
line(220,170,210,145);
line(170,170,170,142);
line(230,170,230,142);

I also like the interactivity of the portrait. By clicking the mouse, the eyes blink, and the face smiles and upon clicking again the face returns back to its original state.

Here is the portrait:

One thing that I’d like to improve is making the portrait more realistic as that’s what I wanted at first but couldn’t do as I had such a hard time figuring out the coordinates  and the best shapes to use to create the features (ex: the blush on the cheeks and the hair).

Concept

For the first assignment, I will present a simplified picture of myself using p5.js. I chose to cover my eyes in the portrait because I wanted to symbolize introspection and the idea of seeing beyond appearances, as I used in other mediums.

The highlight of the code I am proud of is this snippet:

//small detail in Abaya
 stroke('rgb(32,32,32)'); 
  strokeWeight(5);
 let dx = 256 - 210; // Difference in X
  let dy = 399 - 410; // Difference in Y

  // Adjusting both points by the calculated difference
  line(210 + dx, 410 + dy, 1006 + dx, 1198 + dy)

This is because it really required me to understand the coordinates to position the detail. Finding an accurate x and y coordinates to perfectly align the detail was pretty challenging, with the errors ruining the other details of the portrait. However, using console.log to track positions and fine-tune them allowed me to get it right.

Embedded Sketch

Reflections

 I think I need to improve more on the colors and the use of shapes since my current portraits lack depth and realism. In addition, I would also add a background and add a bit more details in areas like the headscarf. While the task comes with a lot of challenges and debugging to do, I do learn more about JavaScript than I realized, and hopefully, as I learn how to utilize other functions, like the console.log() function, and line(), the processes of learning JavaScript will slowly become easier.

 

 

 

The purpose of this assignment is to make a self-portrait using p5.js, I chose to create a visual representation of a swan. I wanted the sketch to portray a serene scene where a swan floats on water and the light blue background acts as the sky; using basic shapes such as circles, triangles, and rectangles to create a nice illustration.

I find the following part of the code the most interesting because I had to try many positions to fit the image I wanted to achieve on the swan’s head

// Beak fill('orange'); triangle(190, 180, 210, 180, 200, 170);

The layering of elements, such as the neck and head on the body, effectively mimics a real swan, while the colors chosen – light blue for the background, dark blue for the water, and white for the swan – create the harmonious visual effect I was hoping to achieve.

I plan to introduce several improvements to increase realism, such as adding shading or gradients to the swan’s body and neck to enhance depth and incorporating ripples in the water to give it a more dynamic look. Animations could also be a great idea to make the swan float smoothly on the water or move its neck gracefully.

The first assignment for Intro to IM asked us to make a self-portrait of ourselves using p5.js. I was really excited to do this assignment, and I enjoyed playing around with the different shapes and colors.

I wanted to create a nice background for my portrait, so I began by making a sunset scene. I used multiple rectangles to simulate the effect of a gradient, and then experimented with the colors to create a cohesive color scheme. I then used circles to simulate clouds and added more rectangles to create a window frame.

However, it soon turned out that making the background was the easy part, as I then had to start making myself.

I started by making the body. I used two shades of gray for the jacket to give my portrait some depth. I then used a similar technique with the shades of blue to create my scarf.

Making the face was objectively the hardest part, as getting the proportions right was very difficult. I ended using the quad() function to create the shape of my glasses, then filled them in with a semi transparent white shape to simulate glass. Although making the face was challenging, it was the most satisfying part, as it was rewarding to see all the aspects come together.

Throughout the assignment, I was struggling when trying to get the x and y-coordinates precisely where I wanted them. In the end, I used console.log to track the coordinates I wanted when I clicked in a specific place. While it was still challenging nonetheless, using this function made it much faster to implement.

Overall, I really enjoyed the process of doing this assignment, as it was very interesting to see the way I could use basic shapes to create something meaningful.

The concept :

I got the idea from this activity they used to make us do in middle school. Basically a message is written in blue, obscured by red scribbles. On placing a red cellophane paper over the design, we can see the hidden message. I wanted to do something similar to this image shown below (taken from JIANG’S BLOG – WordPress)

The design itself is a puzzle piece, where the portrait is hidden under the red scribbles. On viewing it over the red circle, the portrait is revealed underneath. I wanted to make it like a puzzle- me hidden under the red scribbles. Basically the red scribbles are absorbed in the circle, revealing the blue portrait. I drew it using most of the line tools, like arc, curves and quadrilaterals. I made it in this because I’ve heard a lot of people say that I am very hard to read (P.S; I have no idea why, I’m an open book I swear). Basically, I wanted to capture that essence into my portrait, in a way that is interactive to the users.

A highlight of some code that you’re particularly proud of :

I’m proud of the abstract style of the portrait, it’s pretty cool to look at (if I can say so myself) It was a bit hard to draw it with the curves and figure out the points exactly, but once I got the hang of it, it was pretty fun to do! I also really love the transparent red decoder circle; I feel like I managed to bring the paper and pen version into code pretty well!

Embedded sketch :

Reflection and ideas for future work or improvements :

Maybe I would make the portrait itself more detailed. Maybe once I understand how to code better I can improve it!! I also wanted to try and draw it in one continuous line, but that was a bit hard to do.

Reference: I used a picture of myself for official documents to help me vizualize the self-portrait

 

 

 

 

 

Reflection

This task was a really fun and creative way to dive into p5.js. At first, I was a bit nervous because the idea of creating a portrait entirely through code felt like a challenge. However, as I started working with the basic shapes, I realized how much fun it was to build my self-portrait step by step.

I began with simple shapes like ellipses for the head and hair, and a rectangle for the fringe. It was amazing how easily I could combine these basic elements to create the foundation of the portrait. Once I had the basic structure, I worked on adding details like the eyes, eyebrows, and nose.

My favorite part of the process was creating the blush effect on the cheeks. I used lines to make small strokes under the eyes, which gave the face a lot of character and expression. It felt like a small touch, but it made a big difference in bringing the portrait to life.

By the end of the task, I was surprised by how much I learned about coding and how creative you can be with simple drawing functions. One thing that bothered me is how time-consuming it can be to find the right “coordinates” on the canvas. It would have been helpful if I could hover over a specific spot where I’d want my object to start and see the coordinate number.

function setup() {
  createCanvas(400, 400);
  background(255, 182, 193);

  // Hair
  fill(110, 70, 50);
  ellipse(200, 225, 200, 290);
  
  // Head
  fill(240, 209, 190);
  noStroke();
  ellipse(200, 200, 150, 180);

   //Fringe 
  fill(110, 70, 50); // Same color as hair
  noStroke();
  rect(140, 110, 120, 30); 
  
  // Eyes
  fill(255);
  ellipse(170, 200, 30, 20); // Left eye white
  ellipse(230, 200, 30, 20); // Right eye white
  fill(150, 75, 0);
  ellipse(170, 200, 10, 10); // Left iris
  ellipse(230, 200, 10, 10); // Right iris
  
  // Blush under left eye
  stroke(255, 182, 193); // Light pink color for blush
  strokeWeight(2);
  line(150, 220, 155, 225); // First line
  line(160, 220, 165, 225); // Second line
  line(170, 220, 175, 225); // Third line

  // Blush under right eye
  line(220, 220, 225, 225); // First line
  line(230, 220, 235, 225); // Second line
  line(240, 220, 245, 225); // Third line

  // Eyebrows
  stroke(80, 50, 40);
  strokeWeight(4);
  noFill();
  arc(170, 190, 40, 30, PI + QUARTER_PI, TWO_PI - QUARTER_PI); // Left   eyebrow
  arc(230, 190, 40, 30, PI + QUARTER_PI, TWO_PI - QUARTER_PI); // Right   eyebrow


  // Nose
  noFill();
  stroke(150, 100, 90);
  strokeWeight(2);
  beginShape();
  vertex(200, 205);
  vertex(195, 225);
  vertex(200, 230);
  endShape();

  // Mouth
  noStroke();
  fill(180, 80, 90);
  arc(200, 260, 50, 30, 0, PI);

  // Earrings
  fill(255, 255, 0);
  ellipse(125, 220, 10, 10); // Left earring
  ellipse(275, 220, 10, 10); // Right earring

   // Shirt
  fill(245, 245, 220);
  rect(140, 340, 120, 80);
  arc(200, 340, 120, 80, PI, 0);
  
  // Neck
  fill(240, 209, 190);
  rect(175, 270, 50, 35);

}