Category: F2024 – Aya

Assignment 1: Self Portrait

Concept:

The concept of my first assignment is to use JavaScript (p5) to code 2D primitive shapes to create a self-portrait. This involves carefully selecting the correct shapes and inputs (x-axis, y-axis, etc.), as well as determining how to fill shapes with color, and choosing the color and size of the shape strokes to achieve the final look.

In my self-portrait, I included two elements that are important to me. The first element is the night sky and the moon, as my favorite time of day is nighttime. The second element is the eyes, which hold significance because I have a twin (we are not biologically identical), but people often confuse us. To help others distinguish between us, I always suggest looking at our eye colors—I have greenish-grey eyes, while my twin has brown eyes.

Highlighted code:

I am proud of the final outcome I achieved, but I am especially proud of the eyes. I successfully layered different sizes of circles with various colors, perfectly centering them on top of each other. I am also proud of the eyelashes, as I was able to align them symmetrically opposite each other with the same length and size.

//eyes
fill(255);
circle(165,175,37);
circle(235,175,37);
fill('rgb(87,107,136)');
circle(165,175,27);
circle(235,175,27);
fill(0);
circle(165,175,15);
circle(235,175,15);
stroke(0);
strokeWeight(2);
line(147,170,140,165);
line(150,165,143,160);
line(153,160,146,155);
line(253,170,260,165);
line(250,165,257,160);
line(247,160,254,155);

Sketch:

Future Improvements:

In the future I would like to animate my work (example: make the eyes move), and I would like to learn how to draw curved lines (for example to learn how to draw the eyebrows).

Assignment 1: Generic Self Portrait of a Generic Asian Face

Concept:

  • As someone with limited coding experience, a highly simplified self portrait was the best choice for me to familiarize myself with the fundamentals of p5.js. I decided on utilizing blocks of color to illustrate my face in an artistic style reminiscent of the Animal Crossing games.

Highlights:

  • I am proud of myself for managing to use two colored arcs to depict my middle-part bangs, which I had a little trouble coding as I was initially confused about how to flip the arc on the right horizontally.
//bangs
fill('#310707');
arc(70, 120, 260, 120, 0, HALF_PI);
arc(330,120, 260, 120, HALF_PI, PI);

Sketch:

Ideas for future improvements:

  • While my portrait for this assignment effectively communicates the image of a face, it is a very simplified one that barely represents my likeness. If I were to make another portrait, I would like to experiment with layering more complex shapes with varying levels of opacity as a means of shading and coloring as you normally would while drawing on paper.
  • I would also add more elements — be it a moving cloud,  a flying bird or an abstract flurry of colors — to the backdrop to create a livelier composition.

Self Protrait

CONCEPT:

Creating this self portrait was a tough journey. My concept was to create a cartoonish version of myself whilst including specific features like my curly hair, and other basic features (eye lashes, rosy cheeks, lashes, lips, eyebrows etc) that would make the portrait come together. Anyways I wanted to also keep it simple since by focusing on implementing the basic shapes so I could get familiar with it, since I’m still new to this. Moving on, for the background I wanted to stick to a specific color that would match the aesthetic of my portrait which is bluish-purple. However, as you could tell I couldn’t decide on just one color, so I went with a rainbow background that changes as you move the mouse around the screen which I’ll explain more about below.

HIGHLIGHT:

i have two highlights in my  code. The first one is the background. The background was a bit of an accident. I wanted to do strips of different shades of blue but i kept being indecisive about the color and changing it. So then I went to look for inspirations in peoples blog and that’s when i stumbled on Noura alhosanis idea. However i changed it up by using different shapes, colors and sizes so it could go with my theme. Also, I looked into the class resources and came across a YouTube video, that helped me understand variables and the use of it. Here’s a snippet of the code:

let x, y, r, g, b;

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

