Category: S2026 – Mang

Concept

This work was inspired by painting of famous Dutch painter Vincent van Hogh’s painting, The Starry Night. The Starry Night painting is the background image of this program. Using curves and colors, an illusion of the blurriness is created. For and while loops where used to create the curves. The mouse can be pressed to switch between two modes: Random mode and Controlled mode. In the natural state, the work in the a random state where translucent curves are randomly placed on the painting to create the illusion effect. When the mouse is pressed, the image changes into controlled state where the user can control the parts of the painting to blur by moving the mouse.

 

Code I’m proud of

This is the function used to create the controlled and random translucent curves. In the controlled curves, the mouse input is used to control the movement of the curves and in the random curves, random numbers are generated to shape the curve.

// Controlled curves in the y axis
function create_curves_y(startx) {
  let a = mouseX;
  let b = mouseY;
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(startx, 0, a, b, (a + startx), (b + startx), startx, 400);
}

// Curves in the x axis
function create_curves_x(startx) {
  let a = mouseX;
  let b = mouseY;
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(0, startx, a, b, (a + startx), (b + startx), 600, startx);
}

// Random curves in the y axis
function r_create_curves_y(startx) {
  let a = random(600);
  let b = random(400);
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(startx, 0, a, b, (a + startx), (b + startx), startx, 400);
}

// Random curves in the x axis
function r_create_curves_x(startx) {
  let a = random(600);
  let b = random(400);
  noFill()
  strokeWeight(20)
  stroke(c)
  bezier(0, startx, a, b, (a + startx), (b + startx), 600, startx);
}

 

Code

Here is the work of art I created:

Reflection

The code can be improved by mapping colors to the curves to make the translucent effect stand out more. More shapes and curves can be added to enhance the effect. This can method can also be transferred to other images.

Concept

Generative art seems very modern and new to me: creating art using your computer and element of randomness sounds like something that has no association with older times.

I wanted to create a minimalistic piece that will carry the atmosphere of the age when a laptop at home was a rare find, and when old Windows 7 and DVD players were considered super cool.

I found my inspiration in Klim Type Foundry art-piece and wanted to recreate something similiar.

I decided to make my art minimalistic and more “mathematical”: I have only two colors, blue and white, strokes and lines, shapes, and a lot of numbers which display the coordinates of the figures.

The computer randomly chooses the type and the coordinates of the figure and draws it, then randomly connecting it with other figures by making it either the endpoint of the bezier curve, or the endpoint of its control line. The figures and lines appear slowly, and move around, displaying their coordinates on top.

Code

Implementing the animation of line drawing was the most difficult part for me, so I want to highlight it:

//draw connections between objects
for (let c of connections) {
  // animate t from 0 to 1 
  // existing lines stay at 1 (fully drawn)
  c.t = min(c.t + 0.02, 1); 

  noFill();
  stroke(255);
  strokeWeight(1);

  beginShape();
  // draw the curve based on the current value of t
  //the loop will increment t, therefore moving (x,y) to the second enpoint, allowing a smooth animation
  for (let t = 0; t <= c.t; t += 0.02) {
    let x = bezierPoint(c.a0.x, c.p0.x, c.p1.x, c.a1.x, t); 
    let y = bezierPoint(c.a0.y, c.p0.y, c.p1.y, c.a1.y, t); //save coordinates of a segment of the curve being drawn
    vertex(x, y); //add x,y up to which the curve will be drawn
  }
  endShape();
  
  //do the same for the control lines: it also will be drawn slowly based on t
  let h1x = lerp(c.a0.x, c.p0.x, c.t);
  let h1y = lerp(c.a0.y, c.p0.y, c.t);
  line(c.a0.x, c.a0.y, h1x, h1y);

  let h2x = lerp(c.a1.x, c.p1.x, c.t);
  let h2y = lerp(c.a1.y, c.p1.y, c.t);
  line(c.a1.x, c.a1.y, h2x, h2y);
}

