Westworld

Project

Spoilers for Westworld Season 1 are included below.

Once I really started to grasp coding on the web and its possibilities, I began to imagine new ways to bring my other creative skills to the screen and interact with them. One idea that had been floating around in my head for a while was trying to recreate the hollow-face optical illusion. I'd recently learned all about 3D transforms in CSS and thought that the best method of achieving the illusion's effect on screen.

The first test I did for this project was to see if the setup I imagined would produce the effect I wanted. I drew a face on a piece of transparency film and folded it in half to manipulate by hand; playing around with this prototype answered some of the layout issues I'd been unsure of. I figured I could create the inside or inverse of a cube edge to bisect the face into each half and rotate the cube to move the face in one direction or the other. This "two sides of the face" notion sparked the inspiration for subject matter—I'd been watching the TV show Westworld and was fascinated by the character progression of Will turning into the Man in Black.

Process

After searching through show screenshots and promotional imagess to find reference photos for each character's face, I cut them together and drew a quick outline to use for prototyping in the browser. Each half of the face would be attached to a cube side and would line up on the edge of the cube facing the viewer. Setting up this 3D cube with the correct transforms to each side was a bit tricky, but by color coordinating the sides and inspecting the transforms inside the browser helped set it straight, or rather, set to a 45 degree angle in this case.

The next challenge was incorporating the movement of the face as the mouse passed over each side, and I learned a lot more Javascript and brushed up on my math skills to make it happen. Wrapping my head around how to translate the movement I wanted to happen into code that would do the same proved a struggle, but I found that talking through it while drawing simple diagrams was an easy way to break it down into understandable pieces. I needed to tie the rotation of the cube to a translation that would make the cube remain at a single point and pivot around an axis as the mouse moved back and forth across the screen.

Once I had the framework for the art set up and working, I started digitally painting the final portrait that would be rigged up to the cube. I went back again to the photo reference mockup I made for outlining and instead began to paint in blocks of color and shades. The bottom layer needed to blend the two faces seamlessly, so I started with a blob-like underpainting of flesh tones to create an even base on which to build up the features of the different faces.

After finishing the two face halves and plugging the images into the 3D mockup, I decided to add another feature by painting the other halves of each face and fading them into each other as it moved one way and the other. I then finished each portrait and set up a second cube to overlay the first, gently adjusting the opacities to make it appear as though the face morphs from one into the other.

Execution

The final steps to this piece were manifold in detail: from adding a parallax background and filling out the suit of the bust, to color adjustments and refining the perspective and placement of each separate piece, to finally figuring out how to make touchscreens work the same way as mouse movements. View the final piece below by dragging your cursor, mouse or finger, back and forth across the image.