Concept:

For this assignment, I was tasked with coding a self-portrait on p5.js. For my self-portrait, I wanted to create a small character which would resemble me, with my main facial features and clothing, as well as try to set a background and add in as many details as I could. This was my first experience with coding, so I really wanted to utilize the shapes, lines, and colors we discussed in class and add them into the self-portrait. 

In the beginning, I had grasped the main idea of shapes and coordinates, but not fully. I used the layout that we had already previously coded in class and decided to build off from that. I had already added in basic shapes like the circle, rectangle, and line, but I then went on the p5.js reference site to understand different shapes and how to code them into the self-portrait. From there, I added the ellipse, arc, and spline. I honestly found putting the coordinates in the most difficult, because with shapes like the arc or spline/curve, moving one coordinate without fully knowing what it does would change the whole shape entirely, and I had to go through multiple rounds of trial and error before correcting the size, area and shape that I wanted them to take.  

I created my portrait using mainly the p5.js reference website to research unfamiliar functions and better understand the different shapes available. I also used AI as a learning tool to clarify some of the concepts I found difficult to understand during the process.

Highlight of some code that I am proud of:

fill(mouseX, mouseY, 255);
  ellipse(140, 60, 130, 60);
  ellipse(90, 65, 140, 70);
  ellipse(110, 40, 90, 55);
  ellipse(500, 80, 165, 80);
  ellipse(450, 90, 125, 60);
  ellipse(45, 130, 70, 35);
  ellipse(70,125,55,30);
  ellipse(430, 150, 65, 30);
  ellipse(455,145,55,35);
  ellipse(445,145,55,35);

The part I’m proudest of would definitely be the color-changing clouds. When I first read the assignment details, I saw that it didn’t ask for any interactive elements, which for me as a first-time coder was honestly relieving, but after spending some time experimenting with the mouseX and mouseY variables I came to realize that having something be “interactive” doesn’t mean that it had to be very complicated. I was initially going to make the background interactive but thought that making the clouds be able to change color to show “weather” would be more creative. I learned that the clouds weren’t going from black to white because the fill function was reading them as RGB, but I decided to keep it because I thought the changing colors made the background more creative. 

Embedded sketch:

 

Reflection:

From this assignment, I learned the basics of coding with p5.js, how to add shapes, how x and y values work, how to layer code so that it would overlap in the way I wanted it to, how to add color, and how RGB works. I personally found adding the eyebrows was the hardest, as the spline shape was the most complicated one out of them all, and I really had to understand how to configure the coordinates and how to increase or decrease them based on the shape I wanted. What became easier by the end was definitely the coordinates, because in the beginning I honestly was adding them at random, seeing how they would fit and adjusting to them, but after understanding the formatting it became easier.  

In the future, I would like to focus on adding even more details, such as hands and clothing details as well as trying to add more interactive elements to make my image more realistic and creative. Something I would want to add if I had more p5.js experience would be moving backgrounds and animation, as I feel like it would truly let the image become more interactive and let it come to life. 

 

My concept

I wanted to build a portrait that resonated with me. Features like the eye lash and my face shape were something I wanted to particularly be mindful of. I wasn’t going for a moving or dynamic sketch but rather wanted to focus on the basic sketch and understanding javascript. Other then that, I just wanted to build off what we learnt in class. I also included that I was very tired this week from moving in and settling, so I drew a change of state to sleeping haha.

The main functionality would be the changing day and night.

Code

// I have kept a isNight variable which tracks if it is day or night
// since it is starting as false it means it is day time
let isNight = false; 

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

