PROJECT #02 FACE GENERATOR

THE FACE OF ECONOMIC DIVIDE

Description

Brief: Create a face generator using customized variables and the random() function.

Concept: Manipulation of variable to define how many faces will be created, their size, and the size of an image of a dollar bill, and the expression of the face, to create a narrative of economic divide - how most of all wealth is in the hands of few.

Design Process

Step 01 Ideation

Sketched three possible ideas I was interested in. The first one was drawing a pug, who looks happier when a donut (controlled by the mouse position), was closer to his mouth. When he his happier, his eyes sparkly, and he drools and pants.

The next idea involved randomizing eyes, hair and ears of a masked face everytime the mouse is clicked, as a commentary on how little we have to work with recognising faces when people have their masks on.

The final idea I thought of was the one I chose - a face which multiplies on tapping, and in proportion - the resources available are reducing - and the faces look sadder. I wanted it to serve as a commentary on the economic divide in our capitalistic world, and the moral dilemma that the finance system places on everyday decisions we make.

Step 02 Square that reduces in size on click

For this project, as new concepts had been introduced, it was useful to start sketching to figure out how to achieve this. I created a variable called priority that multiplies itself by 2 on mouse-click. This would determine the number of faces in each row. I used this variable to control the size of the face too, by using it as the denominator of the width, height parameters.

Click to see the box grow smaller.

Step 03 Fill the Canvas with Faces

I used 2D primitives to complete the features of a simple face. I then had to think of a way to create all the squares depending on the number of times the mouse has been clicked. Initially I tried to use if/else statements. But that made the code very long and difficult to follow, as I had to create a new set of if/else for every click (which I began to monitor with a variable called 'count').

Then I figured that I could use 2 for loops to generate the faces. I'm not sure if this is the most efficient way, but it worked well. I had made two more variables (valy and valy), which carried the x and y positions of each face being made.

Step 04 Eyes that follow the $$$

I managed to create a simple dollar sign whose position was dependent on the mouse position on canvas. Then I tried to manipulate the eyes of the face to displace based on the mouse position.
If I had more time, I could try to improve this effect, because what I've managed right now is that every eye is displaced by the exact same value on the x and y axis. I would have liked to find a way to displace the eyes based on the eye's relative position from the mouse, so if the mouse was right on top of the face in the corner, that face looked forward right at the eye.

By this point, I also realised that the browser began to hang, as the number of clicks crossed 8. I needed to stop at this point and revert to 0. You can experience this in the sketch above :)

I shared this sketch with a number of peers, and received feedback - the key one being that the mouth didn't look clean, and while in the larger economic class, the smile was turning straight, it wasn't visible, and not clearly sad/upset. One person was also mentioned that the dollar sign looked incomplete. So I decided to use an image instead.

I also tried to use random() to manipulate colour, and get a specific range of colours, however this proved quite difficult. I thought be manipulating just two hues in the RGB formula may yeild very analogous colours, but it was hard to avoid murky colours.

Then I limited most values to 50 digits closer to 255, so that they're light and pleasing, without grabbing attention. I wanted reds and blues to be higher than greens, so that it compliments the green faces nicely.

Reflection

Reflections on Techniques

I did not know about the rectMode(center) function. It would have simplified my code as I struggled with positioning the facial features (especially since I had to position based on the economic class and the consequent number of faces).

I could have explored how to use random more - I wanted to randomly pick one face each time - a rich face - who was blessed by birth and didn't have to hunt for money. But I could not figure out a strategy before the deadline of this assignment

Additionally, I would have liked to clean up my code, leave more comments and perhaps make more variables that might make the code more readable (for example, creating a variable called eyeWidth instead of repeating 'steps/6' everywhere).

Discoveries of the Chosen Form

Since the psoition and size of the face was changing with every click, it required careful refining to position and size each shape based on variables (like 'priority', 'steps', etc), which were in turn controlled by the number of clicks ('count'), and this calculation was different for circles, rectangles and arcs - a lot of trial and error was required to perfect it.

I think this inspires me to try manipulating more organic forms like curves and lines based on randomised variables, to generate some unpredictable form, that might not mean anything, but would just be playful and represent a unique chaotic visual every time.

Credits

This project used the typeface Nanum Gothic Coding by Sandoll licensed under Open Font License as well as an image of the 100 USD from the CFI Education (Corporate Finance Institute)