Creative Coding — Week 04
Random Facesssssssssss
link to code: https://editor.p5js.org/hl5667/sketches/_4jyH3lv8
For this week’s assignment. I started with writing a pseudo-code to build up the structure. Here’s the pseudo-code I tried to follow.
//List of elements →
//Head, Body, Neck, Eyes, Ears, Nose, Mouth, Hair.
//declare class for different body parts →
//constructions
//Create body elements
//function that triggered by clicking
//display elements
After that I start creating sketches in Illustrator.
During the coding part, the general idea of having different faces via clicking is by making all the facial structures positioned at random location at each click. I started with the eyes. I made sure both eyes are sharing the same x, y, height and width, so when they are positioned randomly they are still identical. I had created a new factor d ,distance between eyes, by adding and minus d I can position the eyes in the center of the canvas. I had applied the same method on the ears as well. After that I started to sketch out the face shape. I tried adding randomness to the roundness of each corner of the rectangle to show the difference of age and face shape. The ears are in the same class as the heads to make sure that both ears are always attached to the head. I treat the body and neck the same way to make sure there’s different figure as well. For the nose and mouth, I decided to used different modes of arc, because for the nose I need to have it filled; so that if it gets randomly positioned on top of the eyes, it would be able to cover it. The most complicated part for me is probably the hair. Within my initial design, I tried to use different haircut to represent different sex. Yet, I hadn’t successfully accomplish. I had created two different class for long hair and short hair, but I failed to make it random between these two classes. At the end, I felt leaving the background white is a bit boring, so I used for-loop to create a texture and added a frame to make it looks better.
Here’s some random faces generated from my code.
