All Posts

As someone who has only ever coded in CS assignments involving complex and detailed task requirements, this particular assignment gave me freedom to explore all kinds of possibilities when it came to creating a self-portrait using shapes and lines through code. I was initially confused on how to add details using only shapes but as I experimented with different sketches, it started to make more sense.

Process

I had drawn a line art sketch to get an idea of the different shapes I will have to use and drew them on a grid so that it’s easier for me to translate that into code. 

I used a circle and bezier curve to create the face shape and the use of control points for the curve proved to be the biggest learning point for me in this assignment. I used the bezier curve in almost every element, from face shape to eyebrows and shadows, and it was interesting when tweaking the control points along the x or y axis would create the effect I wanted. 

I also learnt how to use the translate() and rotate() functions, which were initially tricky to understand. I used them to locate the blush ellipses because I wanted them at an angle. It took me some time to realize that using these two functions causes all the elements after them to be relocated and so I tried to use them at the very end of the code. 

As for the background, I wanted some sort of movement in the portrait so I created clouds and incremented(or decreased for the second one) their x coordinates to depict movement from one end to another.

Reflection

I really enjoyed working on this assignment and I think I was able to grasp the basics of p5.js . However, I do believe there is a lot left to experiment with and I would like to do so in the upcoming assignments. I think I could have done better in this assignment by adding more interactivity through either clicking on the canvas or with the cursor hovering on it. I would love to try similar things and introduce more interactivity in my next assignments.

Concept

We had to create a self-portrait, so I tried to make an animated version of myself which turned out to be a very fun process. The code sets up the canvas using createCanvas(400, 400) and uses the draw() function to render the face. The face, eyebrows, eyes, nose, hair, ears, beard, lips, shirt, and neck are created using various shapes such as ellipses, triangles, arcs, rectangles, and lines. The fill color and stroke color of each shape is set using the fill() and stroke() functions. The background() function sets the background color to a light gray color. The color of the shirt changes from black to different shades of white and black as the fill() is set to random(255) when the mouse is clicked on the canvas. Also, the eyes blink once every second as the frameCount()% 60 will be true once every second. The code also contains commented out lines that would create a grid for reference, but this is not displayed in the final output. This helped in the positioning of the facial features.

Code

let blink = false;
let color1 = 0;
let color2 = 0;
let color3 = 0;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  
//background
background(51, 102, 153);
  noStroke();
  for (let i = 0; i < 400; i += 20) {
    fill(102, 153, 204);
    ellipse(200, 200, 400 - i, 400 - i);
  }

fill(194, 150, 130);
  noStroke();
  let face = ellipse(200,160,180,200);
  fill('white');
  let eyel = ellipse(165,140,35,15);
  let eyer = ellipse(240,140,35,15);

 fill(50, 60, 60);

//   eyebrows
  stroke(21, 19, 19);
  strokeWeight(3.5);
  noFill();
  arc(165, 130, 45, 5, PI, TWO_PI, OPEN);
  arc(240, 130, 45, 5, PI, TWO_PI, OPEN);
  
  //eyeball
  noStroke();
//   fill(0);
//   ellipse(165, 140, 15, 15);
//   ellipse(240, 140, 15, 15);
//   fill(255);
//   ellipse(164, 136, 5, 5);
//   ellipse(239, 136, 5, 5);

  
 if (frameCount % 60 == 0) {
    blink = !blink;
  }

  if (!blink) {
    fill(0);
    ellipse(165, 140, 15, 15);
    ellipse(240, 140, 15, 15);
    fill(255);
    ellipse(164, 136, 5, 5); // left eye ball
    ellipse(239, 136, 5, 5); // right eye ball
  } else {
    fill(194, 150, 130);
    ellipse(165, 140, 35, 15);
    ellipse(240, 140, 35, 15);
  }
  
  
  //nose
  fill(194, 150, 130);
  stroke(21, 19, 19);
  strokeWeight(1.5);
  triangle(200, 155, 193, 190, 207, 190); // nose tip

  //Hair
  fill('black');

  arc(200, 110, 160, 120, PI, 0);

  triangle(230,67,210,67,250,120);
  triangle(240,67,220,67,260,120);
  triangle(250,67,230,67,270,120);
  triangle(260,71,240,60,280,120);
  
  
  //Ears
  fill(194, 150, 130); // set fill color to match the face
  noStroke();
ellipse(100, 160, 20, 40); //left ear
ellipse(300, 160, 20, 40); //right ear
  
  // Beard
