Category: F2025 – Aya

For this assignment, I wanted to make an interactive self portrait that actually looked like me without overcomplicating it. I began by making the head, hair, neck, ears, and shirt using basic shapes. I wasn’t satisfied with how round the face was, especially at the chin, so I used the beginShape function to create a custom face that was sharper. I used blue and white ellipses for the eyes and a triangle for a simplistic nose. The pupils follow the mouse’s coordinates, but are clamped with the map function so they are forced to stay inside the eye.

Code Highlight

I wanted to make the portrait smile/frown depending on the mouse’s Y coordinate, so I made the mouth’s curve a custom shape that stretches from a predefined vertex to another using the quadraticVertex function. The first and second arguments of the function are the coordinates of the point that will “pull” the curve towards itself, and its Y coordinate depends on the Y coordinate of the mouse.

// Mouth
  stroke(150, 0, 0);
  strokeWeight(5);
  noFill();

  // Fixed corners of the mouth
  let x1 = 170,
    y1 = 285;
  let x2 = 230,
    y2 = 285;

  // Higher mouse = happy 
  // Lower mouse = sad 
  let controlY = map(mouseY, 0, height, 310, 260);

  // Mouth Curve
  beginShape();
  vertex(x1, y1);
  quadraticVertex(200, controlY, x2, y2);
  endShape();

Sketch

Reflection and Ideas

Overall, I’m happy with how the portrait turned out, since it balances simplicity with interactivity. The use of basic shapes combined with custom shapes gave me flexibility while still keeping the code manageable. I especially liked how the mouth animation added a sense of personality and expression to the face. For improvement, I would make the hair more natural by experimenting with arcs, curves, or irregular shapes rather than just rectangles and ellipses. Another possible improvement would be adding subtle shading or color gradients to give the portrait more depth and realism.

Fullscreen sketch

Main Concept / Background:

My original concept was to draw the most beautiful self-portrait that I’ve ever made in my life, because, honestly, I’ve only drawn the worst self-portraits ever my friends used to make fun of. So, I wanted to capture every tiny detail of my face as accurately as possible. This was my first plan. But, once I looked at my passport picture, I realized that it was not going to happen due to the complicated structure of my hairstyle. 

What I struggled with and How I overcame it:

During the ideation phase, I came up with the idea of trying to use as many different shapes as possible for my hairstyle to make it as realistic as possible. For example, I realized that the sides of my hair can be represented by two ovals tilted at 30 degrees to make fluffiness. The top of my hair can be imitated by a trapezoid, and the bottom sides can be represented by two opposite triangles. I also added the feature where users can move the top of my hair up and down because I wanted to incorporate a funny interactive element. At the same time, I embedded my personal wish that I don’t go bald in the future. You can make me bald by moving your cursor downward from the middle of the self-portrait! This is my self-portrait: 

I drew a Japanese flag and cherry blossom at each corner to represent Japan. It was really hard to locate each petal at the correct transformation (position and rotation). I first used for loops but they did not work in a way I wanted, so I calculated each position and rotation one by one.

My Favorite Code:

The part of the code that I particularly like is the sides of my hair composed of two ovals. I struggled to position and rotate them in a way that matched the structure of my face. After about  half an hour of searching methods online, I found three functions that were really useful for controlling transformations of those geometries. These functions are push(), pop(), and translate(). The translate() function allows you to reset the origin, while push and pop() allow you to apply changes only to specific objects you want. 

//sides of hair 
  fill(0); 
  stroke(0); 
  push(); 
  translate(x1, y1);
  rotate(10); 
  ellipse(0, 0, hairWidth, hairHeight); 
  pop();   
  
  push(); 
  translate(x2, y2);
  rotate(-10); 
  ellipse(0, 0, hairWidth, hairHeight); 
  pop();

 

Reflections & Future Improvements:

Since it was my first time using p5, it took some time for me to get used to some functions. But, after using the same geometry functions multiple times and exploring new functions that I’ve never seen before, I was able to build a solid foundation in how p5 works. Although I believe I could have made a better self-portrait, considering the fact that I am bad at drawing, I think I did relatively well this time!

