Category: Spring 2024 – Aaron (Section 001)

For this assignment, I aimed to incorporate one of my favorite things to do, that instantly fills my entire body with peace and happiness. Watching the sunset. The plan was ideally to make the background more ombre other than fading, however, as it’s my first time using p5js I found it difficult to implement that into my background. For future assignments, I’m hoping to create more interactive projects and master the ombre affect as well as getting more familiar with coding.

let rectWidth;
let rectHeight;
let rectX, rectY;
let eye1X = 170;
let eye2X = 230;
let speed = 8;

function setup() {
  createCanvas(400, 400);
  rectWidth = width/4;
  rectHeight = height/4;
  rectX = 0;
  rectY = height/2;
  angleMode(DEGREES);
}

function draw() {
  background(255, 255, 153, 10);

  //SUNSET BG
  
  rectMode(CENTER); //LIGHT ORANGE TOP
  stroke(255, 204, 0)
  fill(255,204, 0);
  rect(rectX, rectY-120, rectWidth+50, rectHeight+50);
  
  rectMode(CENTER); //D.ORANGE MID
  stroke(255, 153, 0)
  fill(255,153, 0);
  rect(rectX, rectY, rectWidth+50, rectHeight+50);

  rectMode(CENTER); //BOTTOM
  stroke(255, 102, 0)
  fill(255,102, 0);
  rect(rectX, rectY+120, rectWidth+50, rectHeight+50);
  

  
  rectX = rectX + speed;
  
  if (rectX > width){
  rectX = 0;
  }
  
  //hair
  fill(43, 28, 17);
  stroke(0, 0, 0);
  rect(200, 220, 205, 330, 90);
  
  //neck
  fill(240,190, 120);
  stroke(0,0, 0);
  rect(200, 239, 100, 100, 20);
  
  //face
  fill(240,190, 120);
  stroke(0,0, 0);
  ellipse(200, 150, 150, 175);
  
  //nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);
  
  //shirt
  fill(136, 189, 242);
  rect(200, 380, 190, 270, 50);
  
  //bangs
  noStroke();
  fill(43, 28, 17);
  rect(200, 81, 100, 40, 58);
  strokeWeight(1.5);
  
  //right eye
  fill(255);
  ellipse(eye2X, 143, 40, 40)
  
  //left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);
  
  //right pupil
  fill(51, 0, 0);
  ellipse(eye2X, 143, 15, 20);
  
  //left pupil
  fill(51, 0, 0);
  ellipse(eye1X, 143, 15, 20);
  
  //mouth
  fill(0);
  arc(200, 192, 50, 50, 0 ,180);
  
  
  
}

 

While working on this assignment, I wanted to recreate my middle school self. I had some experience with Processing so working with P5.js wasn’t so hard to navigate and work with. The thing I struggles with the most in this assignment was the bow. The idea is simple but I never worked with triangles in code before so it was quite difficult trying to figure out the right coordinates. For future assignments I’d like to make my projects much more interactive and fun.

 

function setup() {
  createCanvas(400, 400);
  background(250, 195, 231);
  rectMode(CENTER);
 

}

function draw() {
  
  //Hair
  fill(99, 64, 18, 20);
  rect(200, 235,160, 250, 70);

  //Dress
  fill(232, 133, 12);
  rect(200, 390, 190, 200,60);
    
  //Neck
  fill(250, 207, 150);
  rect(200, 245, 70, 150);

  //Face
  fill(250, 207, 150);
  ellipse(width/2, height/2, 130, 150);
  
  //right eye
  fill(255,255,255);
  ellipse(173, 200, 25, 25);
  //pupil color
  fill(0),
  ellipse(173, 200, 11, 20);

  //left eye
  fill(255,255,255);
  ellipse(226, 200, 25, 25);
  //pupil color
  fill(0);
  ellipse(226, 200, 11, 20);  

  // Eyebrows
  strokeWeight(3);
  noFill();
  //Left eyebrow
  arc(173, 183, 35, 20, PI, TWO_PI); 
  //Right eyebrow
  arc(226, 183, 35, 20, PI, TWO_PI); 
  
  //Nose
  fill(166, 128, 78);
  ellipse(200, 220, 10, 15);

  //Mouth
  fill(255,255,255);
  arc(200, 240, 40, 40, 0, PI + 0, CHORD);
  
  //Bow
  fill(171, 50, 66);
  ellipse(250, 120, 20, 20);
  triangle(240,120,210,90,230,150);
  triangle(260,120,270,90,300,145);

  
  //Earings
  fill(237, 192, 66);
  //right earing
  ellipse(134, 210, 10, 10);  
  //left earing
  ellipse(267, 210, 10, 10);  


}

 

