Month: January 2026

My concept:

I added eye movement inspired by the Mona Lisa, where the eyes follow the viewer’s gaze. I chose pink as the background color since it is my favorite. I also added a touch of glitter and shimmer to the background because I grew up loving Barbie dolls, movies, and TV shows. Finally, I included my house cats, who love my family unconditionally.

“The most personal is the most creative.” — Martin Scorsese

A highlight of some code I am particularly proud of

The code I am most proud of is the eye movement:

let leftEyeX = constrain(map(mouseX, 0, width, -75, -55), -75, -55);
let leftEyeY = constrain(map(mouseY, 0, height, -8, 8), -8, 8);
let rightEyeX = constrain(map(mouseX, 0, width, 55, 75), 55, 75);
let rightEyeY = constrain(map(mouseY, 0, height, -8, 8), -8, 8);

circle(leftEyeX, leftEyeY, 38);
circle(rightEyeX, rightEyeY, 38);

Embedded sketch:

 

Reflection and ideas for future work implementations:

I really enjoyed the process. I learned a lot from this project, such as utilizing the for loop for adding glitter and shimmer. In the future I would like to add learn how to utilize the JavaScript Computer Vision and Detection libraries, such as ML5.js and face-api.js, to make more interactive to the audience. I would also want to make more detailed and add a bit more shadows.

Concept

For this project, I wanted to create more than just a static self-portrait. My concept was to build a “digital puppet”. A TV show host personality that lives inside the browser.
The goal was to achieve a level of “aliveness” using generative motion (breathing, blinking, head bobbing) and interactivity.

I wanted the character to react to the user’s cursor, shifting from professional composure to excitement depending on how the viewer interacts with the canvas.

I am particularly proud of the interactive expression system. Here is the logic that detects where the mouse is and calculates the “target” emotions, blending them smoothly over time:

 

// === INTERACTIVE EXPRESSIONS BASED ON MOUSE POSITION ===

// Define interaction zones
let mouseInSmileZone = mouseY > height * 0.6 && mouseY < height * 0.85; 

// SMILE: If mouse is in the lower portion, target a big smile
if (mouseInSmileZone) {
  targetSmile = map(mouseY, height * 0.6, height * 0.85, 0.3, 1.0);
  targetEyebrowRaise = 0.3; // Slight eyebrow raise when smiling
} else {
  targetSmile = 0.1; // Return to subtle default smile
  targetEyebrowRaise = 0;
}

// Smooth transitions to make it feel natural
smileAmount = lerp(smileAmount, targetSmile, 0.1);
eyebrowRaise = lerp(eyebrowRaise, targetEyebrowRaise, 0.1);

 

This code allows the smile to grow gradually as the mouse moves lower, and pulls the eyelids into a “happy squint” simultaneously, making the reaction feel genuine rather than robotic.

Reflection and Future Improvements

This process taught me how much detail goes into simulating “life.” A simple sine wave can simulate breathing, and a random timer can simulate blinking, but combining them is what creates the illusion of a living character. One significant challenge was the hand, getting the fingers to look anatomical while being drawn with code.

For future improvements, I would like to add Audio Reactivity. Perhaps connect the mouth movement to the microphone so the character can “lip sync” to my voice.

 

My Concept:
For my first project in Intro to IM, I decided to create a representation of myself using only 2D shapes in p5.js for my self-portrait. My goal was to use simple shapes to create the representation using the elements and colors for the face details, hijab/shailah, and abaya. Initially, I wanted to create a yellow bird or a kitten, but when I started writing the code for the face structure, I wanted to create something comparable to myself while challenging my skills. I then changed the shapes and sizes to fit the way I want to portray myself on this canvas. When frustrated or confused, I usually frown without noticing and my cheeks get really hot and red, which is why I wanted to capture myself in this specific emotional state.

How this was made:
Resources: In the second IM class, Professor Mang went through p5.js which I found extremely helpful because I was able to navigate the platform better. I started experimenting with the codes and different forms of digital art I could make. Unfortunately, I had some work that wasn’t saved, so I couldn’t go back to review it. I also found the technical readings link 1 link 2 helpful, throughout my process, I was going back and forth to create the lines or shapes.

I started this sketch by creating the background and then the face shape and hijab. I used basic 2D primitives like lines, ellipse, and arc for my face details. I began with a large black ellipse for my shailah in the background and my face. At first, my head looked like an exact circle but after adjusting the values a couple of times, I was able to change it slightly to a more oval shape that felt more natural. I then worked on the details of my face like my eyes, pupils, nose, mouth, and cheeks. While I found it confusing at first to figure out the math, I searched for a 400×400 graph to help with the placement which made the process easier for me because I had many trials figuring out the size, shape, and position of the eyes and nose for example.