function draw() {
  // background changes based on state
  // so if isNight is true which is if it is night time the sky is dark blue
  if (isNight) {
    // dark navy sky
    background(10, 5, 80); 
  } else {
    // else it was day time
    background(100, 180, 230);
  }

  // sun or moon same depends on state
  noStroke();
  if (isNight) {
    // pale gray-white moon
    fill(240); 
    circle(50, 50, 50);
  } else {
    fill("yellow");
    circle(50, 50, 50);
  }

  //hair like the back of it
  fill("black")
  circle(200,220,300);
  // left ear
  fill(230, 190, 150);
  ellipse(95, 220, 18, 22);
  //right ear
  fill(230, 190, 150);
  ellipse(305, 220, 18, 22);
  
  // face
  fill(250, 200, 160); 
  noStroke();
  ellipse(200, 200, 210, 220); 
  // hair at the front of head
  fill("black");
  noStroke();
  ellipse(200, 120, 200, 70);

  // eyes
  if (isNight) {
    // closed eyes at night
    stroke(0);
    strokeWeight(3);
    noFill();
    arc(165, 190, 45, 35, PI, TWO_PI);
    arc(235, 190, 45, 35, PI, TWO_PI);
    noStroke();

    
  } else {
    // open eyes during the day
    fill(255);
    noStroke();
    ellipse(170, 180, 45, 35);
    ellipse(230, 180, 45, 35);
    fill(60);
    ellipse(170, 180, 20, 20);
    ellipse(230, 180, 20, 20);
  }

  // nose
  fill(230, 190, 150);
  ellipse(200, 220, 18, 22);

  // eyelashes
  
    stroke(0);
    strokeWeight(2);
    line(145, 170, 135, 165);
    line(152, 166, 148, 154);
    line(162, 161, 162, 150);
    line(255, 170, 262, 160);
    line(248, 166, 252, 154);
    line(240, 153, 235, 163);
    noStroke();
  

  //emoji for the lips
  textSize(65);
  text("👄", 168, 290);
}

function mousePressed() {
  // flips true to false or false to true, any click any where flips this
  isNight = !isNight; 
}

I struggled a bit with the eyelash placement. I wanted them to be at an angle, and I achieved exactly what I wanted. Especially placing them over the eyes was challenging and finding that placement. This was a trial and error process for sure and took me considerable time, but I am happy it looks like the way I want.

Embedded Sketch

 

How this was made

I started with the face and nose since they would be the same in both day and night. I couldn’t make the mouth like I wanted, so I looked at the “Getting Started with p5” where I saw the text function. I used the lip emoji in that function and then added the eyelashes and hair. I wanted these 2 to be static too with the day/night change. I added the sun in the back. I just used one main function ‘draw’ and had everything inside. I used the “isNight” variable for day and night. I changed the shape of the eye depending on the state. One interesting thing I learned was that each line of code draws on top of the last, so shapes drawn later cover the ones drawn earlier. It’s not about compiling, it’s just the order things get painted onto the canvas.

Reflection and improvements

I would make a dynamic sketch in the future and make it more personal as for now I just wanted this to be a reflection of myself (like quite literally) out of the shapes and techniques we learnt. I think I would add my neck and body too. Probably changes in state that reflect more things about me too.

 

Concept

Before starting this class, I had no prior experience using p5js. However, I have some previous coding experience, which made the learning experience a bit smoother. Given this and the fact that I’m not that much of an artists, I decided to focus on getting my basic features onto the portrait. Before even beganing to type anything, I started planning what shapes, I would use to recreate my features through code and once I had finished that I began coding.

Process

Before starting, I decided that I wanted my interactivity to be the background colors changing with every click. To do so, I began to work on the background and decided to divide it into three parts with the help of triangles. Once the background was done, I started working on the portrait of myself. I originally used circles to make up the shape of the head and body; however, I later switched them to ellipses, as I found those looked better. Next, I worked on the facial features, starting with the hair, which I made using a lot of small circles overlapping each other. Once I was happy with that, I added a few more circles to make the eyes and pupils, and created a mouth by using an arc, then I added some smaller details, such as a triangle for the nosem lines for the eyebrows and more ellipses as the ears. Additionally, I used the p5js reference website as a guide for working with the shapes.

After finishing the portrait, I started working on the interactivity. My basic idea to achieve the changing background colors was to randomise the RGB values, but at first I was unsure where to start, so I looked to The Code Train videos as a reference, specifically the video on random functions. From there, I was able to implement the random function in my code and add in the interactivity.

Code I’m proud of