stroke(0); // set stroke color to black
strokeWeight(2.5);
for (let i = 115; i < 175; i += 3) {
    line(i, 180, i + 8, 115 + (i*0.88));
}

for (let i = 115; i < 175; i += 3) {
    line(400 - i, 180, 400 - (i + 8), 115 + (i*0.88));
}
for (let i = 180; i < 220; i += 3) {
    line(i, 200, i, 210);
}
for (let i = 180; i < 224; i += 3) {
    line(i, 220, i, 260);
}

  
//Lips
fill(184,63,63); // set fill color to red
noStroke();
arc(200, 210, 40, 30, 0, PI, CHORD);
  
  
  //shirt
   // fill("#151E3D"); // dark blue


  fill(color1,color2,color3);
  rect(125, 260, 150, 140);
  rect(95, 260, 30, 100); // left sleeve
  rect(275, 260, 30, 100); // right sleeve
  
 
  
  
  
  //neck 
  fill(194, 150, 130);
  rect(181, 260, 40, 30, 5);
  

//grid for refernce
//     stroke(0); // set stroke color to black
//   strokeWeight(1); // set stroke weight to 1 pixel
  
//   // draw horizontal grid lines
//   for (let i = 0; i <= 400; i += 20) {
//     line(0, i, 400, i);
//   }
  
//   // draw vertical grid lines
//   for (let i = 0; i <= 400; i += 20) {
//     line(i, 0, i, 400);
//   }
  
}
function mouseClicked() {
  if (color1 === 0) {
    color1 = random(255);
  } else {
    color1 = 0;
  }
  if (color2 === 0) {
    color2 = random(255);
  } else {
    color2 = 0;
  }
  if (color3 === 0) {
    color3 = random(255);
  } else {
    color3 = 0;
  }
}

Reflection/Future Improvements

This code provides a basic outline for an animated face and could be used as a starting point for further development. Some potential improvements for the code include adding more details to the face, such as the eyes’ pupils and reflections, more defined eyebrows, and additional shading to add depth. Adding more hair styles, clothing, or accessories to personalize the character. Incorporating user input to allow for customization of features, such as hair style, eye color, or clothing. Improving the overall structure and organization of the code, such as using functions to keep the code more modular and easier to maintain. Overall, there is room for further development and improvement in this code. I learned the usage of basic shapes, functions and some forms of interactivity which I implemented. The assignment was so open-ended that I just wanted to add more and more stuff.

Overall Experience

For our first assignment, we were tasked with creating a self-portrait. As someone with little art skill, all I could think of was drawing a face that resembled me. I am not quite sure if I succeeded though ;D. Coding for me has always been tedious hours of writing code and handling data files but the artistry of this assignment was the complete opposite. Playing around with basic shapes and putting them together into a face, also accessorizing was really fun.  

Process and Progress

I started with an elliptical shape for my face and then added two more for the eyes. To portray my brows, I discovered that simple lines with a strokeWeight of 5 produced the appropriate thickness. It was the placement of eyelashes that I first realized that finding coordinates for drawing a simple line was not as easy as it seemed and I looked up for coordinates of p5.js. https://editor.p5js.org/prewiredonline/sketches/mA6XRFf-G. This is where I got what I was looking for and it eased my way through the rest of the portrait. I think the turning point of my sketch was this stage where the eyelashes were in the making and the coordinate plotting made it easier for me:

This is how my final portrait looks like: 

Reflection

I am pleased with my initial p5.js project, but I see room for improvement by incorporating animations into my self-portrait. I look forward to experimenting with these elements in my future assignments. This project was a great step for me in the Interactive Media world and I can’t wait to tackle more cool interactive projects in the future!

Overview:

For this assignment, we were asked to draw a self portrait using the basic functions built into p5.JS. I started by drawing a rough sketch of what I wanted my self portrait to look like. For the self portrait, I tried to highlight the main features of my face. I think my spectacles are one of the very important feature of my face so I decided to add these to the portrait. Furthermore, while coding and looking at the examples that were provided to us, I decided to add some interactive features to the portrait. Overall, the assignment was really fun and helped me in understanding some of the key concepts of p5.JS.

Concept & Process:

The concept for my self portrait was fairly simple. I wanted to make sure that I add all the key features of my face and give it a animated look. I tried adding curly hair but it turned out to be really difficult and the results that I got after that weren’t really satisfying so I just went ahead with normal hair. I just used arc over my head to make it look like hair. As I mentioned earlier, spectacles were really important to me so I spent fair amount of time fixing them around the eyes. I used arc function and line to make it look more realistic. Moving on, for the nose and the lips, I used arc to make both of these. For the ears, I just rotated the arc and added those arcs on the both sides of my face. Furthermore, I added a neck and shirt using the rect function. I added the arms on the both sides by increasing the stroke weight and drawing lines next to the shirt. This turned out to be really realistic and allowed me to get the look that I wanted from this self-portrait.

