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.
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.