My favorite part of the code is the interactivity section. After I wrote all the code for it, instead of changing color when I clicked the mouse, the background was rapidly changing non-stop. Again, I made some adjustments to it and managed to make it so the base colors were showing; however, the interactivity was still not working. I kept looking through the video and trying to change things in my code, but I was not able to make it work. After 20 minutes, I decided to ask AI for help, and it immediately pointed out to me that I had accidentally put the mouse click function inside my draw function. Immediately after fixing that mistake, the feature was working as intended.

function mouseClicked() {
    r=random(0,255);
    g=random(0,255);
    b=random(0,255);
    r1=random(0,255);
    g1=random(0,255);
    b1=random(0,255);
    r2=random(0,255);
    g2=random(0,255);
    b2=random(0,255);
  }

Reflection

As I continue this class, I hope to further my mastery of the website by learning more about it’s capabilites and create even better projects. In terms of improving this first project, I think I’d want to look into adding more kinds of interactivity, possibly some kind of animation. In addition, I’d want to learn more techniques that could have helped. Overall, I’m happy with what I was able to achieve during my first assignment using p5js.

Concept

For this assignment I needed to use P5.JS to create a self portrait. I wanted to be very practical so I did a very basic portrait of me. All the facial features had their own functions and I tried to mimic the NYU Sexton Square palm trees and front view and also added the blistering sun of Abu Dhabi. I focused a lot on the eyes, trying out all the different shapes that we were introduced to in class and also searched for P5.js reference websites to find out the different mapping for each shape and understanding how I can apply it onto a self portrait. My self portrait represents me in my favourite place and a place that also crushes me. I love NYUAD; it always brings me so much comfort. The campus is very open and being outside and seeing all the people walking around it brings me a lot of peace and happiness and I wanted to represent that in the picture. To show a bit of my personality as well I added the colour of one of my favourite musicals Beetlejuice which is green and purple but I made it more interactive with the mouse.

Highlight of some code I am proud of:

I spent a long time trying to make the reflection in the eyes interactive with the mouse. It took a while for me to figure it out, but when I was reading the reference for P5.js that the professor showed us how to access in class, I learned about mapping. It is basically used to scale down the mouse movements, so for every 500 it will only do three increments. In this, I created a mapping so it could only move on the top left side of my eye with the movement of the mouse. This is where I found it: MAPPING.

// reflection 
  fill(255);
  
  let offsetX = map(mouseX, 0, width, -3, 3, true);
  let offsetY = map(mouseY, 0, height, -3, 3, true);

  ellipse(210 - 4 + offsetX, 215 - 4 + offsetY, 4, 4);

  ellipse(290 - 4 + offsetX, 215 - 4 + offsetY, 4, 4);

Embedded Sketch

How this was made

Immediately after class I was very interested in the interactivity and the shapes, so I created the circle in circle thing with the purple and green background at the bottom half of the background. I was experimenting with it by adding more circles, changing the strokes, making the circles thicker or thinner, and everything. So when I started doing the assignment, I decided to put this inside as well. I used the reference website for P5.js for most of the shapes and then also for the mapping. I used more of the P5.js references and I also watched a few videos from The Coding Train to understand how it works more.

Reflection and ideas for future work or improvements

I wish I spent more time on the palms and the background because I feel like I could’ve done better. I feel like it could’ve been more realistic, but I enjoyed creating the palms, I enjoyed creating the sun and I enjoyed doing all of it honestly. I wish I was more creative with it. I wish I added a few more of my interests. I wish I added a hand so I could add bracelets or maybe a different colour of hijab or abaya or something like that.

 

Concept

For this project, I created a self-portrait using p5.js that represented some of my main physical features. Since this was my first time creating a portrait completely through code, I decided to keep the design relatively simple and use basic shapes to build up the different parts of my face. I focused on features that make the portrait recognizable as me, such as my brown hair, glasses, eyelashes, eyebrows, and the pink color of my clothes and lips, i also added glasses to draw the part of me that I don’t usually show to others (I wear contacts). I also chose a bright cyan background because its one of my favorite colors. What I found interesting about this project was having to think about my face differently. Instead of drawing normally, I had to break each feature down into shapes and coordinates with colors.

How this was made

