For this assignment, I chose to draw my favorite cartoon character “Luo xiaohei”, a black cat, as my spiritual character. At first, I was quite indecisive on which character best represents me as a self-portrait, but as I tried to look around, I just saw my xiaohei keychain and found myself thinking of how relatable (and adorable) he is. To fully utilize the skills acquired during class, and even further challenge myself, I decided to draw him being annoyed, where he would frown and his eyelids become slanted, forcing me to experiment/practice more with the arc function.
Some code that I’m really proud:
The front legs where I did multiple experiments with the arc diameter, width, and height!
As well as the ears, where I kept on experimenting with layers and arc values (as you can see the complex PI values, the QUARTER_PI/8, and the green part last)
I started the assignment by drawing the sky and grass. Because Xiaohei is a young cat, he’s pretty small, so I made the grass section bigger than the sky to create this lower vision point. Originally, I started drawing the head first like how I’d usually do, but then realized drawing the head first makes drawing the torso difficult because I used arcs for the torso and it’d create a “hill” on top of the head, so I switched order and made the torso drawn first and then other body parts, so the torso could be “covered” and things would look more natural. After I was done with the body, I began to do the tail, where I gradually practiced my arc functions.
I drew the tail in 3 sections: one half oval for the tail connected to the body; one half circle as the tail turn; one half oval for tail end.
Then I began drawing the eyes and ears. With the eyes, I first drew 2 slanted lines for the “frown” and then experimented with the pupil and “white” part of the eyes in the way they are tilted. After I’m done figuring out the tiltness, I switched the order of the line and the eye part to make things more natural. Same applied to the ears: I kept experimenting with the width, height, and arc angles.
I referenced this picture “Xiaohei“ and also sought help from the p5js reference library “reference library”
Reflection and future improvements
I think one thing I could do better in the future is perhaps draft out the parts of the drawing and dissect the parts into orders of layers (which gets to drawn first and which last), so I can make the process a bit smoother, in the sense that I wouldn’t need to spend the time on that but rather on the finer details like the angle of the eyes and ears.
For my first assignment in Intro to Interactive Media, I decided to recreate Pikachu using p5.js. To build the sketch, I combined basic geometric shapes like circles, triangles, and quads with a few custom shapes for details like Pikachu’s unique tail.
How this was made
I started by making Pikachu’s body using a simple rectangle shape. Next, I added a circle for the head. I used smaller circles and arc function to draw the eyes, nose, mouth, and bright red cheeks. For the ears, I combined long arcs with sharp triangles at the tips to imitate Pikachu’s pointed look. I also used AI to get an explanation on how to use the rotate function properly so I could angle the ears correctly. The main problem was Pikachu’s tail, which has a unique zigzag shape that is hard to recreate with basic shapes. I explain more on how I managed to draw the tail in the next section.
After finishing this part of the code, I felt very satisfied with my work. At first, I drew the entire tail outline using line() functions. However, after finishing it, I realized that lines cannot be filled with color. I then searched through the p5.js reference page and discovered that I could use the beginShape() function to create any shape I want by plotting coordinate points. I utilized this function, plotting each vertex to finally make a shape that matched that specific zigzag pattern and filled it smoothly with yellow color.
This assignment turned out to be a bit more challenging than I initially expected. Still, I really enjoyed the process of figuring out different ways to draw the specific shapes I had in mind.
For future assignments, I would love to move toward more realistic sketches, and eventually start adding animation into my work.
This week in class, we learned how to use basic shapes, colors, and drawing functions in p5.js. I started my self-portrait by creating the face using an ellipse to make an oval shape. After that, I worked on the hair. I realized that the hair looked better when I put its code before the face, because this allowed the hair to be behind the face. I then changed the order of my code.
For the hair, I used an arc for the top part and a rectangle to fill in the rest of the hair. I chose a brown color and used a color code with the ‘#’ to allow me to select a specific color instead of guessing colors with the numbers. For the face, I added a skin-tone color and then created the eyes. I used three ellipses for each eye to create the white part, the brown eye color, and the black for the pupil. For the nose, I used two simple lines. For the lips, I used two arcs and a line in the middle to create the shape of the mouth. Finally, I used a rectangle to create the neck.
A piece of code that I am particularly proud of is the code I used to create the eyes. Although it was basic, I was proud that I was able to make them and experiment with different colors and eye shapes. It took a lot of trial and error to get them the way I wanted, but I was happy with the final result.
I used AI for a small amount of help with creating the lips and eyebrows through this I was able to solidify my understanding of the two_Pi feature. I needed help understanding how to use arcs to create the shape I wanted. Other than that, I did not rely heavily on AI. I understood the basic concepts we learned in class and used them to create the portrait myself.
Reflecting upon this week’s tasks, I enjoyed learning how to code shapes and colors through p5.js. I feel my work is very basic, but for a start, I think it is okay. It has given me ideas for future work and improvements. I would like to become better at placement and using numbers, as I tend to guess the numbers rather than calculate them. I would also like to learn how to add motion and movement within my code and work.
My goal for this assignment was to create a semi-realistic portrait of myself using the primitive shapes we explored in class such as: circles, ellipses, rectangles, quads, etc.
How this was made
I first started by mapping out where the face would be, then I added the hair underneath. Next I mapped out the shoulders and torso. Once that was done I started mapping out the facial features and adding my desired colors. For the colors, I searched up an rgb color picker that allowed me to easily customize my colors and extract the rgb components. In order to make sure that I wasn’t getting confused throughout the process, I added comments separating different parts of the drawing.
Other than the rgb picker and the p5js reference, no other tools were used.
Highlight of some code
After mapping out certain areas I began with filling in with color. I found the bangs and neck area especially difficult for different reasons. For the bangs, I noticed that using multiples of PI for the start and stop would result in awkward gaps across the forehead or would extend past the hair, so I experimented by incrementing different values of PI to see what looked best. As for the neck, it was made by two arcs facing outwards which I quickly realized meant that I couldn’t simply fill the space in between. To fix this, I incorporated the use of triangles and quadrilaterals in between which took some trial and error to find the exact coordinates needed to fill in the area.
I am proud of my attempt at drawing myself using p5.js. I now have a better understanding of the syntax used and the possibilities that can be achieved using p5.js. In the future I aspire to improve my code by changing certain aspects that would make it cleaner and easier to understand. For example, I would store the rgb components for each color in different variables so that its easier to use throughout. I would also create functions that draw repeating features, mainly the eyes, eyebrows, shoulders, and neck. Furthermore, I would also want to challenge myself by adding animations and more detail to certain parts of the drawing.
For this project, I wanted to depict a regular “headshot” of myself using different p5.js functions. My preference for aesthetic leans toward minimalism and simplicity, so I tried to make the portrait look “clean” and “slick” instead of super realistic. I chose a pink-green color scheme since one of my favorite drinks is strawberry matcha, and I want to incorporate parts of my personality into the portrait.
Ultimately, my goal for this project was to explore a variety of features on p5.js, so I practiced with the different primitive shapes we learned in class, as well as researched some other functions on my own.
My highlight code
As ironic as it may sound…my favorite part about my portrait is my background! Initially, I had a 1-color pink background, but it seemed too boring and I wanted some personality! I decided to create a checkered background with 2 different shades of pink. In order to create this, I worked with nested for loops, running variables i and j until the canvas width/height and having them as the (x,y) coordinates for the colored squares. I had previous coding experience with python and java, so I only really had to refer to p5 reference for the correct syntax.
//print checkered background
//loop 1 -- prints odd numbered rows
for (let i =0; i<width; i += 100 ) {
//ROWS--loop until width of canvas, increment by 100 each time to "skip" a block as it goes from left to right
for (let j =0; j<height; j += 100 ) {
//COLUMNS--loop until height of canvas, increment by 100 each time to "skip" a block as it goes from top to bottom
fill("#ffb8bb")
noStroke()
//the top x,y coordinate is the i & j that increments
square(i,j,50);
}
}
//second loop-print even numbered rows
/* similar logic to previous loop except this time i start i from 50 to create the "checkered" effect*/
for (let i =50; i<width; i += 100 ) {
for (let j =50; j<height; j += 100 ) {
fill("#ffb8bb")
noStroke()
square(i,j,50);
}
}
the bean-shape mouth!
I’m also really proud of how I made the mouth. I knew I wanted a blob for an open-mouth instead of a smiley line because it looks cuter (and also less creepy). However, a blob isn’t a primitive shape and therefore I couldn’t figure out how to create the mouth the way I had envisioned. Then, it suddenly clicked that I can totally make it a super small arc with a huge stroke (I felt like a genius), which is exactly what I did to achieve the darker red mouth.
//mouth -- blob is created using an small arc with huge stroke
stroke("#a20b0b")
strokeWeight(25)
noFill()
arc(200,240,50,50,(PI/3),(2*PI/3));
How this sketch was made
the bangs (transparent green)
I started by planning out what would be the bottom-most layer (excluding the background), which would be the hair. The hair is simply 2 overlapping ellipses, which creates the middle hair part. Then, my head looked like an egg so I had to put some bangs. I did this by having 2 lines with a huge stroke, covering the top diagonally. The photo aside illustrates this, with the bangs being a transparent green for demonstration.
The eyes are just many circles placed on top of one another, while the eyelid is a half-circle arc (no fill) that sits behind the white of the eye. Because most of the features on this portrait (not my face :)) are symmetrical, it was quite easy to duplicate something twice. The nose is, also, just a small arc positioned in the center of the face.
This was what I wanted to do with the quadrilateral
The neck has two parts to it: a rectangle and the collar part, which is the bottom half of a circle. In between the neck and the collar is a green shirt, which I created by using a rectangle. I was really contemplating on whether to use a rectangle or a quadrilateral, since with a quadrilateral, I can make the slant of the arms, which I prefer a lot more. However, I then realized that the corners of these shapes are too sharp, which makes the body boxy and therefore less coherent. This could be fixed with border-radius, which allows for rounded corners, but there were only available as a parameter for rectangles, which I decided to stick with at the end.
function wink() {
//first I cover the original eye using an ellipse the blends with the face
fill("#d9a582");
noStroke();
ellipse(230,195,60,60);
stroke("#341504")
strokeWeight(3)
noFill();
//then the 2 lines
line(245,175,212,191);
line(245,210,212,191);
//after wink() runs for 500 milliseconds, openEye() runs for the rest of the setInterval which would be 2.5 secs in this case
setTimeout(openEye, 500);
}
I created a function wink() to also play around with animation. This function draws a large ellipse on top of my right eye in the same color as my face, which covers it. Then, 2 lines created the “<” which indicates a wink. Then, I put setInterval(wink, 3000) in my setup function so that it winks after 3 seconds. But then, I stumbled upon a bug as the person wasn’t winking when I ran the code at all! I then realized that the draw function, which currently contains all of my code, immediately redraws the face on top of my winked eye. Since the portrait was completely static at this point, I moved all of my drawing to setup(). This solves the issue, but then my person stays winked. I tried solving this issue by having another function that draws the original eye, called openEye() and add setTimeout(openEye, 500) to my wink(). What this does, essentially, is have the person wink for 500 milliseconds and then the normal eye appears for 2.5 seconds, and then another interval happens where it winks again. I’m not sure if this is the most optimized way to create this animation, but I had fun playing around with the facial expressions for sure!
Reflection
Overall, I’m really happy with how my portrait turned out! I think I have, in general, achieved the “clean” look I was aiming for. I also love how colorful and vibrant the sketch is, I feel like it captures my energy really well. One thing I feel like I could improve if I had more time is to make it more like me! This would be a bit of a challenge since I don’t like anything that is too detailed, but I’d like to put myself through those challenges some time! I could try having little blushes/freckles, or a different accessory (since I never wear bows).
Also, a mistake I made in the beginning was not determining the appropriate canvas size. I kept it at the default size, 400×400. I only realized after sketching the head and the hair that this wouldn’t leave me enough space for the body, so I had to change the height to 500 pixels. In future projects, I would like to avoid this mistake as I could have to manually shift everything up/down/left/right by a certain value (which is kind of a hideous thing to do :)).