In terms of future improvements, I think I should use for loops for the cherry blossom part to make the codes more readable and reduce repetition. I tried to auto-generate all five ellipses simultaneously, but due to strange positions and rotations, I was not able to achieve it, even  after I tried multiple times. Also, all the objects are not fully centered, so the shapes are slightly misaligned. Next time I create my self-portrait again, I want to reduce the number of values I use for positions of each shape and use more variables instead to centralize each shape and improve the readability of my code. 

When I saw the examples in class, I knew I wanted my self-portrait to have an element of fun. A touch of movement to make it more interesting. So after brainstorming I decided to add a small cute wink in it. I didn’t have any answers to how to do it or when it would happen, but I knew starting was the best way to develop the idea.

I started by building the background. I chose a beach scene because it’s bright, fun, and resonates with my personality. Using just four rectangles, I created the sand, sky, and beach.

Next, I focused on the structure of my portrait. I used an ellipse for the face, and for the neck, I initially tried combining a circle and rectangle. After exploring the documentation, I realised a rounded rectangle could give the same effect with fewer shapes, so I went with that.

Then, the sweater collar was created using two triangles, traced easily with the print(mouseX, mouseY) trick taught in class. The body was a simple rounded rectangle to echo the shape of the shoulders. Once the structure was in place, I added details such as the nose, eyes, and sweater textures.

Finally, I added the wink. I wanted the portrait to respond to time or interaction. I decided that whenever the cursor moves to the right side of the canvas, the portrait would wink. Hence, I set the if condition that when position of mouseX is greater than 300 (middle of canvas) then draw a different shape. If condition made this simple because the eye now has two states: open or closed.

if (mouseX > 300) {
    stroke('black');
    strokeWeight(2);
    line(315, 190, 325, 190); // closed eye line
  } else {
    circle(320, 190, 10); // open eye
  }

The hardest part of this portrait was the hair. I initially considered straight hair, but that looked too robotic. After several iterations, I decided on curly hair with circles on the ends to give a flowing effect. By leaving one side slightly incomplete, it adds the sense of wind moving through my hair.

In the future, I’d like to make the portrait even more dynamic: perhaps animated clouds or waves in the background, and more detailed facial features. I also hard-coded most values, so I want to explore making my code more dynamic and flexible, so changes in one area automatically adjust related elements.

My Concept:

I wanted to create a self-portrait that depicted my features using colors that i like such as burgundy and pink, and also using the basic p5 shapes. I wanted to make a piece that felt warm and friendly, so I chose soft pink and peachy colors. The goal was to make something that looks like me but also shows my personality through the style and colors.

Most basic shapes were a good fit for the features of the portrait. For instance, basic ellipses of varying sizes were a good fit for the eyes when overlapped with different colours. Additionally for the cheeks, lips, chin, and face shape ellipses were suitable. Thin rectangles were good for the eyebrows as well.

As for the hair, I used a new shape that I used chatGPT to recommend which is the bezier shape. The bezier shape has 8 parameters, every two being an x and y pair. The first and last coordinate pairs control where the bezier starts and ends, and the middle two control the pull of the curve.

Code Snippet:

bezier(350, 160, 380, 150, 300, 220, 170, 280);
bezier(300, 160, 320, 180, 380, 220, 155, 310);
bezier(400, 160, 110, 170, 260, 380, 190, 480);
bezier(190, 480, 150, 520, 210, 580, 240, 650);
bezier(240, 650, 200, 690, 260, 740, 230, 810);
bezier(230, 810, 190, 850, 250, 890, 220, 950);
bezier(390, 180, 100, 160, 240, 400, 170, 500);
bezier(170, 500, 130, 540, 190, 600, 220, 670);
bezier(220, 670, 180, 710, 240, 760, 210, 830);
bezier(210, 830, 170, 870, 230, 910, 200, 970);
bezier(400, 160, 115, 170, 280, 370, 210, 470);
bezier(210, 470, 170, 510, 230, 570, 260, 640);
bezier(260, 640, 220, 680, 280, 730, 250, 800);
bezier(250, 800, 210, 840, 270, 880, 240, 940);
bezier(400, 140, 115, 150, 280, 370, 210, 470);
bezier(210, 470, 170, 510, 230, 570, 260, 640);
bezier(260, 640, 220, 680, 280, 730, 250, 800);
bezier(250, 800, 210, 840, 270, 880, 240, 940);
bezier(400, 130, 115, 140, 280, 370, 210, 470);
bezier(210, 470, 170, 510, 230, 570, 260, 640);
bezier(260, 640, 220, 680, 280, 730, 250, 800);
bezier(250, 800, 210, 840, 270, 880, 240, 940);
bezier(400, 120, 115, 130, 280, 370, 210, 470);
bezier(210, 470, 170, 510, 230, 570, 260, 640);
bezier(260, 640, 220, 680, 280, 730, 250, 800);
bezier(250, 800, 210, 840, 270, 880, 240, 940);
bezier(400, 110, 115, 120, 280, 370, 210, 470);
bezier(210, 470, 170, 510, 230, 570, 260, 640);
bezier(260, 640, 220, 680, 280, 730, 250, 800);
bezier(250, 800, 210, 840, 270, 880, 240, 940);

The bezier curve is a new shape that i worked with. It has has four points each of which has 2 coordinates, x and y. First, the Start point: Where the curve begins, End point: Where the curve ends, Two control points: These are like invisible magnets that “pull” the curve in different directions to create the bend.

So in the context of my self portrait the first point would be, the top of my head, the last point would be the tip of my hair, and the middle two points are where the curves occur due to the pulling in those spots.

Embedded Sketch:

Reflections and Future Improvements:

Through this assignment I learnt more about how shapes and colours could overlap in p5.js to make dimension and depth. I also learnt about the bezier shape and it added a very creative element to my sketch.

As for future improvements, I hope to be able to start making for-loops instead of manually repeating the same structures and editing the coordinates. This will not only save time, but it will also give me a less error prone program, and will create some kind of symmetry in my work.

Project Overview

For this assignment, I created an interactive self-portrait that represents me both visually and personally. The portrait includes:

• My cartoonish face with long straight hair, eyebrows, eyelashes, nose, and mouth.
• Interactive eyes that follow the user’s mouse, which I am especially proud of.
• A background of colorful circles that symbolize “yarn cakes,” reflecting my love for crocheting.
• A small bunny plushie on the side, inspired by one of my crochet projects, including tiny stitched details to mimic real crochet stitches.
  

  Visual Documentation

  I started with an extremely rough sketch to plan what I wanted my self-portrait to look like and the placement of facial features, hair, and background elements. I also noted a couple of interactive elements I hoped to achieve. 

  

  I watched a YouTube tutorial to  learn the mouse-following pupil technique, which became the most interactive and technically exciting part of my sketch: YouTube tutorial. Honestly, I struggled a lot with this part, but I was determined to get it right. I tried to make the pupils move without leaving the eyes, and after lots of trial and error, I finally figured it out.

  The circles in the background represent yarn cakes, inspired by my hobby. Crocheting is similar to knitting, but instead of using two needles, I use a hook to create loops and form fabric.

  The little bunny in the corner represents one of my actual crochet projects, and I tried to include stitch details to mimic crochet.

  Interactive Features

  • The eyes follow the user’s mouse, giving the portrait a sense of life.
  • Users can move their mouse around the canvas to see how the pupils track it.

  Technical Notes

  • Eyes: Pupil positions are calculated by taking the difference between the mouse coordinates and the center of each eye, multiplied by a scaling factor to keep pupils inside the eyeball. This took me some time to get the hang of.
  • Hair & Face: Used basic shapes (rectangles, ellipses, arcs).
  • Background Yarn Cakes: Multiple overlapping circles of different sizes and colors, inspired by real crochet yarn balls.
  • Bunny Plushie: Ellipses for the head and ears, with short lines to simulate crochet stitches.

  Research, Tutorials, and Inspirations

  • YouTube tutorials helped with  the eye-following technique.
  • Crocheting inspired the yarn cakes and bunny, making the project personal.
  • I was inspired by examples given in class and wanted to create cartoon-style self-portraits similar to them.

  Coding I Am Proud Of

  I am most proud of the eye-following interaction, which made the portrait feel alive. My code for this feature is well-commented and included below. 

  //eyes
   stroke(0);
   fill("#FCC7D9");
   ellipse(170, 120, 30, 35); //left eye
   ellipse(230, 120, 30, 35); //right eye
   fill(255);
   ellipse(170, 130, 25, 20); //left eye
   ellipse(230, 130, 25, 20); //right eye
  
   fill(0);
   let leftPupilX = 170 + (mouseX - 170) / 40; // small movement toward mouse
   let leftPupilY = 130 + (mouseY - 130) / 40;
   ellipse(leftPupilX, leftPupilY, 10, 15); // left pupil
  
   let rightPupilX = 230 + (mouseX - 230) / 40;
   let rightPupilY = 130 + (mouseY - 130) / 40;
   ellipse(rightPupilX, rightPupilY, 10, 15); // right pupil
  

  Reflection

  I am really proud of myself because this is my first time ever coding. I learned a lot of new things and hope to improve along the way.

  I wish I could have animated the yarn cakes so they floated gently in the background while the eyes moved around, making the portrait even more dynamic. Linking the yarn cake movement to the eye-following interaction could create a more immersive experience, where the background reacts to the user.

  This would enhance the interactive and playful feel of the portrait, connecting personal elements to user engagement.

 

Fullscreen Sketch

Concept

For this assignment, I made a self-portrait using p5.js, the online editor, with codes learned in class. I started by placing an ellipse at the center of the canvas and added smaller ellipses to make the eyes, circles for the irises, a rectangle and two circles for the nose, and thinned arcs for the eyebrows and eyelashes. Then, I used ellipses to make the shirt and a circle to show the flesh connecting the neck and shoulders, and two ellipses for the ears. After this, I created a series of arcs, all with different radians and sizes, to create the curls on the front  and the rest of the hair in the back. At last, I used the “noStroke” code and added color to the background and all the shapes.

• • • • Favorite Codes
      • Although it isn’t the most creative or incredible code, I felt proud when I assembled the codes to create the structure of the face. I like the way the face, the neck, and the collarbone follow the founding shapes usually used for drawing sketches. While I am used to add more texture when I draw a person by hand or digitally, it is nice to see these shapes in a raw form, without any details or realism, and instead have a similar composition to a cartoon character. It was also fun to create the curls with the different variations of radians of the arcs.

         
        fill('#DA9758')
         circle(275, 333, 23);
         circle(325, 333, 23);
         rect(282, 258, 35, 85);
         circle(300, 338, 28);
         
         fill('white')
         ellipse(205, 250, 80, 30);
         ellipse(385, 250, 80, 30);

         

Embedded Sketch – Self Portrait

Reflection and Ideas for Future Improvement

One of the steps I struggled the most with was finding the right coordinates for the different shapes, especially when each shape had a different amount of values (for example, the circle only had three and the arc could have more than five). This was especially hard when I had to consider where in the canvas I wanted them and details such as height, width, etc. However, the more I practiced, the easier it became to mark said coordinates and sizes.

For the future I would like to learn how to further mold the different shapes to create more varied and distinct shapes. For example, instead of having to use the ellipses and the rectangle to make a neck and shoulders, I would like to understand how to create connected dots or merging shapes that can create this structure in a smoother, slightly more realistic way.

Portrait Concept