Concept:

My initial Idea was to create a realistic picture of a self-portrait of how I look in the traditional clothes I would wear when I am out.

Reflection and ideas for future work or improvements:

I would say that in the future, I would truly write down the numbers I try when it comes to centering things on the sketch because I kept going around in circles trying to center everything and because I kept placing the same numbers for the different heights and length due to me constantly forgetting what numbers I already tried so It just unnecessarily prolonged the process.

Code Implementation:

I have never used Javascript before, and my understanding of coding is somewhat simple. I had a tough time managing to create hair that looked normal at first, so I tossed that Idea out and wanted to create something else without knowing it was going to be a more complex idea in terms of coding, which was the Ghutra, thinking I would have to create a rectangle and be done with it. However, it did not look like anything close to what I wanted it to be, so I had to use a circle to show that the portrait was wearing it while using three different rectangles layered at different heights so that it shows the way I would personally tie it around my head. But now, looking back at the finished sketch, I would say that I was glad to take the long road of creating a Ghutra to showcase a more realistic portrait of the whole look I have going on.

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

function draw() {
  
  // Body
  fill("white")// Body base color.
  ellipse(200,420,240,300)// Body base.
  
  // Face
  fill(210, 180, 140); // skin color
  ellipse(200, 200, 160, 200); // head shape
  
  // Ghutra
  fill("white");
  arc(200, 130, 130, 90, PI, 0); 
  rect(125, 120, 150, 30); 
  rect(125, 110, 150, 25);
  rect(125, 130, 150, 10);
  
  // Eyebrows
  fill("black"); 
  rect(150, 160, 40, 10); // left eyebrow
  rect(215, 165, 40, 10); // right eyebrow
  
    // Eyes
  fill("white");
  ellipse(170, 190, 40, 20); // left eye white
  ellipse(230, 190, 40, 20); // right eye white
  fill("black");
  ellipse(170, 190, 20, 20); // left pupil
  ellipse(230, 190, 20, 20); // right pupil
  
  // Mustache
  fill("black");
  arc(200, 248, 80, 30, PI, TWO_PI);

  // Beard
  fill("black");
  arc(200, 245, 140, 120, 0, PI);
  
  // Mouth
  fill("white");
  arc(200, 250, 50, 20, 0, PI);

  // Hair
  fill("white");
  
  noLoop(); // Stops draw loop
}

In my first coding project, I decided to represent myself through a unique concept, creating a digital persona that reflects my identity.

I used a triangular shape body to symbolize my abaya and incorporated a head turban, adding personal elements to the visual representation. Choosing lilac as the background, my favorite color, not only adds aesthetic appeal but also creates a connection to my preferences. I took pride in successfully integrating my name into the background and even discovered the possibility of including an emoji through my research, which was a pleasant surprise. Looking ahead, I aspire to advance my coding skills by incorporating more details like hands and feet, aiming for a more realistic depiction of a human figure.

Taking small steps and exploring the possibilities at my own pace is part of my learning journey, and I’m excited about the potential for future improvements in my coding projects.

This is my first attempt at p5.js. I’ve tried to reflect my personal preferences and appearances in this “self-portrait”. My idea is to portray a Bangladeshi girl with big eyes, dark lipstick, and blush wearing a dress and a necklace. I matched the skin color with my own complexion, and the hair color with my hair highlight’s color. Concept wise I think the intention was to personalize the drawing as much as I can using only the simple shapes like ellipse, circle, arc, rectangles and straight lines. I tried to make the colors pop and to make it very detailed for example the necklace is similar to an actual one that I have with an Emerald stone, then the parting between the hair which is something very prominent in my appearance. Placing the lips and the eyelashes were the most difficult part for me I think.
I added interactivity with a smile formed on the mouth upon mouse-click with the if-else statement and mouseIsPressed function. So if you click on the image the lips change to a smile.
For improvements I think adding interactivity with the eyes opening and closing periodically and having some texts would have been nice. Also maybe making it a full-body self-portrait would be a very detailed development I believe which I intend to work on later. Overall, I loved playing with the numbers and parameters and colors and shapes to make it more and more perfect to the reality.