I made this self-portrait using p5.js and JavaScript. I started by creating a 500 × 500 canvas and then built the portrait step by step using basic shapes such as ellipses, rectangles, triangles, and lines. I mainly worked by changing the coordinates, sizes, stroke weights, and colors of each shape until they were positioned correctly and looked like the features I wanted to include. For learning how to work with colors in p5.js, I used The Coding Train’s YouTube videos as a reference. I also used Google to look up specific color values, especially for the brown tones in my hair and eyes and the colors that were closest to my skin tone.

While working on the code, I ran into an issue where changing the strokeWeight() for my eyelashes was also making all of the other lines in the portrait bold. I wasn’t sure why this was happening, so I used AI to troubleshoot the problem and understand how the stroke settings were affecting the rest of the code. This helped me realize that strokeWeight() continues to apply to the shapes and lines that come after it unless it is changed again. I then adjusted where I placed the stroke weight so that the thicker lines were only used for the eyelashes and glasses.

Code I’m proud of

//glasses
noFill()
stroke(0)
strokeWeight(4);
line(237, 233, 263, 233);
ellipse(300, 233, 75, 75);
ellipse(200, 233, 75, 75);
line(163, 233, 133, 225);
line(337, 233, 367, 225);

One part of my code that I am particularly proud of is the code I used to create my glasses. Although the code itself is quite simple, I found making the glasses symmetrical and positioning them correctly on my face surprisingly difficult. I had to think a lot more about the math and coordinates than I expected, which was challenging for me because math is not something I am very good at. Since everything is based on coordinates, I had to think about how far each part should be from the center of the canvas and from each other. I spent a lot of time changing the numbers and checking how the glasses looked until I finally got them to line up properly.

Reflection

I really enjoyed making this project, especially because it was my first time using p5.js and actually creating a drawing through code. At first, I found it a little confusing having to use coordinates and numbers for basically everything, especially because I am not very good at math. However, the more I changed the numbers and saw how they affected the portrait, the more I understood how everything worked. For my next project, I would like to make something more interactive instead of just having a static image. I think it would be really interesting to have something on the screen change when the user clicks or moves their mouse especially since I’ve mostly understood the basics now.

Concept

For my first assignment of making a self-portrait, I wanted to create a drawing that looked as much like me as possible using the basics I learned in p5.js this week. I included details such as my hairstyle, face, ears, eyes, eyebrows, moustache, beard, and clothing to make the portrait recognizable and personal. I also added sunglasses because ever since I came to Abu Dhabi, I have had to mostly wear sunglasses when I go outside because it is often very sunny and bright here. To make this detail more interesting, I programmed the sunglasses to appear when the mouse is pressed.

Since this was my first time coding in p5.js, I wanted to challenge myself while working with the techniques I had learned. I tried to include enough details to represent my appearance without making the drawing too complicated. The interactive sunglasses also allowed me to connect the portrait to my everyday life in Abu Dhabi. Overall, I aimed to create a simple but personal self-portrait that shows both what I look like and a small part of my experience living here.

Press the mouse!

Implementation

I implemented my self-portrait in p5.js using a combination of different shapes, arcs, and lines. I used ellipses to create the face, ears, and eyes, rectangles and triangles for the neck and shirt, and arcs for the hair, eyebrows, mouth, and beard. I also used lines to create the moustache, hair details, and the sunglasses. I used different colours for the skin, hair, shirt, mouth, and background to make the portrait more detailed and visually appealing.

One of the more difficult parts of the implementation was determining the exact x and y coordinates for placing each figure in the correct position. I then thought of displaying the x and y coordinates of the mouse on the screen. This made my work much easier because I could move my mouse to the exact position where I wanted to place a point or shape and then use those coordinates in my code. This helped me position the different parts of the portrait more accurately.

I also used if and else statements to make my portrait interactive. I used an if…else statement to change the background colour depending on whether the mouse was being pressed. When the mouse is pressed, the background changes to a yellow colour indicating sunlight, and when it is not pressed, the background returns to default grey. I also used an if statement with mouseIsPressed to make sunglasses appear on the portrait when the mouse is pressed. This allowed me to make my self-portrait more interactive rather than having it remain as a static drawing.