function draw() {
    print(mouseX + "," + mouseY)
  
  //background
  background(mouseX,mouseY,100, 7)
  r = random (0,255)
  g = 0
  b = random(0,400)
  x = random(0,700)
  y = random(0,400)
  noStroke();
  fill(r,g,b,100)
  square(x,y,50)

The second thing I’m proud of is my hair. The reason for this is because it was so time consuming to perfect the curly hair look which includes the placing for it, the layers of circles to create volume, and different type of shades to add depth into it. I’m proud of how it turned out because it brought my portrait together.

REFLECTION:

However, as much as I’m proud of the hair, it was still a real challenge. First It was tricky figuring out the placements, but as I kept messing up , I figured out the print mouseX and mouseY function which helped. But with that function it was still really time consuming. So, for next time i would like to find an easier method that won’t make me want to pull my hair out. Now, does this portrait look exactly like me? Well…not quite. It’s my first attempt, so I focused more on capturing basic features by using the basic shapes we used in class. But that’s something I want to work on next time which is making the portrait more realistic. Overall, I had fun with this project, and I’m already thinking about how I can improve.

Here is the overall code:

let x, y, r, g, b;

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

function draw() {
    print(mouseX + "," + mouseY)
//background
  background(mouseX,mouseY,100, 7)
  r = random (0,255)
  g = 0
  b = random(0,400)
  x = random(0,700)
  y = random(0,400)
  noStroke();
  fill(r,g,b,100)
  square(x,y,50)
  
  
  //FACE SHAPE
  strokeWeight(0)
  fill(255,204,153)
  ellipse(200,200,105,150)
  
  //LEFT EYE 
  strokeWeight(1)
  fill(255)
  ellipse(180,180,14,10)
  
  //LEFT EYES LID
  strokeWeight(1)
  fill('#B98B7B')
  arc(180,180,15,25,PI,0)
  
  //LEFT PUPIL
  strokeWeight(1)
  fill('rgb(98,26,26)')
  circle(180,180,8)
  
  //RIGHT EYE
  strokeWeight(1)
  fill(255)
  ellipse(220,180,14,10)
  
  //RIGHT EYES LID
  strokeWeight(1)
  fill('#B98B7B')
  arc(220,180,15,25,PI,0)
  
    //LEFT PUPIL
  strokeWeight(1)
  fill('rgb(98,26,26)')
  circle(220,180,8)
  
  //left eye brows
  stroke('rgb(48,5,5)')
  strokeWeight(4)
  line(173,160,188,160)
  
  
  // Right Eyebrow
  stroke('rgb(48,5,5)')
  strokeWeight(4)
  line(210,160,225,160)
  
  //left eye lashes
  strokeWeight(1)
  stroke('black')
  line(174,178,174,172)
  line(176,177,176,172)
  line(181,176,181,172)
  line(186,178,186,172)
  line(179,177,179,172)
  line(184,177,184,172)
  
  //right eye lashes
  strokeWeight(1)
  stroke('black')
  line(213,178,213,172)
  line(216,177,216,172)
  line(221,176,221,172)
  line(218,176,218,172)
  line(224,176,224,172)
  line(226,176,226,172)
  
  
  //down lip 
  strokeWeight(1)
  fill("rgb(213,67,67)")
  arc(200, 240, 30, 15, 0, PI);
  
  //upper lip
  fill("rgb(195,42,42)")
  arc(200, 240, 30, 15, PI, 0)
  
  //LIP LINE
  arc(200, 240, 27, 1, 0 ,PI)
  
 //NOSE
  noFill()
    arc(200,210,13,10,0,PI)
  line(200,188,194,210)
  
  //body
  fill('rgb(39,39,133)')
  rect(150, 295, 100, 200,40)
  
  //left arm
  noStroke()
  fill(255,204,153)
 rect(140, 320, 20, 120, 40)
  
  //right arm
  noStroke()
  fill(255,204,153)
  rect(240, 320, 20, 120, 40)
  
  //left sleeves
  noStroke()
  fill('rgb(39,39,133)')
 rect(140, 320, 20, 50, 5)
  
  //right sleeves
  noStroke()
  fill('rgb(39,39,133)')
 rect(240, 320, 20, 50, 5)
  
  //neck coller
  noFill()
  strokeWeight(10)
  stroke('rgb(31,31,91)')
  arc(200, 295, 20, 30, 0 ,PI)
  
  //left sleeve coller
  noFill()
  strokeWeight(7)
  stroke('rgb(31,31,91)')
  line(140,370,160,370)
  
  //right sleeve coller
  noFill()
  strokeWeight(7)
  stroke('rgb(31,31,91)')
  line(240,370,258,370)
  
   //neck
  noStroke()
  fill(255,204,153)
  rect(190, 260, 20, 40,10)
  
  //V neck
  strokeWeight(7)
  arc(200, 270, 27, 78, 0 ,PI)
  
  //chin
  noFill()
  strokeWeight(1)
  stroke('black')
  arc(199,265,16,10,0,PI)
  
   //jaw
  strokeWeight(5)
  stroke('#461C0D')
  line(158,247,187,276)
  line(241,247,212,276)
  strokeWeight(3)
  line(188,277,212,277)
  
  //cheeks
  noStroke()
  fill(225,0,0,50)
  circle(169,219,15)
  circle(231,219,15)
  
  // HAIR (Left side)
  strokeWeight(4)
  stroke('rgb(54,7,7)')
  fill('rgb(54,7,7)')
   circle(140, 230, 20)
  circle(135, 225, 20)
  circle(130, 220, 20)
  circle(140, 225, 20)
  circle(140, 240, 20)
  circle(151, 243, 12)
  circle(153, 260, 20)
  circle(140, 260, 20)
  stroke('rgb(71,18,18)')
  fill('rgb(71,18,18)')
  circle(143, 250, 20)
  circle(134, 173, 20)
  circle(135, 135, 20)
  circle(130,130,20)
  circle(136,140,20)
  circle(139,143,20)
  circle(146,149,20)
  circle(146,139,20)
  circle(131,157,20)
  circle(143,162,20)
  circle(137,185,20)
  circle(136,201,20)
  circle(123,173,20)
  stroke('rgb(54,7,7)')
  fill('rgb(54,7,7)')
  circle(126,187,20)
  circle(119,203,20)
  circle(169,126,20)
  circle(161,135,20)
  circle(182,135,20)
  circle(159,149,20)
  circle(118,149,20)
  circle(150,174,20)
  circle(139,211,20)
  circle(142,193,20)
  circle(147,116,20)
  circle(164,273,20)
  circle(178,285,20)
  circle(143,300,20)
  circle(124,269,20)
  circle(137,274,20)
  circle(132,286,20)
  circle(221,289,20)
  circle(233,297,20)
  circle(248,298,20)
  circle(263,292,20)
  circle(268,275,20)
  circle(165,269,20)
  circle(174,301,20)
 stroke('rgb(71,18,18)')
  fill('rgb(71,18,18)')
  circle(153,127,20)
  circle(165,108,20)
  circle(187,120,20)
  circle(182,103,20)
  circle(177,114,20)
  circle(124,248,20)
  circle(121,228,20)
  circle(129,240,20)
  circle(146,279,20)
  circle(160,291,20)
  circle(241,283,20)
  circle(257,278,20)
  circle(233,273,20)
  circle(225,284,20)
  circle(175,276,15)
  circle(238,267,20)
  circle(243,275,25)
  circle(220,278,10)
  circle(158,305,15)

  
  
  
  //HAIR (RIGHT SIDE)
  stroke('rgb(73,24,24)')
  fill('rgb(73,24,24)')
  circle(260, 230, 20)
  circle(265, 225, 20)
  circle(270, 220, 20)
  circle(260, 225, 20) 
  circle(260, 240, 20)
  circle(250, 243, 12)
  circle(248, 260, 20)
  circle(260, 260, 20)
  circle(257, 250, 20)
  circle(272, 173, 20)
   stroke('rgb(67,9,9)')
  fill('rgb(67,9,9)')
  circle(270, 135, 20)
  circle(275, 150, 20)
  circle(280, 165, 20)
  circle(275, 205, 20)
  circle(260, 210, 20)
  circle(270, 210, 20)
  stroke('rgb(54,7,7)')
  fill('rgb(54,7,7)')
  circle(270, 175, 20)
  circle(255, 190, 20)
  circle(265, 205, 20)
  circle(252,263,20)
  circle(254,162,20)
  circle(254,173,20)
  circle(262,149,20)
  circle(246,134,20)
  circle(277,188,20)
  circle(269,259,20)
  circle(243,149,20)
  circle(268,162,20)
  circle(273,233,20)
  circle(275,246,20)
  circle(258,127,20)
  circle(201,127,20)
  circle(219,131,20)
  circle(230,138,20)
  circle(197,106,20)
  circle(208,110,20)
  circle(231,117,20)
  circle(217,119,20)
  circle(244,117,20)
  stroke('rgb(73,24,24)')
  fill('rgb(73,24,24)')
  circle(220,102,20)
  circle(236,102,20)
  circle(236,129,20)
  
}

 

SELF PORTRAIT

For this assignment, I decided to do a simple portrait as it was my first time coding. However, I did want to play around with the background and try new codes, so I decided to do a background that changes color at random when you toggle around the mouse. At first, I thought it was too hard, and it took me time to figure out the codes, but I watched some tutorials on YouTube and went over the presentations in class, and I finally figured it out and was definitely proud of the outcome. I honestly found it difficult to figure out the shapes and where everything goes, but the Mouse X and Y function was a lifesaver, and it was a matter of getting the hang of it. The hair, however, was my least favorite part as it was getting really confusing with the placements of each circle. Maybe there was an easier way instead of just repeating each circle in a different location, so hopefully, I will figure it out in the future. Overall, after a long process of figuring out each shape, size, and code I’m happy with the outcome.

here is the background code which I am most proud of:

let x, y, r, g, b;

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

function draw() {
  // background that changes color
  background(mouseX, mouseY, 100, 7);
  r = random(0, 255);
  g = 0;
  b = random(0, 255);
  x = random(0, 600);
  y = random(0, 400);
  noStroke();
  fill(r, g, b, 100);
  circle(x, y, 24);

here is my portrait!

here is the code:

let eyeRX = 170;
let eyeLX = 225;
let speed = 15;
let x, y, r, g, b;

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

function draw() {
  // background that changes colour
  background(mouseX, mouseY, 100, 7);
  r = random(0, 255);
  g = 0;
  b = random(0, 255);
  x = random(0, 600);
  y = random(0, 400);
  noStroke();
  fill(r, g, b, 100);
  circle(x, y, 24);
  print(mouseX + "," + mouseY);

  //neck
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  rect(200, 280, 70, 150, 100);

  //   left ear
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  circle(135, 177, 25);

  //   right ear
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  circle(264, 177, 25);

  // face
  fill(240, 190, 120);
  stroke(0, 0, 0);
  strokeWeight(1);
  ellipse(200, 160, 125, 185);

  //nose
  noFill();
  arc(199, 183, 20, 15, 270, 90);

  // hair
  noStroke();
  fill(46, 28, 17);

  //  top hair
  circle(140, 60, 40);
  circle(183, 95, 40);
  circle(205, 88, 40);
  circle(160, 100, 40);
  circle(170, 50, 40);
  circle(200, 40, 40);
  circle(230, 50, 40);
  circle(233, 94, 40);
  circle(260, 60, 40);

  // More top curls
  fill(46, 28, 10);
  circle(160, 80, 40);
  circle(190, 70, 40);
  circle(220, 70, 40);
  circle(250, 80, 40);

  // Left side curls
  fill(46, 28, 17);
  circle(130, 90, 40);
  circle(120, 120, 40);
  circle(134, 135, 40);
  circle(142, 113, 40);

  // Right side curls
  fill(46, 28, 17);
  circle(270, 90, 40);
  circle(280, 120, 40);
  circle(262, 134, 40);
  circle(256, 115, 40);

  // eyebrows
  stroke(21, 19, 19);
  strokeWeight(2);
  noFill();
  arc(170, 135, 30, 10, PI, TWO_PI);
  arc(225, 135, 30, 10, PI, TWO_PI);

  //right eye
  fill(255);
  ellipse(eyeRX, 150, 20, 20);

  //left eye
  fill(255);
  ellipse(eyeLX, 150, 20, 20);

  //right pupil
  fill(51, 0, 0);
  ellipse(eyeRX, 150, 10, 10);

  //left pupil
  fill(51, 0, 0);
  ellipse(eyeLX, 150, 10, 10);

  //  mouth up
  strokeWeight(1);
  fill("pink");
  rectMode(CENTER);
  arc(200, 209, 30, 15, PI, 0);

  //   mouth down
  strokeWeight(1);
  fill("pink");
  rectMode(CENTER);
  arc(200, 209, 30, 15, 0, PI);

  //   lip line
  arc(200, 210, 27, 1, 0, PI);

  //shirt
  fill(126, 167, 189);
  noStroke();
  rect(200, 380, 199, 200, 50);

  //   shirt neck line
  fill(240, 190, 120);
  noStroke();
  arc(200, 280, 90, 80, 0, PI, CHORD);

  //   short neck shadow
  noFill();
  strokeWeight(8);
  stroke("#212E2D");
  arc(200, 280, 90, 80, 0, PI);

  noStroke();
  fill(64, 102, 122);
  triangle(128, 315, 135, 400, 150, 400);
  triangle(265, 315, 267, 400, 250, 400);
}

 

Assignment 1 – Self Portrait

For this self portrait I was inspired by the art style of Toca Boca, a mobile video game I used to play a lot as a kid. So I attempted to create myself in that art style.

 Highlighted Code:
I am proud of this code because I originally was worried with how I would create the hijab, but I ended up simply creating a circle and making the “head” above it. Even though it’s just 2 circles on top of each other, I’m glad I found a simply solution.

//hijab
fill('#523F2D');
circle(width/2,height/2,270);

Reflection:

I’m happy with the final result, when starting I thought I wouldn’t be able to create what I envisioned. I did want to add some hair, and I tried with arc using HALF_PI but with the hijab it didn’t work so I scratched that idea. I think for future assignments I want to try to make my work interactive.