To animate the connections smoothly, I used a normalized time variable, t. Here, t = 0 is the start of the path, and t = 1 is the end. Every frame, value of t of every connection is being incremented by 0.02, revealing 2% more of the path.

For the straight lines I used method lerp(), and for the curves I used bezierPoints(). In the loop coordinates of the current endpoint are slowly increasing from 0 to 1, in the end connecting the first point with the last one, as the coordinates of incremented moving point become the same as the endpoint’s. This creates the illusion of the curve being drawn over time.

Beside that, the structure of the code is pretty simple. I created a class for the figures with methods to create, draw, and move the figures around. After that I connected the figures with lines, and stored all the objects and connections between them in arrays. There’s a lot of randomness in the code: the choice of the velocity of the figure, its shape and which figures it will be connected with lies on the computer, not the user.

Reflection

I find this minimalistic and simple art piece very hypnotizing and interesting. Even though it’s super simple, I can feel the emotions and atmosphere I wanted it to have.

However, I think that improving connection between figures and making it more smooth and less crunchy would be great. Also, finding an algorithm that would allow these figures to move around without overlapping would make the art less messy.

For further improvement, I think that adding sound effects and gravitating the points and lines in a certain pattern that creates some clear shapes of animals/objects would be extremely cool.

Before watching the video, I assumed that “randomness” in art meant something purely spontaneous—an idea that suddenly appears in an artist’s mind. After watching it, I started to understand randomness differently. In generative work, the artist often writes a set of rules or instructions for a computer (or a system) to follow. The computer then runs those rules, and the final image can turn out in ways the artist didn’t fully predict. That surprise is part of the point.

But this also makes me wonder: is this still “randomness”? If the artist designs the rules, then the outcome isn’t completely uncontrolled. At the same time, the result can still feel unpredictable. The projects shown in the video seem to hold both chaos and structure at once—patterns emerging from something that still looks messy—and that combination is what confuses me.

This connects to a larger debate about whether AI-generated work counts as “real” art, and if it does, who the artist actually is. Is it the person who sets the prompts and constraints, or the AI that produces the final output? Generative art raises a similar question. The human chooses the system, the limits, and the type of randomness, but the machine carries out the process and generates the final form. In a way, the artwork is created through collaboration between human intention and machine unpredictability.

At the same time, I keep coming back to the purpose of this kind of work. Are we amazed mainly because a system can produce something that looks complex and meaningful from simple rules? And what happens if nothing surprising appears—if the output feels flat, repetitive, or uninteresting? Would it still count as art, or would it just feel like a technical exercise? These questions make me realize that “randomness” in generative art isn’t the absence of control—it’s more like a tool the artist uses to invite uncertainty, so that structure and surprise can exist together.

In my project, I think I have to set up some boundaries, but at the same time leave the computer some spaces that it can actually have options. But I am still very confused about what counts as a success in such an art project? This kinds of process is confusing: we are doing something logical and follow the instructions but we expected something unpredictable and surprising.

Going into Reas’ talk about the length of using order or complexity in a digital artwork, I find it striking just how different the artworks are made depending on the level of randomness used. I mean looking at the Commodore 64 program, it’s very clear that logic and clearly defined patterns are sort of the bedrock of the artwork. Whilst there is a slight bit of randomness in terms of the direction of the lines, it’s interesting that the core of it, is quite literally a random coin flip. Starting from a random coin flip and then giving it symmetry, it’s clear that while on the surface there is a sense of unity and structure to it, the very first base layer is randomness. The level of randomness used is certainly not as heightened as other art pieces but I find it interesting how it is still present.

Whereas for the art piece “Articulate” there is a much higher level of randomness and noise, but the bedrock level is actually a unifrom, straight line. The artwork starts out from logic, in the form of a line, but then it branches out in random directions. It doesn’t have any sense where it goes to and what’s even more interesting is that it is able to make an art piece with actual depth to it. This is vehemently clear as some parts of the artwork are lighter than others, giving a pop feel and something that can be more so passed off as an art piece. So even still, it is possible to have a coherent art piece even if the starting layer is randomness.

