Games from Nothing: Black and White Exercise 3 — Photo Booth

Photo Booth is a game built on the transformation code (lab 8) for the “amusement park” assignment . On the center of the screen, a simplified, abstract character is formed with a combination of geometrical shapes. This character has a hexagon face, a rotating polygon hair, two blinking ellipse eyes, a rotating triangle mouth, a swinging rectangle body and two hands. Each of these shapes is coded into its own matrix, which is rotating at its own speed.

Screenshot_2014-11-30-23-40-53

When the screen is tapped, the animation will stop, and depending on the state of each shape, the character will have different facial expressions as well as body positions.Besides stopping the action, tapping also produces a shutter sound to simulate a real photo booth setting.

At the same time, the program will takes a screenshot, and the goal of the game is to take photos with smiley faces.

Screenshot_2014-11-30-23-41-10

During the design phase of the game, I was influenced by the idea “expressive interface.”(Preece, 143)  The main idea of building expressive interface is to use graphical elements such as icons to convey emotional states. Expressive interface is favorable because it conveys the state of the program in fun and clear ways. For example, in Chrome, when a page crashes, a folder with a sad face will appear, along with the error note:

google-chrome-about-crash

Like Chrome, many icon-related expressive interfaces are based on the idea of human facial expression. Our daily life is filled with this kind of simple emoticons such as :), :( , or more complex ones such as (☆▽☆) ,~( ̄▽ ̄~)(~ ̄▽ ̄)~.

My goal with this exercise is therefore to try to combine simple shapes and actions, and to see how we perceive it as a human face. After play testing, I found that we do have a strong facial recognizing ability. Even many core features are not drawn, the face is still recognizable. The triangle can sometimes be perceived as the mouth, and sometimes as the nose; the blinking eyes changes the direction the face is facing; even when the polygon (intended for hair) moves below the face, it can be perceived as beard.

Screenshot_2014-11-30-23-42-01

For future improvement, I want to incorporate more shapes to form a complete body, and have moving legs and joints. A reset button will also be very useful since the hair shape is depending on a random function, so each time the player can have a unique character.

Screenshot_2014-11-30-23-42-34

Author: Shiyuan He