Art From Code: The Way Home

Full animated walkthrough of my conference project

My conference project is titled “The Way Home”. I intentionally did not want to just title it “Home”, even though it might seem like the end where the character arrives home is the most important part. To me, the process is more important than the destination. I wanted to emphasize that idea with the interactive form of the piece, which makes the viewer go through the entire scene before arriving at the end.

The scene I created shows a character walking home after what might be a long day of work. The buildings in the background become more sparse and turn into homes. Finally, the character stops walking and looks at the stars in a moment of stillness and relaxation.

I knew I wanted to involve motion somehow. At first I had plans to make it time-based, and essentially a short animation that you watch. But then I realized that it is so much more interesting to actually be involved in something rather than to just watch it. I thought about what specific things the medium of code offered. One thing I came up with was interactivity, so I wanted to incorporate something interactive into my project. By controlling the scene yourself, maybe you can feel the same sense of satisfaction and peacefulness that the character feels at the end, because you had a part in it.

I see this project more as a comic strip than something like an animated short. It is essentially one long horizontal scene. I used the P3D camera, and mapped the eye and position to the mouse so the camera moves along the scene as the mouse moves. The Processing sketch window is like the frame of the camera.

One thing I really like about my own project is how every “stage” of the scene can still stand on its own.

I could have not used the camera at all, and made the scene translate horizontally as the mouse moved. However, using 3D allowed me to incorporate small details, such as the parallax effect of the clouds. I achieved this by putting the three clouds on different spots on the z-axis, so they would move at different speeds based on how close they were to the camera. The biggest cloud intentionally goes in front of the walking man’s head, even if that’s unrealistic since clouds are supposed to be far away. I thought it was a small way to make the scene less realistic, and more interesting.

Parallax effect example (animated)

The character was made separately in photoshop. I drew each frame of a simple walk cycle.

Then, in Processing I followed a sequential example and imported each frame to an array of images. I added a statement to progress between the frames. At first, it was too fast. Changing the framerate made the side-scrolling too slow which ruined the purpose of it, so I added a “time between frames” variable to make a sort of delay in the animation.

Animated character walk cycle

Even though I drew the character in photoshop, I maintained my geometric visual language I established through the shapes I created in Processing and it fit within the scene well.

Ultimately, I achieved what I wanted to do with my project. I feel like I effectively communicated the story within the scene, that a character is transitioning from a busy corporate space to a calm living space. I also feel like my choice to format the piece as interactive rather than a simple animation worked really well. Code was the perfect medium for my idea because I was able to import images, implement sequential animation, and create shapes all in one project. My project progressed a lot from my initial experimentations in time-based translations of the scene, and code allowed me to keep going back to make small adjustments in my work until I felt satisfied.

Author: Emmylou Meadows