function setup() {
  createCanvas(500, 500);
  background(255, 182, 193); //Pink background
}

function draw() {
  //Hair
  noStroke();
  fill(90, 56, 37); // Hair color
  arc(250, 140, 200, 180, PI, 0); // Top hair
  rect(150, 140, 200, 300); // Side hair
  
  //Neck
  fill(230, 180, 145);
  rect(200, 260, 100, 70);
  
  //Dress
  fill(220, 0, 100);
  arc(250, 445, 250, 300, PI, 0, OPEN);
  
  //Necklace Design
  noFill();
  strokeWeight(2);
  stroke(255);
  arc(250, 320, 137, 200, 0, PI);
  arc(250, 317, 127, 190, 0, PI);
  stroke(0);
  fill(31.4, 78.4, 49);
  ellipse(250, 416, 9, 12);

  //Face
  stroke(0);
  strokeWeight(1);
  fill(230, 180, 145); //Skin color
  ellipse(250, 200, 170, 195); //Face shape
 
  //Eyes
  fill(255); //White of the eyes
  ellipse(215, 180, 40, 20); //Left eye
  ellipse(285, 180, 40, 20); //Right eye
  fill(0); //Pupil color
  ellipse(215, 180, 10, 20); //Left pupil
  ellipse(285, 180, 10, 20); //Right pupil

  // Eyelashes
  stroke(0);
  strokeWeight(0.5);
  // Left eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(190 + i * 6, 162, 200 + i * 6, 172);
  }
  // Right eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(278 + i * 6, 172,  288 + i * 6, 162);
  }

  // Eyebrows
  strokeWeight(2);
  noFill();
  arc(215, 167, 40, 20, PI, TWO_PI); //Left eyebrow
  arc(285, 167, 40, 20, PI, TWO_PI); //Right eyebrow
  
  //Middle parting of Hair
  strokeWeight(1);
  line(250, 52, 250, 103);
  
  //Nose
  noFill();
  strokeWeight(1);
  arc(250, 210, 10, 15, 180, 90, OPEN); 
  
  //Blush
  noStroke();
  fill(255, 192, 203);
  ellipse(195, 210, 20, 10);
  ellipse(305, 210, 20, 10);

  //Forming a smiley face when mouse is pressed
  if(mouseIsPressed){
    noFill();
    stroke(0);
    arc(250, 225, 80, 45, 120, 103);
    fill(255);
    arc(250, 225, 58, 70, 120, 103, OPEN);
    
  }
  else{
    //Lips
    fill(128, 0, 0); //Lip color
    noStroke();
    arc(260, 250, 28, 12, PI, 0);
    arc(240, 250, 28, 12, PI, 0);
    arc(250, 250, 50, 20, 0, PI);
  }
}

 

Description:
For this assignment, I opted for a straightforward approach to create a self-portrait. The portrait includes various facial features, notably the eyes move horizontally due to the animation, and the eyebrows respond to the eye movement.

Sketch:

Code Implementation:

let eye1X = 170;
let eye2X = 230;
let direction1 = 1;
let direction2 = 1;
let lipYOffset = 0;

function setup() {
  angleMode(DEGREES);
  rectMode(CENTER);
  createCanvas(400, 400);
  background(240);
}

function draw() {
  background(240);

  // Draw the existing elements

  // hair
  fill(41, 38, 31);
  rect(200, 220, 205, 330, 90);

  // shirt
  fill(167, 181, 169);
  rect(200, 380, 190, 270, 40);

  // neck
  fill(245, 227, 176);
  rect(200, 239, 100, 100, 30);

  // face
  fill(245, 227, 176);
  ellipse(200, 150, 150, 175);

  // left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);

  // right eye
  ellipse(eye2X, 143, 40, 40);

  // left pupil
  fill(0);
  ellipse(eye1X, 143, 15, 20);

  // right pupil
  ellipse(eye2X, 143, 15, 20);

  // mouth
  arc(200, 192, 50, 50, 0, 180);

  // nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);

  // bangs
  noStroke();
  fill(41, 38, 31);
  rect(200, 81, 90, 43, 58);
  strokeWeight(5);
  stroke(41, 38, 31);
  line(150, 115, 175, 115); // left eyebrow
  line(225, 115, 250, 115); // right eyebrow
  strokeWeight(1);
  stroke(0);



  // eye positions 
  eye1X += direction1 * 2;
  eye2X += direction2 * 2;

  // Check if eyes reach the edge and change direction
  if (eye1X <= 160 || eye1X >= 180) {
    direction1 *= -1;
  }

  if (eye2X <= 220 || eye2X >= 240) {
    direction2 *= -1;
  }

  
}

 