I learned how to create the smile using the arc() function. Even though I experimented with different types of shapes and lines for the mouth, I wasn’t satisfied with the results, so I stuck with this one. I used the arc() with PI, which draws part of a circle and allowed me to create a subtle smile.

I also learned about the stroke() and noStroke() commands which I was proud of. When using stroke () it controls the outline of a shape, so when adding noStroke() it completely removes the outline. I used this for the cheeks to create a softer and more natural look. When I put the noStroke () command, all the shapes lost their outlines, so I decided to move the cheek commands to the bottom but it was still removing all the outlines from all the other shapes. This is when I realized that I must include the stroke() command for the shapes I want to keep the outline, in this case it was the eyes.

Embedded sketch:

function setup() {
  createCanvas(400, 400);
}
   function draw() {
   //update background color to pink
   background(200, 150, 200);
  
   //my scarf- shailah in black
   fill("black");
   ellipse(200,200,240,270); //x,y: center 250,250: width,height
   fill("white");
   fill("black");
   ellipse(200,250,100,350);
  
   //my abaya
   fill("black");
   ellipse(200,400,350,145);
     
   //my face, the base
   fill("#E5C9A0");
   ellipse(200,200,190,230); //putting it in the middle: x,y,w,h
     
   //my eyes 
   stroke(0);
   fill("white");
   ellipse (160,180,40,30); //left eye
   ellipse (240,180,40,30); //right eye
   //my pupils
   fill("black");
   ellipse (160,180,18,18); //left
   ellipse (240,180,18,18); //right
     
   //eyebrows
   stroke(0);
   fill("black");
   line(140,155,180,150); //left
   line(220,150,260,155); //right

   //my nose
   stroke(0);
   line(200,235,195,235); //long line
   line(200,199,210,235); //short line
   
   //mouth
   noFill();
   stroke(0);
   arc(200,260,60,30,0,PI); //x,y,w,h,startAngle0: start of curve,endAngle PI: half circle-end of curve
     
   //cheeks
   noStroke();
   fill("rgb(197,122,135)");
   ellipse(160,220,30,15); //left
   ellipse(250,220,30,15); //right
     
}

 

The code I’m proud of:

<//my nose
stroke(0);
line(200,235,195,235); //long line
line(200,199,210,235); //short line>

I know that it’s simple, but for some reason I spent a long time trying to figure out how to create the nose. At first, I created a triangle with 2 lines like this /\ but this wasn’t the nose I was looking for, so I decided to create the nose I normally see in simple illustrations and cartoons using one long and one short line. I had trouble finding the right coordinates because sometimes the line would reach the top of the canvas board and then it would disappear and then it would be short. This challenge led me to use a 400×400 grid again to help me understand the positioning better.

Reflection:

I enjoyed doing this mini project. At first, I was procrastinating and stressing all weekend about how I would use code to create a self-portrait, but the process turned out to be much more manageable than I expected. I am proud with how the final piece turned out. In the future, I would love to add motion or interactivity like making the eyes follow the mouse or the facial expressions change when the mouse is clicked. As I learn and become more confident with coding, I would like to revisit this project and create a more advanced version to reflect my growth in the course.

Concept

I wanted to create a self portrait that genuinely reflects who I am. I love the color green, and for some reason sticking my tongue out has become a small habit of mine whenever I do not know what to say or when I am in an awkward situation. It works as my personal ice breaker. On top of that, I had never animated anything before and had never programmed in JavaScript. Because of this, I decided to challenge myself by animating the tongue in my self portrait.

Click on it!

Implementation

For the self portrait overall, I used basic geometric shapes such as ellipses and circles, mainly working with the stroke of ellipses. For the bangs and the eyelids, I was inspired by this self portrait example by fenfenrita that I found on p5.js. From that example, I learned that you can use only the stroke of an ellipse to create curved lines and that by adjusting the numerical values you can control how stretched or flattened the stroke looks. I experimented extensively with this technique for the eyelids and later applied it to the eyebrows, nose, and mouth.

For the bangs, that same example, combined with experimenting with PI, TWO_PI, and HALF_PI, helped me understand how ellipses and circles can be partially filled using angles. I adapted a similar code structure and adjusted the size, position, and colors to match my own portrait.