Code I am Proud of

  function draw() {  
  if (mouseIsPressed){
    background(250, 222, 133);
  }
  else{
    background(220);
  }
// Sunglasses when mouse is pressed
  if (mouseIsPressed){
    strokeWeight(4);
    line(126,198,146,227);
    line(274,198,254,227);
    line(170,235,230,235);
    fill(50);
    ellipse(165,235,50,40);
    ellipse(235,235,50,40);
  }
}

The code I am most proud of is the part of my draw() function that uses mouseIsPressed to add sunglasses to my self-portrait. I am proud of this because it allowed me to make my portrait interactive. When I press the mouse, the sunglasses appear on the face, while the background changes from grey to a bright yellow colour. The yellow background represents the bright sunlight in Abu Dhabi, which is why I connected it with the sunglasses. I liked how I was able to use an if…else statement and the mouseIsPressed function to create an interaction that also has a personal meaning. Since this was my first time coding in p5.js, I was especially proud that I was able to create this effect and connect it to my own experience.

Reflection

I enjoyed experimenting with different shapes, colours, arcs, and lines to see how they could be combined to create different facial features. I was also really happy with how the interactive sunglasses turned out. Something I would still like to improve is to make my sketch more detailed. At the moment, I mainly relied on basic shapes, but in the future I’d like to work with new shapes and explore different ways of creating more interactive and aesthetic sketches. I also think it would be a good idea to add animations in the future, as this could make my sketches more engaging and bring them more to life.

 

My concept

My goal was to represent not only my appearance, but also some aspects of my personality that are important to me.

Before this assignment, I had no experience with programming or p5.js. Since I wanted to do a good job on my first assignment, I spent a lot of time learning the basics, experimenting with the code, and using different resources, including AI, to help me solve problems and develop my ideas.

I realized that simply drawing myself could not fully represent my personality. Therefore, I added an interactive element using words that are related to me. Through these interactions, I wanted to give the audience more information about my personality and make the representation of myself more complete.

How this was made?

interactive–words

//Chinese
  if(mouseIsPressed && dist(mouseX,mouseY,100,120)<40){
    text("Chinese",72,125);}
  
  //Creative
  if(mouseIsPressed && dist(mouseX,mouseY,60,250)<40){
    text("Creative",32,255);}
  
  //Hungry
  if(mouseIsPressed && dist(mouseX,mouseY,60,400)<40){
    text("Hungry",34,405);}

My goal was to make some words describing my personality appear when I press the mouse over the circles. Since I did not know how to create this interaction, I used AI to help me figure it out. Through this process, I learned how to use an if statement with mouseIsPressed and the distance between the mouse and the circle to control when the text appears. I also understood the logic behind this type of interaction, rather than just using the code without knowing how it works.

Color

For the colors, I used a website called Color Picker. I could adjust the color using its color wheel and get the corresponding RGB values. I then used these RGB values in my p5.js code to choose the colors for my project.

Shapes

For the shapes, I also used AI to help me understand how to use coordinates to control the position of different shapes. One of the most useful things I learned was how to create an arc. I learned that, besides defining its position and size, I also need to specify its start and end angles to control the direction of the arc. I found this part quite interesting.

Reflection and ideas

Reflection

I enjoyed working on this project, but it also took me a lot of time. One part that took especially long was designing the hair. Originally, I wanted to make it look more like my actual hair, with bangs and a round shape on top. I tried to use curves to create this shape, but I realized that I did not fully understand how curves work. I did not want to use code that I did not understand, so I decided to use two quarter circles instead. However, this made the top of the head look more square, and I am not completely satisfied with the result. In the future, I would like to learn how to use curves better so that I can create more complex shapes.

Another thing I noticed was that I spent a lot of time adjusting the coordinates of different elements. I often had to move them little by little and guess where they should be. For example, if an element was slightly too high or too low, I would have to keep changing its coordinates until it was in the position I wanted. I would like to learn a more efficient way to locate and adjust positions in the future.