For my own art, I would utilise the second approach. I’d start perhaps even with a uniform pattern of dots or lines, and then really go from there. I’ve used this practice even for drawings with acrylic colours, as it gives me more of a lovely sense of chaos as the drawing progresses. I feel like that’s what we sort of strive for in art, as we feel as though throughout the drawing process, we need a sense of rebellion to get our emotions across.

But how do we balance chaos and order? Personally I believe we need a good amount of intial grounding at the beginning of our drawing. And then as we go, we should have a very good degree of randomness. But not so much it actively ruins our order. Translating it into percentages, I would say a good 5-10% of order at the beginning, with a decent sized 70% randomness and 30% of order throughout the drawing process. But of course, at the end we are our own artist, so we set our limits and I’d always welcome more randomness.

my concept: My self-portrait is a very simple one, I’ve gotten the idea of the shape from the koala example we’ve seen in class. I wanted to make it look cool (even though it didn’t go that well), so I added an interaction where a sword shows up. I’ve gotten this idea while playing a video game called “Elden Ring” where one of the characters would make swords show up.

A section of the code I feel a bit proud of is this:

if (hasSword && swordPosY < swordStopY) swordPosY += 6;
if (!hasSword && swordPosY > -200) swordPosY -= 6;

it was quite confusing getting it to work right, and took time for me to find a good position and make it work the way I want it.

How was this made: I tried keeping the portrait simple, so I mostly used things like ellipse, arc and rect from the references section on the p5 website. I also used AI to look for functions I could use with the swords, cause it seemed faster than me looking them up, it ended up giving me some functions that were quite new and complicated. from AI I ended up using the mousePressed() function to move the sword, which I remember we did see soemthing similar being used in last week’s class. Another function it suggested was lerp() which I didn’t use.

Reflection: I’ve never used Js before, so this was a new experience to me especially with the p5 library, where I got to learn how to arrange shapes and manage coordinates. Making a portrait from such basic things was really fun. If I had more time I would’ve tried adding another animation with the sword instead of it just dropping down. Another thing I could’ve done was making the facial expression more personal and less goofy. The last thing was making a better background like it being night with the moon and stars up there.

Your concept

For my self-portrait, I had two main ideas I wanted to portray. First, I wanted to include something from Egypt. I landed on including the Pyramids as the background of the portrait. I really like how it looks and how it’s a subtle detail in the background that gets my idea across. The other detail I wanted to include some interactivity to do with taking off/putting on my glasses, since I recently started wearing contacts. I was showing my friend the self-portrait, when she gave me the idea to also change the background when I added the glasses, which I decided to incorporate. During the day, I included clouds as well as the sun in the background, at night, it’s replaced with stars and the moon (in addition to adding glasses on my face)!

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

// glasses
if (mouseIsPressed) {

strokeWeight(2);
fill(211, 211, 211, 100);
stroke("brown");
circle(305, 256, 50)
circle(378, 256, 50)

line (330, 253, 352, 253)
line(280, 253, 271, 246)
line(403, 253, 410, 246)
}

I’m proud of the code to add the glasses on my face. The code is pretty simple but I was excited to add something interactive to my code, so I like that the user can press to change up somethings in the portrait. After adding the glasses code, I added the code to change up the background (day/night).

// pyramids
  let s = color ("#D6BF6F");
  let c = color('#e2ca76');
  fill(c);
  stroke(s);

  // pyramid of khufu
  triangle(436, 400, 586, 166, 720, 377);
  
  // pyramid of khafre
  triangle(139, 390, 342, 40, 575, 400);
  
  // pyramid of menkaure
  triangle(0, 386, 147, 140, 298, 390);

