Face Generator - Andrew Moffat This is the refined version of my face generator. To begin with, the original version of the project featured a monochromatic sketch style, using Bezier curves. I wanted to revisit this project as I felt that I had a really solid base of code and graphic design to build upon, where I had left the project it was almost as if I had drawn the outline, but had forgotten to colour it in. I identified that one part of the project, to produce unique faces was being held back by the stylistic similarity, the lack of distinct visual elements.
I initially began by changing each face element into its own object, and created the grid using an array of objects. My intent was to utilise this for animation, but unfortunately this did not work out. I then enlarged the faces to allow for quicker comparisons, and increased the saturation on the faces to a more natural skin tone. I also refined the mouth down to enhance the visibility of emotion, and enlarged the eyes, as well as adding in variation with the eyebrows as the eye position. I also added in variation around the ‘Gauntness’ of the lower half of the face.
With the next version I decided to focus my efforts on replicating a ‘male’ face, as this would reduce the complexity of the code and allow me to focus on refinement. I chose to work on facial hair next, beginning by adding in a simple shape representation, but decided that this didn’t look quite right. I wanted a bit more realism and uniqueness, so I chose to add in another layer of thicker but more transparent edge lines that were coloured blonde or brown to break up the contrast of the black edge lines and the beard, and to soften up the lower half of the faces to create more diversity.
The next iteration was focused on adding in hair. I initially began by approaching it in the same way as the beard, by using a block shape to shade in the area, and soften up the edges using softer transparent lines. This block shape did not work at all, and just made the faces look blocky and uniform, so I removed this and just left it with the soft edge lines. I didn’t like how flat everything was looking, so I experimented with layering the base shape with different opacities and brightness to push it into 3d space, but this didn’t really produce an effect I liked. I decided to stick with the sketch style, and utilizing my line function create shading similar to what you would get with a graphics marker. I really loved the effect this produced, but wanted it to pop a bit more, so made the hair some nice bright colours.
With my final iteration, I decided I loved the forms that I had come to, but didn’t like the aesthetic that was produced by the colour combinations. I decided to look back to last project, and pull the colour palette from that and use it for this version. That colour scheme tied it all together, with a primary colour scheme perfectly tying in and complementing the sketch/graphic marker style
Modified http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js
https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js
https://d3js.org/d3-random.v1.min.js