Overall, I think this project gave me a good starting point for learning programming, and I hope that I can use these skills to create more interesting and interactive projects in the future.

 

 

Overview

Following the sessions on Week 1, our first assignment was to create a self-portrait using p5.js. Last semester I took Communications Lab, so I was familiar with the website, but I haven’t gone into such depts before, and for this assignment I decided to create my self-portrait with a little additional information about me, which is that I don’t like the rain.

I really wanted to use as many of the available 2D shapes as possible, such as the arc, the ellipse, the circle, the line, and the rectangle, along with some of the other resources like mouseX, mouseY, the mouseIsPressed, or constrain. I have tried to create myself a little challenge but also not put too much pressure on myself to put absolutely everything into this first assignment.

 

Process

For this assignment I decided to create an entirely new project and make my portrait out of scratch. I was sure that I wanted to add some basic interaction, just for a little practice and to make it more fun. I made the biggest components first, my head, my body, and my hair, and then moved on to the smaller details like my bangs, my eyes, nose, mouth, and my glasses. For all of these elements, I relied heavily on the p5.js references, but didn’t use any other external sources. I also decided after my body was fully made to put something in the background as well, just to make it a little less plain, and then came the idea that I will use my interaction here and show how much I don’t like standing in the rain. As a last touch, I also added some shading, just to play a little with the layers as well, and to add a little depth to it.

The Code

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

function draw() {
  background("lightblue");

//Sun
  fill("yellow");
  circle(50, 50, 60);
  
fill("black");
textFont('Courier New');
text('click and see what happens', 110, 60);
  
noStroke();


  
//Hair Shadow
  fill(127, 80);
  rect(104, 203, 200, 210,); 


//Hair
  fill("yellow");
  rect(100, 200, 200, 210,);

//Body Shadow on BG
  fill(120, 120);
  triangle(209, 300, 110, 600, 300, 600);
  
//Body
  fill("brown");
  triangle(200, 300, 110, 600, 300, 600);

//Shadow on Body 
  fill(127, 70);
  noStroke();
  ellipse(200, 400, 60, 30);
  
//Head
  fill("#F7D4C4");
  circle(200, 300, 200);
  
//Glasses
  noFill();
  stroke(0);
  strokeWeight(2);
  rect(145, 283, 45, 35, 5);
  rect(205, 283, 45, 35, 5);
  line(190, 300, 205, 300);

//Eyes
  fill(255);
  stroke(-2);
  circle(170, 300, 30);

  let px = constrain(mouseX, 165, 175);
  let py = constrain(mouseY, 295, 308);

  fill (0);
  circle(px, py, 10);

  fill(255);
  stroke(0);
  circle(225, 300, 30);
  
  let px2 = constrain(mouseX, 222, 230);
  let py2 = constrain(mouseY, 295, 310);
  
  fill (0);
  circle(px2, py2, 10);
  
//Nose
  stroke(1);
  strokeWeight(2);
  line(197, 315, 197, 330);

//Bangs shadow
  noStroke();
  fill(127,30);
  arc(100, 205, 200, 200, 0, HALF_PI);
  arc(300, 205, 200, 200, HALF_PI, PI);
  
//Bangs
  noStroke();
  fill("yellow");
  arc(100, 200, 200, 200, 0, HALF_PI);
  arc(300, 200, 200, 200, HALF_PI, PI);



//Mouth
  noFill();
  stroke(255, 0, 0);
  strokeWeight(4);
  arc(200, 340, 60, 40, 0, PI);
  
//Hand shadow
  noStroke();
  fill(127, 127);
  rect(164, 473, 20, 50);
  rect(229, 473, 20, 50);
  
//Hands
  fill("#F7D4C4");
  rect(160, 470, 20, 50);
  rect(225, 470, 20, 50);
  


  if(mouseIsPressed){
  background(220);
  noStroke();

//Clouds
  fill(255);
  circle(60,50,40);
  circle(85,50,50);
  circle(108,50,40);
  circle(210,120,60);
  circle(245,120,70);
  circle(280,120,60);

//Rain
    stroke("blue");
    strokeWeight(3);
    line(70, 90, 80, 120);
    line(90, 110, 100, 140);
    line(100, 90, 120, 150);
 
 noStroke();  

//Hair Shadow
  fill(127, 80);
  rect(104, 203, 200, 210,); 
    
//Hair
  fill("yellow");
  rect(100, 200, 200, 210,);

//Body Shadow on BG
  fill(120, 120);
  triangle(209, 300, 110, 600, 300, 600);
    
//Body
  fill("brown");
  triangle(200, 300, 110, 600, 300, 600);

//Shadow on Body 
  fill(127, 70);
  noStroke();
  ellipse(200, 400, 60, 30);
    
    
//Head
  fill("#F7D4C4");
  circle(200, 300, 200);

//Glasses
  noFill();
  stroke(0);
  strokeWeight(2);
  rect(145, 283, 45, 35, 5);
  rect(205, 283, 45, 35, 5);
  line(190, 300, 205, 300);

//Nose
  stroke(1);
  strokeWeight(2);
  line(197, 315, 197, 330);

//Bangs shadow
  noStroke();
  fill(127,30);
  arc(100, 205, 200, 200, 0, HALF_PI);
  arc(300, 205, 200, 200, HALF_PI, PI);

//Bangs
  noStroke();
  fill("yellow")
  arc(100, 200, 200, 200, 0, HALF_PI);
  arc(300, 200, 200, 200, HALF_PI, PI);

//Eyes
  fill(255);
  stroke(0);
  circle(170, 300, 30);

  fill (0);
  circle(170, 300, 10);

  fill(255);
  stroke(0);
  circle(225, 300, 30);
  
  fill (0);
  circle(225, 300, 10);

//Mouth
  noFill();
  stroke(255, 0, 0);
  strokeWeight(4);
  arc(200, 365, 60, 40, PI, TWO_PI);

//Hand shadow
  noStroke();
  fill(127, 127);
  rect(164, 473, 20, 50);
  rect(229, 473, 20, 50);

//Hands
  noStroke();
  fill("#F7D4C4");
  rect(160, 470, 20, 50);
  rect(225, 470, 20, 50);

  }
  

}

 

