Screnshot of The Attic

Click the image to go to The Attic!

Overview

Role: Programmer

Tools Used:HTML5, CSS3

Collaborators: Everi Osofsky, Sarah Bien, Azer Wang

'The Attic' was created as part of Playground, Intro to Media Synthesis and Analysis' final project to create a digital playspace that explores the idea of the word "playground" while also breaking one of those rules.

Intention

Children are known for their free and wild imagination, and having a sense of apprehension and anxiety in a world they are still unfamiliar with, but are also known for brash behavior precisely due to this naive ignorance of the environment. We recreated this experience in a virtual environment without any introduction or prelude to the piece to invoke the same sense of being in an unfamiliar environment. Unsettling and unusual/unexpected content was also put to mimic the effects of having an overactive imagination, and feeling of being in a potentially hostile environment.

Process

My role in the project was to assemble all of the art, sound, and puzzle assets of the project to create the environment. The environment was created using HTML and Javascript; I overlaid the room's objects in divs over a background image of the empty attic, each with their own piece of javascript code that would allow the user to interact with that object. When a user would interact with an object, a moving GIF of that object would temporarily replace the static image to bring it to life.

The empty attic

The empty attic background

In order to make the environment more immersive, there are a number of events that are randomly triggered while the users are in The Attic. These include flashes of lightning that briefly brighten the room, a hand that appears outside the window and knocks, silhouettes of the two children that appear on their beds, and unsettling ambient noises like creaking and whispering.

The main objective of the environment is the puzzle that players can solve to figure out what happened to the two children that lived in the attic. The book on the table and the notes on the right wall are both clickable objects that pull up an excerpt from the boy's journal and a sequence of numbers, respectively. The two pieces of writing are related to each other, so it is up to the players to figure out how!

The journal

A screenshot of the journal

The notes

A screenshot of the notes

Product

The Attic was showcased in Intro to Media Synthesis' Playground showcase at the end of the Fall 2015 semester, in Studio A of Hunt Library at Carnegie Mellon University. There were four stations with laptops and headphones set up for people to come and experience The Attic for themselves. The Attic is also available online, on my Github.

The Attic at Playground

Stations set up with The Attic at Playground