Interactivity:

Inspired by the examples, I decided to add some interactive features to the portrait. For the background, whenever the mouse is moved around the canvas, ellipses are drawn of different colors. This required to run a for loop within the draw function and generate random values between 0 and 255 for r,g and b to later use them in the fill function. Furthermore, similar to the of “Koala portrait” example, I decided to make the eyes move in the same direction where the pointer goes on the canvas. This was fairly simple and all that required was to multiply the coordinates of the pointer  on the canvas with a very small constant  and add it to the coordinates of the ellipse that I had drawn for the pupils. This allowed me keep the pupil within the eyes and add this simple interactivity. Lastly, when the mouse key is pressed, the color of the shades is changed to random colors to create a cool effect. Again, I generated three random values for the r g and b using a for loop and the random function of p5.js to use these values in the fill function.

Future Improvements:

In future, I want to learn change this portrait from an animated one to a more realistic one. I hope to learn how to make curly hair and add it to this portrait. Furthermore, I’d like to add better and more artistic animations for the background. I would love to design better nose and ears using the points or any other function that allows me give them a more realistic touch. I hope to learn these skills and implement them on this portrait.Here’s how the final portrait look like:

For my first assignment, we were tasked with creating a self portrait of ourselves using p5js. I’ll be honest, I’d say this was a pretty nice intro and learning experience to p5js and arguably one of the funniest moments i’ve had when it came to coding.

I’ve always done coding with a serious intent and I think that took the fun away from my projects, hence I wanted my portrait to reflect that. Thus, I decided to just wing it and make the funniest, interactive and outgoing portrait I could think of XD.

Portrait:

Idea and Process: 

My initial thought was that I want my portrait to have movement instead of just a static image because then it sort of brings it to life. I first drew myself using some basic shapes such as circles, ellipses, bezier curves etc. However, I had difficulty thinking of how I could incorporate this movement idea with myself.

After thinking and reviewing some of the examples, I figured I could try making my eyes follow the user’s cursor, that way it’s pretty fun and fits that movement aspect. For this idea, I decided to create the pupils at the center of the eye and it would sort of be constrained within the radius of the eye depending on the X and Y coordinate of the user’s mouse. I used some calculations for this as shown below:

circle(103+(0.03*mouseX), 187+(0.03*mouseY), 20);
circle(161+(0.03*mouseX), 187+(0.03*mouseY), 20);

I wanted to have a little bit of fun and add my own humour (pretty cursed) into the portrait so I added the impostor from the hit game Among Us into the portrait cause why not I thought it’d be funny. I used a variety of shapes such as ellipses and rectangles to construct it.

Later on, I decided, why not add a feature for if the user presses the mouse. I didn’t know exactly what to do but I figured I would piece it together as I went along coding.

As time passed I decided it would be funny if the impostor basically turned into some epileptic god, so I used the random() function to continuously change its colour. I also decided to edit my facial features and add golden hair (sort of resembling Goku going super saiyan) to add to the chaos and kinda act like I was ascending.

However, it still looked plain to me, hence, I decided to add some cool flickering stars in the background by using a for loop which would constantly add ellipse-like stars in the background at random points on the canvas as shown:

if(mouseIsPressed) {
   background("black"); 
   for (var i = 0; i < 10; i++) {
       var size = random(5, 15);
       ellipse(random(width), random(height), size, size);
   }
}

Overall Thoughts: 

Overall, I found it quite interesting with how many functions there were. One cool function I found was the translation function (used on the floating among us) which also added to the movement aspect of my portrait.

Dealing with shapes was tricky because I didn’t know which coordinates I had to put them at or where I would have to alter the control points for curves. Hence, I decided to add a sort of coordinate tracker for my cursor because I figured it would be really handy to when where I would like to place all of my shapes and curves, hence I added one on the top left.

One thing I would definitely improve is organizing my code. Most of the functions I used, the arguments were hard-coded and I feel like I could’ve used traits such as width and height to organize my code space. I could have also used functions such as drawFace() or drawClothes() to further organize my code.

Nonetheless, i’m no expert at art but this was a super awesome and fun assignment and I feel like I developed a strong foundation for some of the basic functions used in p5js.