Self Portrait

I already had started Schiffman's Coding Train, although I hadn't used the p5.js web editor yet.  I had been in Processing.  So I had a bit of a head start, but also was happy to (painstakingly) learn the arc(), curve(), and bezier() functions more precisely.  I also wasn't used to a bit of the syntax, but it wasn't much of a hassle.

I knew I wanted to draw my face with the glasses using opacity.  To pick my RGB colors, I used this website and copy/pasted from there.  There may be better sites but that was the first one on Google.. ( I wonder if there is a setup function or class you can load that would allow simple word input for colors?)

I wish I knew a better way to draw the shapes so that the relationships could be maintained if the drawing was scaled, but I could only really do so much with dividing width and height.  Also, I would want to know more about how Reneissance painters use mathematics like the Golden Ration to scale their drawings properly. 

To help with navigation, knowing where my x and y values were as I hovered over say, the rim of the glasses, I put the code into a draw() function and used print(mouseX, mouseY); with Auto-Refresh turned on.  This helped me estimate where to draw lines to and such so that they intersected as needed.

Also, I would // each new line of code so that Auto-Refresh would work until i was ready to preview each new line...

// arc(

But I realized that if I type the function and close the parenthesis that followed, the code would not make the drawing disappear...


One question I had was - how could I draw the teeth using sin() function? I had to eyeball the curve of the lips and it was a pain in the ass.  I also made a variable for the upper lip values which made things a tad easier. 

var y = height / 1.55 + 2;
  line(168, y, 168, 292);
  line(180, y, 180, 300);
  line(192, y, 192, 306);
  line(204, y, 204, 306);
  line(216, y, 216, 303);
  line(228, y, 228, 296);

I would like to know a more streamlined way of drawing so that the picture could scale if the canvas size changed.  One thing that would have helped was to know if there was a way to reflect something across the screen?

Towards the end, I had to cut myself off from being too obsessive as I was getting into minor tweaks to the eye brows and eye shapes to change the emotion.  Very subtle changes in values were significant in effect!