Concept:

Considering my beginner coding skills and the project’s deadline, I focused on portraying recognizable features like my curly hair and glasses in my self-portrait. To achieve this, I used circles to mimic the curls of my hair and smooth squares to represent the frames of my glasses. This approach allowed me to create a clear and straightforward depiction of these key features within the technical and time constraints of the project.

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

//Hair
  noStroke()
  fill(0); 
  arc(200, 140, 120, 100, PI, 0); 

//Curls
fill("#181009")
  circle(150, 120, 50)
  circle(180, 120, 50)
  circle(210, 120, 50)
  circle(240, 120, 50)
  circle(245, 120, 50)

 

Embedded sketch:

Reflection and ideas for future work or improvements:

In my self-portrait, I generally feel content with the overall outcome, but there are elements I now recognize could have been improved. After looking at other examples, I realized a missed opportunity in the portrayal of my glasses. I wish I had learned to isolate a specific area for the eyes that would follow the cursor, adding an interactive and dynamic aspect to the artwork.

Another aspect I would revise is the portrayal of my facial features. Initially, I used simple shapes, but now I see the potential for more accurately representing features like my eyes, nose, and mouth. With more advanced coding skills, I could have added detail to these features, making the portrait not just an abstract representation but a more recognizable portrait of myself.

However I look forward to delving deeper into the possibilities of creative coding, pushing the boundaries of what I can create and express.

Concept
I intended for this self-portrait to have a portrait which is fairly accurate but cartoonish, and I also wanted to experiment with many of the commands in the p5js and I chose to do this by making my portrait dynamic. My main focus was the eyes.

 

Highlight

  translate(x, y); //makes the center of the canvas the point from which everything rotates. otherwise it would have been rotating around (0,0)
  // -18 because that is

  // dont ask me to explain this, I got help from the reference of atan2()
  let mx = mouseX - x;
  let my = mouseY - y;

  let a = atan2(my, mx); // atan2 is weird, its atan2(y,x) rather than x,y :/

  let v = createVector(x, y);

  let d = dist(mouseX, mouseY, x, y);

  let d0 = d * constant;

  // the maximum of 18 has to be found manually, so i added the mouseIsPressed if statement below to help

  if (d0 > max) {
    d0 = max;
  }

  v.setMag(d0);
  v.setHeading(a);

  // for debugging magnitude of the vector
  //   if( mouseIsPressed == true) {

  //     print(d0);

  //   }

  translate(v);

First to explain what the code is doing it helps to also use the embedded sketch whilst reading this. The code above is the logic behind the movement of the eyes. The pupils follow the cursor of the user but move further out or further into the pupil based on how far the cursor is from the  center of the eye. I did this to make the eyes more realistic but also to make the overall sketch more interesting and more fun to interact with.  I did this by calculating the angle from the center of the pupil to the cursor (with a bit of help from the p5js reference), then I created a vector who’s origin point is the pupil and I set it’s angle to be the angle from the center of the pupil to the cursor and it’s magnitude to be based on how far the cursor is from the center of the eye but I limited the magnitude. Once the vector was made I had the eyes translate using the vector using the translate() method. To make things a little more neat I put all of it into a function. I did this because I worked on the eyes feature on a separate sketch but with only one eye and then just placed it into a function so that I could easily create two eyes for this sketch.

 

Sketch

 

Reflection

In hindsight there are a lot of things I would have done differently. Firstly, it was only towards the end that I started using functions more diligently and I hardcoded a lot of my values which meant that I no longer had the luxury of changing the canvas size without having to painstakingly go through every shape. Also, I felt I spent a lot of time trying to do the eyes mechanic all by myself, I feel I would have both enjoyed and benefited greatly by working on it with someone else since for a while I was stuck on what to do. In summary, I would make my code more neat in the future and soft-code more of my variables where I can, and lastly, I should try to get help/ideas from others rather than stick only to myself.

For the first assignment I decided to go for a simple self portrait. Not knowing how to code a lot, I went with the flow and took it easy.

I started with a beige ellipse and from there slowly created the whole face. After that, I went for a rectangle for the hair.

This was the end result!