206,348,800+ faces

This week, I created a face generator that generates a variety of colors and/or shapes for skin, hair, eyes, nose, and mouth every time the mouse is clicked. Each category offers:

  • Skin: 49 colors
  • Hair: 47 colors and 5 shapes
  • Eyes: 56 colors and random sizes between 20 and 40px
  • Nose: 4 shapes
  • Mouth: 4 shapes

I don’t actually remember if that’s how the math works, but multiplying all those numbers got me to 206,348,800. In reality, since the random eye size is any decimal from 20 to 40, I think the number is essentially infinite.

my process

My first step was to define the colors I wanted to use. I did not want to just randomly generate RGB values — I wanted these faces to look realistic, so I looked up some skin/hair/eye color palettes online. You’ll see some funky hair colors because hair can be dyed, but no face will have green skin or red eyes (some of the skin tones do run a little too red, but I liked the way that looked — maybe chalk it up to a sunburn.) Somewhat painstakingly, I typed a list of the hexcodes I was happy with, and put them into arrays. I stored those in a separate file (colors.js) to keep the sketch would a little neater.

I then built classes for the face, eyes, and hair. To test how it all worked, I initially did only one type of hair (the big afro, since it was the easiest shape). I built everything into the constructor, which I later found from Scott was not the best way to approach this. It worked fine in just generating new colors, but I got fully stumped when figuring out how to generate new shapes for hair, nose, and mouth. I tried a lot of silly things like creating arrays with beginShape vertexes all inside quotation marks, or creating a class for each hair style and then trying to randomly generate those, but didn’t get anywhere until I got a chance to ask Scott for help during office hours. He showed me how to use if statements and assign numbers to each shape, in order to then randomly call one of those numbers when generating a new face.

Once those if statements were working, I just finetuned the shapes and standardized the variable names to tidy up the file. I added the randomized eye size to give yet another layer of variety and really liked how that turned out. My last step was going back and expanding on my pseudocode — I was writing it as I went along, but wanted to make sure it was as descriptive and clear as it could be. If I had more time, I’d make a few more hair styles and nose shapes, but overall, I’m super happy with the results.