I can be a rather messy person in real life, and to compensate that I try to keep my online life a little more organised. I tried my best to divide all parts of the code, make it clear what piece of code is which part of the portrait and that made it a lot easier to later go back to it and adjust or correct certain things. It came in very handy for example when I was adding the shadows, especially the bangs, because it was a lot easier to find the “Glasses” and the “Bangs” chunks, between which I wanted to place my shadow.

Something that took a little more time but made me very happy to see it work were the moving eyes. I used the constrain calculation, which I had to try multiple times to work. I had to understand which parameter constrains which side, but after I figured that out, I was able to constrain my “pupil” to stay in the “eye” but still move.

//Eyes
  fill(255);
  stroke(-2);
  circle(170, 300, 30);

  let px = constrain(mouseX, 165, 175);
  let py = constrain(mouseY, 295, 308);

  fill (0);
  circle(px, py, 10);

  fill(255);
  stroke(0);
  circle(225, 300, 30);
  
  let px2 = constrain(mouseX, 222, 230);
  let py2 = constrain(mouseY, 295, 310);
  
  fill (0);
  circle(px2, py2, 10);

 

Reflection and Ideas

As a reflection, I had a lot of ideas for this project that I couldn’t do in the end. For example, I originally wanted my bangs to move as if it were the wind messing them up (which is another very important part of my everyday life), but I found it a little too difficult. I would love to explore more libraries in the future to find out about new techniques that could have also made the process of making this portrait easier or just different. Another thing I would also love to learn is how to make the movements smoother. I really love the eyes, however I would prefer them to move smoother than they do right now. But despite knowing that there is a lot of room for improvement, for this first project, my goal was not to go overboard but rather to explore the basics of p5.js, so overall I am happy with the results.

Writeup

Code snippet

I’m really proud of my head. It represents my spirit.

// Head
fill(30, 30, 255, 127);

// Heavy outline
stroke("blue");
strokeWeight(5);

 

Sketch

 

Here’s my self-portrait

How this was made