Facey Face is a project to automatically generate a wide variety of faces. The faces below are randomly generated (reload the page to get a different set!)

The very first aspect of the face that gets selected is its shape. Face shape is divided into 5 features:

• Forehead Width
• Temple Width and Height
• Cheekbone Width
• Jaw Width and Height
• Chin Width

Temple height is selected to be somewhere within the top 60-80% of the head, and Jaw height is selected to be somewhere within the bottom 20-40% of the head. In the following example, you can see the control points at each of the 5 feature locations.

The face's eyes are always drawn at the same height as the face's temples. Eye size is chosen to fit (mostly) within the face's temple width, given the randomly selected horizontal eye spacing. Like the eyes, the mouth is chosen to always be at the same height as the face's jaw, and has a randomly selected width such that the jaw always fits within the face's available jaw width.

Faces can have two different types of hair: up hair and down hair. Up hair is always tangent to the face's forehead, and has varying length and color. Down hair always points straight down. Both down hair and up hair have different spreads. The shorter spread covers only their forehead, and the longer spread covers their temples as well.

Up hair examples (with short and long spread):

Down hair examples (with short and long spread):

Skin tones are chosen randomly from the Pantone "skin tone" list of swatches:

Rendering is all done by Paper.js, a great library for doing vector graphics in javascript.