For my self-portrait, I decided to create a cartoon-esque representation of myself, with a background that evokes the feeling of entering another world in the viewer. The expanding circles in the background represent a portal, implying that the portrait is a view into another world. Aiming to give a sense of exploration, I wanted to add layers of interaction where the eyes follow the viewer’s cursor. The wandering of the eyes with the viewer are there to represent the curiosity of the character as they enter another world exploring their surroundings along with the viewer’s cursor. Combining the concept of dimensional portals, exaggerated cartoon features, and interactivity expresses my interest in making a portrait that feels alive and dynamic. The work aims to combine a static drawing with an experience where viewer becomes part of the artwork with their movement.

Code that I am Proud of  

//necklace
  fill('white');
  let necklace = [
    [210, 415], [220, 425], [230, 434], [245, 437],
    [260, 437], [275, 437], [289, 428], [294, 415]
  ];
  for (let bead of necklace) circle(bead[0], bead[1], 10);

  fill(125, mouseX, mouseY);
  let innerBeads = [
    [215, 420], [225, 430], [237, 437], [253, 437],
    [267, 437], [283, 434], [292, 423]
  ];
  for (let bead of innerBeads) circle(bead[0], bead[1], 10);

One of my priorities while coding is to keep my code clear and concise, as it ensures that later if there are any edits to be made I can easily identify the exact area that I need to modify and edit it with ease. While creating the circles for the necklace at the start I was creating one by one using the circle() function, which was taking a lot of time and was starting to look pretty repetitive, especially with all of them sharing the same size. At the start I decided to create a size variable to avoid having to change the size in every line if I wanted to change it. But then I realized that I was still repeating the circle() function, so I decided to create an array of the coordinates of each bead and creating a loop to place a circle in each of them. The resulting code was what I am particularly proud of off due to its efficiency and clarity.

Self-Portrait

 

Reflection

As my focus for this assignment was to get comfortable with the use of code for the purpose of drawing, I spent majority of my time experimenting with functions and made different stylistic choices without focusing too much on the concept and the story behind the work. For future assignments and projects I’d like to look into how to use the code to deliver a message or a story, which in turn would lead to me adding more interactivity and complexity to the piece as there would be a more clear path I am following while working. In particularly, I’d like to focus on adding an element of animation to a piece to give it life and create a more engaging feel to it.

Introduction to the Portrait

Last summer, I watched Dexter (the TV series), which has multiple seasons and sequels. I really enjoyed it, and it inspired me to create a portrait of the main character. I opened a picture of Dexter on my computer and worked on the portrait in p5.js on my MacBook while I was in the library. Since I already have some background in HTML, CSS, and JavaScript, I didn’t struggle much while making it.

A quick introduction to the character: he is a serial killer who targets other serial killers, following his own moral code. His ritual involves keeping trophies from his victims, specifically by collecting blood slides after cutting their faces. In my portrait, the rotating element around him represents those blood slides, one of his signature trophies.

Code that I liked

fill(255, 255, 255, 90)
translate(300,300)
let angle = frameCount * 0.01;
rotate(angle);
noStroke()
rect(225,10,150,80)

fill('#AC153A')
circle(300,50,50)

I really like how I managed to create certain details. For example, when I wanted arcs for the eyebrows or around the ears, I achieved them by covering parts of ellipses with skin coloured shapes. I used the same method for the mouth, ears, and eyebrows. That I think involves a lot of logic. More importantly, I applied some techniques I learned from a tutorial to make the blood slides rotate around Dexter, which I thought was a great touch. So, the code above showcases rotation of the blood sample based on the frameCount. By increasing the constant, the blood sample would rotate even faster.

Reflection

For improvements: I’d like to add more interactivity and animation in the future. For example, animating blood actually dripping down his face would be a really cool effect. I could also add knife animations circling around him. Since I’m so invested in the show, I like to think of this piece almost as a self-portrait of my interests and feelings at the moment of doing this assignment. It feels very personal and entertaining to me, even if that sounds a bit delusional. For future projects, I definitely want to experiment with WEBGL to explore a 3D space. That way, I could even create a full 3D knife kit for Dexter, or add other extra details.