Creating a Portrait with p5.js

As a person who doesn’t know much about creative coding, using many JavaScript libraries is something new. Even though I’m quite familiar with JavaScript, but it was my first time using p5.js – a JavaScript library to make drawings. I thought p5.js is really cool! It can make coding much easier, since it provides many functions and clear references on the website.

The first ICM assignment is to make our own drawing using 2D primitive shapes. I decided to make a self-portrait. At first, I thought it would be easy. Just draw a sketch on paper, scan it, make a layout in Photoshop, then code it based on the X Y coordinates in Photoshop. But I was wrong! It wasn’t as simple as I thought.

(TL;DR – here’s my final drawing!)

Yes, the first thing I did was making a sketch of me. Here’s my sketch.

Since we can only use 2D primitive shapes, I thought I would combine shapes like rectangle, ellipse, triangle, trapezoid, polygon, etc. But looking at my own sketch, it was asymmetrical. So I needed to draw a freestyle 2D shapes. Thank goodness p5.js has a function to make a freestyle drawing – it called beginShape(). So I would combine basic shapes such as ellipse, rectangle, quadrilateral, and my own freestyle shapes.

Here’s the thing: to draw a freestyle shape, I needed to know the X and Y axis! I thought it would be easy to find them with the help of Photoshop. Then, I scanned my sketches and created a layout in Photoshop. I thought it would be helpful if I made a layout and used grid system in Photoshop to know where were the X and Y coordinates.

 

Eventually, it didn’t work that well. I was frustrated finding out where were the X and Y coordinates, since there were a lot of edges. It took me so long to find them! Then I gave up with Photoshop.

I googled how to find out the coordinates. Then luckily, I found a site to generate image to HTML code – an Image Map Generator. I uploaded my sketch, created hot spots, then it would generate the edge coordinates in HTML code.

 

Tada! It would tell you the edge coordinates right away! Every tuple (pair) shows the X axis and the Y axis. Then I just put these on the code, using the right syntax in p5.js.

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="digital-sketch.jpg" usemap="#image-map">


<map name="image-map">
    
<area target="" alt="face" title="face" href="" coords="129,262,148,367,192,394,245,394,279,369,308,337,327,259,324,209,294,166,253,151,186,157,150,184,134,212" shape="poly">
</map>

Then I started to code. I found it was very helpful to organize the lines into some groups. I grouped them based on elements, such as //body, //neck, //face, //eye, etc. I also noticed that p5.js works like Photoshop, in layers. So I write my lines based on drawing structure (the shape on the back first all the way to the front).

Here are some example of the combination of basic shapes and freestyle shapes using beginShape(). Also, how I organized my lines into some groups.

    // body
	fill(lightpeach);
	noStroke();
	quad(335,416,419,456,449,550,337,551);
	rect(112,419, 229, 132);
	quad(112,419,56,456,16,552,112,551);

    // face
	fill(pastelcream);
	noStroke();
	beginShape();
	vertex(129,262);
	vertex(141,348);
	vertex(152,368);
	vertex(192,392);
	vertex(219,397);
	vertex(247,394);
	vertex(283,370);
	vertex(307,337);
	vertex(326,258);
	vertex(315,197);
	vertex(272,149);
	vertex(189,157);
	vertex(148,191);
	vertex(133,223);
	endShape();

Overall, I really enjoyed this exercise. This project was perfect to learn the basic of p5.js. I’m also happy with the result! Here’s the code of my project.

Leave a Reply

Your email address will not be published. Required fields are marked *