I’m also proud of my code for the Pyramids, as simple as it may seem, it took me a while to get all the coordinates right. What I found especially helpful was using the cursor & printing the values of the coordinates to find where I should place each point of the triangles. I really like how the pyramids overlap over each other and I like that the outline becomes more visible at night.

Embedded sketch

How this was made

The first thing I completed was the Pyramids and sand in the background. Initially, I had place this code in the setup() function, rather than the draw() function, since I wasn’t planning to change the background. However, after deciding to have an interaction of changing the background between day and night, I moved the code to the draw() function. Throughout the code, the most helpful thing to figure out coordinates was definintely the print(mouseX, mouseY) line (which is commented out at the end of my code).

After completing the Pyramids, I started working on the actual portrait. I was a bit unsure on how I wanted to do my hijab, and I landed on an ellipse with a rectangle at the bottom. I also added a semi-circle with a rectangle at the bottom to mimic my body. For the face, I used ellipses, circles, semi-circles, triangles, lines, and rectangles, to complete all the features. Something that I found so tedious was the eyelashes. It was a bit to annoying to manually find the coordinates for each point on the line, especially since it was so small, so it took more time than I expected. I expected that drawing my eyebrows would be a bit difficult as I wasn’t sure how to draw a curve, and a line would’ve been too thin. However, after looking through the references, I realized I can just edit the stroke weight so that was helpful. The glasses were what I was most excited for in this portrait, and I love how they turned out since they look very similar to my current glasses.

The clouds, stars, sun, and moon were the last few details that I added. At first, I was struggling with getting the cloud shape correct as I was trying to do using an ellipse and the circles on the outside., but it didn’t look right. I decided to just find a YouTube tutorial and as soon as I started the video, I realized I was overcomplicating it for myself. I just used three circles for each cloud, the left and right circles are smaller and similar in size, while the middle circle is bigger than both circles. As for the sun, it was just a simple yellow circle, I just decided to add the transculent circle in the background as I thought it looked pretty. For the stars, I wanted to play around with the random() feature  so that each star would be randomly placed everytime the user pressed the mouse. However, it didn’t really go as expected as the stars were just moving around instead. I tried playing around with some functions but it didn’t really work the way I wanted so in the end, I just manually wrote around 10 random coordinates for each star. The moon was pretty simple, I just placed it at the same location as the sun but just made it a tad bit smaller.

Throughout the code, I mostly referred to the p5.js reference page and just trial-and-error to get everything looking the way I wanted. I also used Google to find hex codes for everything, as well as also just selecting directly from the color gradients.

Code

function setup() {
  createCanvas(700, 600);
}

