All Posts

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.

Concept

I, for one, am not much of an artist. I hate having to draw specific lines and shape because I am always bad at details. That is why for this assignment, I decided to get creative with what a “face” is. As the assignment directions describe, I decided to stay far away from a realistic face and focus more on practicing what I can do with p5js. The motive for this portrait is this picture:

a self portrait through a shattered glass. Unfortunately, I don’t have the artistic skills, nor coding skills to replicate this painting on p5js, so I decided to use simple shapes and arcs to recreate my own self portrait.

Making Process

I didn’t have a full picture of what I was going to make from the beginning so it was very much coming up with new ideas as I working. Initially, I split the canvas with rectangles using a for loop and then I thought I could use this different sections as a gradation of colors so I set the color fill variable with the iterator in order to achieve that. Since the canvas was split in 12 different rectangles, I created an array of size 12 and use the iterator to find the color value stored in the array to make gradually changing color scheme. Then I built the face structure using the arc element also using the for loop I set for creating the split in the canvas. One issue with this method however, is that each arc from the four sections (x < 250 & y < 250, x  > 250 & y < 250, x < 250 & y > 250, x > 250 & y > 250) are all identical. While it does look haphazard because of this, I decided to leave it like this because a) for this assignment I focused more on getting used to p5js so I wanted to keep the for loop iteration in my drawing, b) this had an unintended modern art sensation which I thought was cool. So since I got this modern art looking progress going on, I decided to stick with that theme and incorporate simple shapes to represent my facial features: circles for eyes, triangle for nose, and an arc for my mouth. When I was done with the facial features, I realized that the result looked a little too simple. So to spice things up, I decided to make the facial features move which leads to the next section of my documentation.

Challenge

Turns out, making shapes move in certain behavior on the canvas was much more difficult than I expected. My initial assumption on how to make this work was to make a variable for the x and y position parameters and increase or decrease them. However, when I quickly learned that the shapes didn’t move as I suspected, I had go through a lot of trial and error to try to fix the bugs and get what I wanted. After time, I managed to fix the nose and mouth motion using a speed variable that would be added to the x and y position parameters. If the shape position would reach the left/right or top/bottom end, the speed variable would be multiplied by -1 so the shape motion would go opposite direction and loop so that it would move consistently. The real challenge, however, was the eye motion going in circles. For this one, I couldn’t figure out how to have a shape move in circles, so I did some research. Thankfully, I found a source code online that managed to make this happen

(https://editor.p5js.org/kchung/sketches/SJkdHhWUQ)

so I referred to this code and learned the sin() function and cos() function with an increasing angle variable according to radian to make a shape move in circle.

let x1 = 225 + 25 * sin(angle);
let y1 = 200 + 25 * cos(angle);
let x2 = 325 + 40 * cos(angle);
let y2 = 150 + 40 * sin(angle);

circle(x1,y1, 50);  
circle(x2,y2, 50);

angle += 0.0314;

Wrapping Up

After the challenging parts, I decided to add some sprinkles on the product like changing up the stroke colors and the weight or make a warming up in color gimmick using the angle variable I set for the circle motion. For colors, I knew I wanted to use red, green, and blue because they are the RGB (I know its cheesy but still I thought it was cool). For the color in the background being blue was pure coincidence after playing with the gradation effect so I was left with red and green which each became the color for the nose and the mouth. For the eye color being yellow, I just thought it was a nice color match.

Reflection

Looking back on working on this assignment, I was able to use some of the the basic coding knowledge that I knew beforehand such as conditions, iteration, arrays, etc.. but I also learned a lot about p5js coding environment and its unique functions like how the draw() function behaves or the shape elements. Through this assignment I was reminded a lot about processing which I learned in my freshman year in Intro to CS. As for future possible improvements, I know for sure my code is a hot mess with no comments, very haphazardly organized, and not the most efficient so I hope to be able to code a little more cleanly and in a better way next time, and also learn & utilize more of what p5js can offer.

For this assignment, we were to use p5js online editor to create a self portrait. It did seem like a daunting task, given my incompetence in art and drawings. However, as I played around with the code and different shapes, I put together my face and some of its traits to the best of my ability.

Creating Me

Starting with a blank canvas, I divided the project into various parts to compartmentalise my work. This allowed me to focus on one aspect of the project at time. I created functions to draw different parts of my portrait, which would provide a modular structure to the code as well as help me slowly develop my portrait.

function draw() {
  background(color("#0977f6"));
  
  drawEars();
  drawBody();
  drawNeck();
  drawFace();
  drawStrawHat();
  drawBlush();
  drawSpecs();
}

Note: The drawFace() function draws every element in my face.

I started with the outline of my face. Since, my face is oval-shaped, I opted to using an ellipse to achieve this. The parameters I used to make the outline of my face (ellipse) would later be used in every other shapes and objects. In order to achieve this, I made the parameters for the ellipse global variables by declaring them at the top of the code outside any function. I initialised their values inside the setup() function since it would only be run once. I use this global variables as such:

let f_x, f_y;

function setup() {
  createCanvas(500, 500);
  f_x = width/2;
  f_y = height/2 - 40;
  
  textSize(30);
  textAlign(CENTER, CENTER);
}

f_x and f_y refer to face x-coordinate and face y-coordinate respectively. All the shapes in the portrait is drawn with respect to these variables. In other words, the shapes are drawn with positions corresponding to some manipulation of the aforementioned global variables. Here is an example:

// Eyes
  stroke(10);
  fill("#eeeeee");
  ellipse(f_x - 25, f_y + 10, 20, 7);
  ellipse(f_x + 25, f_y + 10, 20, 7);

The above code snippet creates the two eyes. Notice that the positions of the ellipses uses f_x and f_y. Basing all the shapes in my portrait, I created a digital image of myself.

Notable Traits:

1. Straw Hat: The hat is inspired by one of my favourite fictional characters, Monkey D. Luffy.
2. Rosy Cheeks: I have perpetually red cheeks. Although its shape is not exactly an ellipse, making it an ellipse was the only way it did not look off.
3. Shadows: The shadow of my head on the neck was made by duplicating the head ellipse and translating it down. The width of the ellipse was then adjusted.

Future Improvements

While I was making my portrait, I noticed that making it dynamic was a challenge. The creation and implementation of global variables, f_x and f_y, did make it sort of dynamic as the portrait would still be intact even if we change the size of the canvas, it would be more dynamic if the shapes would also change size with respect to the canvas. This is something that I could work on to improve the customisability of the portrait.

Some great description.

I’m really proud of the ellipses. They represent my spirit.

Hi