Self Portrait — Billy Bennett

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

arc();

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!

ICM Blog