Assignment 1: Pikachu portrait

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.


Code highlight

//Tail  
  beginShape();
vertex(235, 216);
vertex(252, 210);
vertex(248, 195);
vertex(262, 190);
vertex(256, 172);
vertex(290, 160);
vertex(275, 126);
vertex(230, 150);
vertex(241, 183);
vertex(234, 186);
vertex(237, 197);
vertex(230, 200);
  endShape(CLOSE);
//Brown part of the tail
  beginShape();
fill('brown');
vertex(248, 199);
vertex(231, 204);
vertex(234,216);
vertex(252, 210);
  endShape(CLOSE);

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.

Leave a Reply