Since I have a background in graphic design, I am used to working with HSB color mode, so I changed the color mode at the beginning to keep the entire portrait consistent. For more specific colors, I searched for their hex codes online and used them directly. The rest of the code was taken from the p5.js library. For the animation, I used the mousePressed function and created a tongueOut function so that the tongue only appears when the self portrait is clicked.

Code I Am Proud Of

// Tongue animation
let tongueOut = false;

// Tongue out or in when clicked
if (tongueOut) {
  fill("#C76A6A");
  noStroke();
  arc(305, 372, 40, 55, 0, PI);
}

//Tounge animation
function mousePressed() {
  tongueOut = !tongueOut;

I am especially proud of how I managed to make the tongue animation work, because deciding how to implement it took a lot of trial and error. At first, I wanted the tongue to move along the x axis of the mouse as it moved across the screen. However, this required setting limits, otherwise the tongue would move outside the mouth area and even beyond the canvas. When I finally achieved this, I did not like the result because the movement was not very noticeable unless the mouse moved a lot.

After experimenting more, I explored other mouse related functions and realized that using mousePressed would allow the tongue to appear and disappear completely. This interaction felt much cleaner and more intentional, so I decided to implement it this way.

Reflection

Overall, I really enjoyed this project and learned a lot, especially considering it was my first time using a program like this and my first time discovering that it is possible to draw using code. I understood everything I was doing, and the more I played with numerical values and visual elements, the more connected I felt to my own drawing. For a future project, I would like to challenge myself even more by creating animation without using the mouse and by experimenting with different types of shapes.

Concept

I decided to create myself as a pink crab on the beach. Instead of a traditional self-portrait, I wanted to make something that represents me through the things I like: the crab is my favorite animal, pink is my favorite color, and I like going to the beach! The beach is also a nod to my home country, The Philippines, which is known for having beautiful beaches.

My Final Portrait!

Code that I’m Proud Of

// claws
fill(227, 115, 131);
let biteSize = PI / 16;
let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
let endAngle = TWO_PI - startAngle;

// left claw
push();
translate(width / 2 - 60, height / 2 - 50);
rotate(radians(330));
arc(0, 0, 45, 45, startAngle, endAngle, PIE);
pop();

// right claw
push();
translate(width / 2 + 60, height / 2 - 50);
rotate(radians(210));
arc(0, 0, 45, 45, startAngle, endAngle, PIE);
pop();

This is the code I’m particularly proud of. I wanted my crab to have the motion of snapping its claws. So, I went on the p5.js reference page to look for something that would help with that. I found a coding reference for a Pac-Man style animation on the arc() section and decided to use that but I had to double and shift it to my liking and what’s fitting for my crab.

How this was made

For the background, I wanted to split the sky and the sand so I used rectangles and to slip them evenly, I just set the size to divide by the height accordingly. To add more of a “beach-y” feel, I added sun (using ellipse), clouds (using ellipse as well), and a beach umbrella (using rectangle and arc). For my crab, I split the body into two arcs because I wanted it to have different colors. For the face, I used two identical black ellipses and for the mouth, I used arc. Now for the legs (the part I spent quite a bit of time on), I used rectangles and had to manually shift each of them accordingly and because of that, some parts appear to be a bit uneven. Throughout the code, I learned to use  PI to control how arcs are drawn, since p5.js uses radians, and it allowed me to create half-circle for the body, smile, and claws. I also used push() and pop() to isolate translate() and rotate() so each part could be shifted independently without affecting the rest of the sketch.

Reflection and Future Improvements

I learned a lot useful coding skills from making this assignment and the p5.js reference page was a huge help. I feel more comfortable with p5.js and navigating myself on the reference page. With more practice, I’d like to learn more animations like clouds drifting or my crab moving sideways, and if there are ways to duplicate or mirror a function (concerning my crab’s legs) to save more time and make sure everything is perfectly even.

link

function setup() {
  rectMode(CENTER);
  angleMode(DEGREES);

  createCanvas(600, 700);
}

function draw() {
  background(255);

  //   hair
  fill(61, 13, 6);
  rect(300, 400, 600, 800, 200);

  //   neck
  noStroke();
  fill(209, 166, 146);
  rect(300, 500, 200, 200);

  //   head
  stroke(33, 6, 4);
  strokeWeight(3);
  fill(209, 166, 146);
  ellipse(300, 300, 360, 450);

  //  nose
  noStroke();
  fill(219, 199, 186, 87);
  triangle(350, 360, 300, 270, 250, 360);

  //   eyes
  noStroke();

  fill(254);
  ellipse(220, 240, 90, 70);

  fill(254);
  ellipse(370, 240, 90, 70);

  fill(97, 48, 16);
  ellipse(220, 230, 35, 40);

  fill(97, 48, 16);
  ellipse(370, 230, 35, 40);

  //   ears

    noFill();
    stroke(209, 166, 146);
    strokeWeight(12);
    arc(120, 300, 70, 80, 30, 14, CHORD);

    stroke(209, 166, 146);
    strokeWeight(12);
    arc(480, 300, 70, 80, 30, 14, CHORD);

  // airpods

  fill(5, 0, 0);
  rect(100, 300, 100, 170, 20);

  fill(5, 0, 0);
  rect(500, 300, 100, 170, 20);

  fill(145, 17, 173);
  rect(100, 200, 60, 200, 5, 5, 100, 100);

  fill(145, 17, 173);
  rect(500, 200, 60, 200, 5, 5, 100, 100);

  fill(145, 17, 173);
  stroke(145, 17, 173);
  strokeWeight(50);
  curve(73, 120, 500, 120, 274, 1, 50, 50, 50, 100, 10, 100);
  fill(145, 17, 173);
  stroke(145, 17, 173);
  strokeWeight(50);
  curve(10, 120, 96, 106, 274, 1, 50, 50, 50, 100, 10, 100);

  //  lips
  noStroke();

  stroke(130, 12, 12);
  strokeWeight(7);
  fill(145, 39, 39);
  arc(305, 410, 150, 100, 0, 180, CHORD);

  //   brows
  noStroke();
  fill(64, 17, 14);
  rect(215, 180, 80, 10, 50);

  fill(64, 17, 14);
  rect(365, 180, 80, 10, 50);
}

For this project, I created a self-portrait of mine.  My goal was to use only basic shapes (rectangles, ellipses, triangles, and arcs) to represent my facial features and a few signature details: my hair, bold lipstick, and big headphones.

The part I’m most proud of is the headphone area. I used rectangles for the ear pieces and thick curves for the band to suggest a 3D shape using only 2D primitives:

// airpods fill(5, 0, 0); rect(100, 300, 100, 170, 20); fill(5, 0, 0); rect(500, 300, 100, 170, 20); fill(145, 17, 173); rect(100, 200, 60, 200, 5, 5, 100, 100); fill(145, 17, 173); rect(500, 200, 60, 200, 5, 5, 100, 100); fill(145, 17, 173); stroke(145, 17, 173); strokeWeight(50); curve(73, 120, 500, 120, 274, 1, 50, 50, 50, 100, 10, 100); fill(145, 17, 173); stroke(145, 17, 173); strokeWeight(50); curve(10, 120, 96, 106, 274, 1, 50, 50, 50, 100, 10, 100); The reason I chose this specific chunk of code is because it turned out to be exactly the way I wanted it to look like. The rectangles stack together to feel like ear cups and stems. The thickcurve()lines work as the headband, wrapping over the hair. Reusing the same purple color for all the headphone parts makes it look like one connected object even though it’s made of separate shapes.

I started by setting up the canvas and using rectMode(CENTER) so positioning the neck and hair was easier. I built the face using an ellipse for the head and a rectangle for the neck. I added features (eyes, nose, lips, brows) with ellipses, a triangle, an arc, and rectangles. The hair is a large rounded rectangle in the background. For the AirPods, I experimented with curve() and thick strokeWeight to make a band that feels like it wraps over the head. I didn’t use any image files, textures, or external assets, just p5.js drawing functions.

Breaking everything down into simple shapes helped me understand coordinate systems and layering in p5.js. Also, using consistent color palettes made the portrait feel more cohesive. I would make the sketch more interactive next time. For example: eyes following the mouse, or changing lip color with a key press.

Concept:

Lately, on my TikTok feed, I keep seeing these square profile pictures which look really cute. I tried to generate my own version of it online, but then the website required me to use Flash… which I do not have. Oops. So, when I was coming up for an idea for my self-portrait during lab on Thursday last week, I thought I could probably just make this by myself, right?

I wanted to make three different versions of the profile picture: one that (somewhat) resembled me normally, one that resembled me when I am tired (me 70% of the time) and one that was fun and colorful. I would use the same base code, so that I wouldn’t need to make completely different faces, but would change some aspects so that the faces would still have some clear changes (e.g. closed vs. open eyes, different color schemes, accessories etc.).

To switch between the three different faces, I would make buttons at the bottom of a screen as a panel. I wanted to make each face more interactive, but I was worried that it would interfere with the faces and the buttons programming, so I’ll work on it once I learn the language better.

Process:

Firstly, before actually deciding on the panels and buttons, I had to figure out how I was even going to code the face. I started with the hair as the background color, making a long ellipse for the face and then adding circles for the bangs. After, I created the eyebrows and eyelids with even more ellipses (I think I may have abused the ellipse() tool…), and the eyes on top (for layering purposes). I used the ellipse with noFill() to create the glasses, and then to make the mouth, I used triangles. Most of the face was just trying and testing out shapes and coordinates, which took me around two hours. However, once I figured out the first face, it didn’t take me that long (only an hour or so) to edit and modify the other faces.

To make it easier, I also coded a line to make sure I could navigate the coordinate system better rather than trial and error-ing again and again.

For the third face, I used this code for the star hair clip. I struggled quite a bit, but I asked one of my friends for help, and we came up with this:

function star(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}
    strokeWeight(3);
    fill(255, 247, 161);
    star(200, 220, 70, 150, 5);

After, I had to create the buttons. I created a new file (so I could just copy and paste the face codes into the file after I programmed the buttons), and I used this as the code:

let currentScene = 1;

let btnSize1 = 200;
let btnSize2 = 150;
let btn1X = 20,btn1Y = 725;
let btn2X = 240,btn2Y = 725;
let btn3X = 460,btn3Y = 725;

 function setup() {
  createCanvas(700,900);
 }
  
 function draw() {
  background(220);
  
//state
  
  if (currentScene === 1){
    drawImage1();
  } else if (currentScene === 2){
    drawImage2();
  } else if (currentScene === 3){
    drawImage3();
  }
   
// panel
   
  fill(251,251,251);
   noStroke();
  //x y w h
  rect(0, 700, 700, 200); 

// buttons
   
   //1
  fill(217, 93, 83); 
  rect(btn1X, btn1Y, btnSize1, btnSize2);
  fill(0);
   
   //2 
  fill(161, 126, 140); 
  rect(btn2X, btn2Y, btnSize1, btnSize2);
  fill(0); 
   
   //3
  fill(66, 164, 255); 
  rect(btn3X, btn3Y, btnSize1, btnSize2);
  fill(255);

 } 
  function mousePressed(){
    
  //button 1
    
  if (mouseX > btn1X && mouseX < btn1X + btnSize1 && mouseY > btn1Y && mouseY < btn1Y + btnSize2) {
    currentScene = 1;
  }
    
  //button 2
    
    if (mouseX > btn2X && mouseX < btn2X + btnSize1 && mouseY > btn2Y && mouseY < btn2Y + btnSize2) {
    currentScene = 2;
  }
    
  //button 3
    
    if (mouseX > btn3X && mouseX < btn3X + btnSize1 && mouseY > btn3Y && mouseY < btn3Y + btnSize2) {
    currentScene = 3;
  }
    
}
   
function drawImage1(){
  // code for first expression;
  
}

function drawImage2(){

// code for second expression;

}
   
function drawImage3(){
 
// code for third expression;

}

   

note: I realized I put the wrong coordinates for the buttons, so now there's more space on the right than the left. I'll fix it soon.
note2: I used the resources from p5.js tutorials, references and examples for most of the code.

Reflection and Possible Improvements:

I had been pushing this off for a while because I was scared it would take too long and I would not be able to create something I would be satisfied with. However, I think this turned out better than I expected! I’m happy with the button interaction and the facial expressions.

I really do want to work with adding more interactivity in the future and maybe also coding an animation (such as spinning the star and flower hair clips in the ‘happy’ expression or waking my picture up for the ‘tired’ expression). I would really like to experiment with adding more features once I become more confident with loops and putting commands within commands, since the many lines of code for each face threw me off and made it hard for me to navigate where one command started and ended. (Oops.)

• My concept of the self-portrait assignment is me as a bird. I have seen a lot of videos online with cute birds lately, so this is the first thing that came into my mind. The bird is eyeing the worm, which is a pink oval moving together with the mouse.

• function setup() {
    createCanvas(400, 400);
  }
  
  function draw() {
    background(204,255,255);
    
  
    fill(102, 255, 255)
   circle(130,280,100);
    
      fill(102, 255, 255)
   circle(270,280,100);
    
    
    circle(180,210,50);
    fill(102,255,255)
    circle(200,320,200);
     fill(102,255,255)
    circle(200,200,150);
    fill (255,204,255);
     fill(255)
    circle(170,190,20);
  fill(255)
    circle(225,190,20);
    ;
    fill (250,250,0)
   triangle(200,190,200,210,230,200)
  
    
    let moveX=constrain((mouseX - width / 2), -4, 4);
    let moveY = constrain((mouseY - height / 2), -4, 4);
    // pupils
  fill(0);
  
  // left pupil
  circle(170 + moveX, 194 + moveY, 10);
  
  // right pupil
  circle(225 + moveX, 194 + moveY, 10);
    
    
    textSize(32);         
    fill(0);               
    text("I am a bird!", 100, 100);
    
     fill(255,255,255)
   circle(200,350,130);
    
    //worm
      fill(255,204,229)
   ellipse(mouseX, mouseY,80,40);
  
  }

• A code that I am proud of is the one that makes the bird’s pupils move alongside the “worm”. I had to look up how to constrain the pupils within the eyes so they would not move all around the canvas:
• let moveX=constrain((mouseX – width / 2), -4, 4);
  let moveY = constrain((mouseY – height / 2), -4, 4);
  // pupils
  fill(0);// left pupil
  circle(170 + moveX, 194 + moveY, 10);// right pupil
  circle(225 + moveX, 194 + moveY, 10);
• Embedded sketch:
• Link to sketch
• “How this was made”: I have created the body of the bird using simple circles. The face of the bird was also created using simple shapes – eyes and pupils are circles, while the beak is a triangle. At first, I had forgotten math, so I had a hard time understanding the coordinates of the triangle, but I figured it out after asking the Professor. We have learned the mouseX,mouseY function in class, so I had the idea to make some sort of an interactive object in the sketch. I decided for it to be a worm since birds like to eat worms. Only the worm moving felt a bit strange, so I decided to make the bird’s pupils move as well. I looked up the constrain function in the Reference page, but had a hard time understanding it, so I used AI to break it down. After I figured it out, I had the bird’s pupils moving.
• Reflection and ideas for future work or improvements: Use something more complicated than 2D shaped to draw, focus on breaking down the functionality of the code first to fully grasp what each part of the function is responsible for.

Concept:

For this self-portrait assignment, I drew Anpanman, one of my favorite cartoon characters from childhood. Many of my friends say I look like him, so I chose him as a playful version of my self-portrait. I also admire his optimistic, outgoing personality, and I want to reflect that feeling in my work. My goal for this assignment was to learn how to use p5.js, since I had never used it before. Through drawing with code, I practiced working with coordinates and basic programming logic, and I learned how to build an image step by step using simple shapes. Since my birthday is coming up, I also designed this piece as a small birthday gift card for myself.

How this was made:

I created this image using p5.js. I started by drawing Anpanman’s face. For the face color, I asked ChatGPT to help me find the exact color values, and I used the p5.js reference to learn how to make the shape and remove the stroke. Next, I drew the nose and cheeks. Since they are also circles, that part was fairly straightforward. After that, the eyebrows were the hardest part. Even after checking the reference image, I was still confused about how to code the correct shape. I asked ChatGPT for help, but the code it suggested was too complicated for me to understand. So I went back to the p5.js reference and experimented on my own. After about 15 minutes of trial and error, I finally got the eyebrow shape I wanted. For the mouth, I followed the reference image for the shape, but I asked ChatGPT for help with the mouth color because I tried several times and still couldn’t match the shade I wanted. For the remaining details—highlights, clothing, and buttons—I mainly relied on the p5.js reference and built them using simple shapes.

The part I’m proud of:

The part I’m most proud of is the eyebrows. They weren’t a simple shape, and using arcs was harder than I expected. I had to manage a lot of details—especially the angle and the coordinates—and I kept getting confused about where everything should go. After many tries and small adjustments, I finally found the right position, curve, and angle that looked correct and made me feel satisfied.

//left eye brow
 noFill();
stroke(20);
strokeWeight(3);
arc(117, 135, 50, 65, PI, TWO_PI);

//right eye brow
arc(183,135,50,65,PI,TWO_PI);

Reflection and ideas for future work or improvements:

I think I could improve this project by adding more detail to the clothing and including some interactive animation. Since this was my first time using p5.js, there are still many skills I want to develop. In future work, I hope to incorporate more of my own creative ideas and make my drawings more detailed, polished, and well organized.