Week 2 - Tiki Mask Generator

Design Process

I have a couple of Tiki Masks displayed at my home in India. So I got the idea to make a Tiki Mask for the Random Face Generator assignment. In popular culture, Tiki statues were engraved to symbolize the image of a particular God and as a manifestation of that God's mana or power. With well-formed tikis, people believed they could acquire protection from harm, strengthen their ability in times of war, and be endowed with successful crops.

I began the process by drawing faces in Adobe Illustrator. I wanted to provide users some control while maintaining the randomness factor, so I added buttons at the bottom of my sketch, making the interaction user-friendly. I labeled the buttons Base Color, Hair, Eyes, Mouth, and Design. Each time a user clicks/hovers over a button, the particular attribute would randomly display a new design from a set of that attributes. To achieve this, I used Illustrator for the designs and designed a set of eyes, mouths, and hair.

After making the look, I decided to experiment with code. To code the design, I began by adding interaction to primitive shapes like squares and circles. Coming from a non-programming background, my foundations were fragile, and I am glad I spent around 7 hours just playing with pseudo-code to explore the possibilities. Initially, I was confused about the randomizing factor after pressing a button. I wondered how to delete the shape and replace it with a new one. I also explored and stumbled across the remove() function, which would wipe out the entire canvas instead of just one shape. With time I discovered that I could achieve the randomizing ability by adding my shapes to an array. I was relieved that I could add functions to an array, which was exactly what I was looking for since my shapes were pretty complex. I also wanted to group the shapes in a function.

Since my design was too complex, I was running over a deadline and working parallel on other assignments, so I decided to use an SVG to P5 code convertor from the internet. I grabbed the code from Illustrator and converted and added it to my code. Unfortunately, this worked only to a point, but as the shapes got complex, the SVG-translated code also began to fall apart. Many shapes and colors went missing after getting converted to P5. It started happening way too often, so I concluded that using the converter was not a good idea. The converter made my code long and produced long lines of code for even the simplest shapes. It became challenging to manage the file since I had to scroll over it a lot, and soon it became clear that I needed a better alternative.

To solve the problem, I exported all my Illustrator shapes in PNGs and loaded them up in my code. Suddenly my code became a lot smaller and faster too.

Since my foundation was not strong, I had a lot of syntax errors. Sometimes, even though my logic was correct, I did not know how to call specific functions, which made my attempts quite hectic. So I asked my fellow batchmate, Keijiroh Nagaro, to help me. He was happy to help and cleared my doubts for four hours until I figured out where I was going wrong. Thanks to him, I finally understood how to get my code working.

I had trouble figuring out how the button would work or if there was a function in p5 to make a button from a shape, which is why I added If-Else conditioners as a makeshift arrangement to mouse coordinates at particular locations and randomize specific categories of shapes.

Finally, I added finishing touches to the project by reducing the sketch's frame rate, so the user could choose easily when the facial attributes were shuffling. I added a decorative cursor design that would continuously rotate, containing circular typography stating the instructions to assist the user.

Reflection

Working on this assignment was a great learning experience, and I had a fantastic time. I see myself becoming more driven in this class, as it is my favorite one. I devote most of my time to the CC assignments.

I love how I can make my design interactive using code and give the audience tactility in the user experience. I felt rewarded after seeing my design work through code.

I realized that I could spend so many hours on code and still be wrong, so leaving room for other people's opinions and help is crucial. I was able to concentrate on doing my work sitting in D12 and will continue doing my future CC assignments the same way. I see endless potential, and I am looking forward to learning what's next to come.