function draw() {
  
  // background is blue sky & sand at the bottom
  // sky
  if (mouseIsPressed) {
      background('#00022e')
  } else {
    background('#448ee4');
  }
  
  if (mouseIsPressed) {
    // moon
    fill("white");
    stroke("white");
    circle(601, 79, 130)
      
    color("white")
    strokeWeight(5);
    point(23,45);
    point(100,76);
    point(500,25);
    point(340,132);
    point(265,156);
    point(45,190);
    point(650,200);
    point(130,10);
    point(123,143);
    point(600,12);
    point(696,109);
    point(210, 63)
    point(462, 97)
    point(484, 148)
    point(318, 27)
    
  } else {
    // clouds
    fill("white");
    stroke("white");
    circle(75, 67, 60)
    circle(128,55, 80)
    circle(176, 59, 60)

    circle(275,111, 80)
    circle(337,110, 120)
    circle(407, 111, 80)

    // sun
    fill("orange");
    stroke("orange");
    circle(601, 79, 150)

    fill(255, 255, 0, 50);
    stroke(255, 255, 0 , 50);
    circle(601, 79, 170)
  } 
  
  // pyramids
  let s = color ("#D6BF6F");
  let c = color('#e2ca76');
  fill(c);
  stroke(s);

  // pyramid of khufu
  triangle(436, 400, 586, 166, 720, 377);
  
  // pyramid of khafre
  triangle(139, 390, 342, 40, 575, 400);
  
  // pyramid of menkaure
  triangle(0, 386, 147, 140, 298, 390);
  
  // sand 
  // i added the code for the sand after the pyramids to cover the bottom outline of the pyramids
  fill(c);
  stroke(c);
  rect(0, 389, 700, 600);
  ellipse(118, 388, 264, 20);
  ellipse(263, 429, 500, 100);
  ellipse(577,400, 264, 50);
  ellipse(646,400, 400, 60);
  
    strokeWeight(1);
  
    // hijab 
    let h = color("#808080");
    fill(h);
    stroke(h);
    ellipse(340, 310, 200, 280);
    rect(241, 335, 198, 100);
  
    // face
    let f = color("#f3c37e");
    fill(f);
    stroke(f);
    ellipse(340, 290, 150, 210);
    
    // eyes
    fill("white");
    stroke("white");
    ellipse(305, 256, 40, 15);
    ellipse(378, 256, 40, 15);
  
    fill("#371d10");
    stroke("black");
    circle(305, 256, 15);
    circle(378, 256, 15);
  
    // eyelashes
    line(292,250,289, 243);
    line(297, 248, 295, 241);
    line(302, 247, 301, 240);
    line(307, 247, 307, 240);
    line(312, 248, 313, 240);
    line(317, 249, 319, 242);
  
    line(366, 249, 362, 242);
    line(370, 248, 369, 240);
    line(375, 248, 374, 240);
    line(380, 249, 380, 240);
    line(384, 248, 386, 241);
    line(388, 249, 392, 242);
  
    // eyebrows
    strokeWeight(8);
    line(320, 230, 294, 228);
    line(282, 234, 294, 228);
  
    line(360, 230, 388, 228);
    line(398, 234, 388, 228);
  
    strokeWeight(1);
    
    // nose
    fill ("#DAB073");
    stroke("#DAB073");
    triangle(331, 311, 340, 280, 350, 311);
  
    // body
    let b = color("#800080");
    fill(b);
    stroke(b);
    arc(340, 490, 210, 150, PI, TWO_PI);
    rect(235, 490, 210, 110);
  
    // mouth
    fill("#a90830")
    stroke("#a90830")
    arc(340, 328, 85, 80, 0, PI);
  
    // teeth
    fill("white")
    stroke("rgb(240,235,235)")
    rect(305, 328, 9, 10);
    rect(314, 328, 9, 10);
    rect(322, 328, 9, 10);
    rect(331, 328, 9, 10);
    rect(340, 328, 9, 10);
    rect(349, 328, 9, 10);
    rect(358, 328, 9, 10);
    rect(367, 328, 9, 10);
  
    rect(324, 357, 9, 10);
    rect(334, 358, 9, 10); 
    rect(343, 358, 9, 10);
    rect(353, 356, 9, 10); 
  
    // glasses
    if (mouseIsPressed)  {
    
      strokeWeight(2);
      fill(211, 211, 211, 100);
      stroke("brown");
      circle(305, 256, 50)
      circle(378, 256, 50)

      line (330, 253, 352, 253)
      line(280, 253, 271, 246)
      line(403, 253, 410, 246) 
    }
  
    // print(mouseX, mouseY);

}

Reflection and ideas for future work or improvements

Overall, I’m proud of my work, and I hope to continue improving in p5.js, especially when it comes to smaller details and learning to use more shapes (such as curves and quadrilaterals). I’m really happy I was able to add interactivity, and am especially happy with how the background turned out, and I hope to continue learning how to work with all the interactive features.

I do think there’s a lot of room for improvement in my work. I would love to work on the hijab in my portrait and try to make it more realistic. Additionally, I would’ve liked to have more realistic facial features which I hope will become easier the more familiar I become with p5.js.

 

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.