OBLIVION

clocks screen-shot-2016-10-24-at-4-33-03-pm screen-shot-2016-10-26-at-1-57-43-pm screen-shot-2016-10-26-at-6-48-49-pm screen-shot-2016-10-26-at-6-42-08-pm20161028_141757 20161028_141702

Oblivion experience

Name of group members: Rana Zandi (NANA), Natasha Dinyar Mody

Project title: Oblivion

Code: https://gist.github.com/ex0self/3088f3242eeac78f2aff551206abf8bb

Project description:

Oblivion is a non-linear multi-screen experience narration, based on the functionality of memories within the human brain using a hyperlink structure.

The narration, explores the protagonist’s memories (Lily) of the people around her at school.

Although the experience involves the reader on his/her own to read the narration, the experience needs to be completed as a group. Since the narration uses a hyperlink structure, it provides readers with an illusion of choice and allows each individuals to read the same story through different paths enabling them to compare & contrast their knowledge of the events within the story with one another.

Supporting the narration is a timer enhancing the group experience. Users can compare their results (pages completed) at the end of the time given. (15:00 min)

Also embedded within each page of the story, are supporting visuals  (3 clocks) that change based on the movement of the mouse and the path taken by the user enhancing not only the concept, but also the multiscreen experience.

Process context:

Oblivion explores various concepts;

  • Memories & the hyperlink structure – According to Ray Kurzweil in his book “How to Create a Mind”, memories are like hyperlink structure. Memories have the ability to be linked to each other and recall one another based on new memories (experiences). For-example, for 6 months you might have a neighbour with a funny looking moustache. Years later, walking down the street a man may pass you by who has a moustache. Suddenly, a memory of your old neighbour will pop into your head even though the man who passed you by might not at all look similar to your old neighbour. Oblivion explores the same notion. Through the hyperlink structure Lily’s memories (the protagonist) get recalled by one another.
  • Memories – What is a memory? Our brain doesn’t hold on memories like a computer or a folder cabinet that one can open and browse through. In fact, memories don’t exist at all even though the entire functionality of the human brain is based on memories and experiences. Each time an individual experiences something new, a specific neurological pattern (neutrons passing messages to one another, think of it like a lightning pattern) takes place within the brain. It is the recalling of this pattern that we call memory. When an individual recalls a memory, the same neurological pattern assigned to that “memory” needs to be recreated/gets recreated. This means that each time you recall a memory, the whole experience takes place in your brain as if it was the first time. However, each time this pattern gets recreated it is a bit different from the previous ones. Hence, some researches believe that each time you recall a memory it becomes further and further away from what actually took place the first time that neurological pattern was created. In short, the memories you never recall are the safest. Oblivion was written based on this concept. The story forces the reader to remain in a state of oblivion through loops of recalling memories, not being able to tell which of the events or characters are real according to the protagonist (Lily).
  • Time – The clocks within Oblivion – Oblivion starts with the first page holding 7 hyperlinks for the reader to choose from. Each link is linked to a different page that unfolds a certain event in time while holding several links that repeats the same process. The only way the reader can know if they are traveling backward or forward in time is through the clocks. When the mouse is not moving the clocks are frozen in time. As the reader moves the mouse on the screen, the clocks are in a state of oblivion; some are moving clockwise and some counter-clockwise with varied speed. When the reader has to make a decision between which link to choose, as the mouse hovers over different links the clocks will ALL either go clockwise or counterclockwise hinting to the reader of the direction of time.

Process journal: 

https://drive.google.com/drive/folders/0B0v0C2NFCXOiVzVST25RQnp2NDg?usp=sharing

  • Phase One – Writing the story – It was challenging to come up with the narrative. Knowing who our persona’s were helped us to narrow down a theme. Since, our readers were going to be our classmate and majority of them were girls, we decided to write a love story based on familiar events taking place within the school environment. Since NANA is currently researching memories and cognition, we decided to go with this concept. It was tricky however, to embed the hyperlink structure while writing the story. Each page had to go back to a certain other page, and this had to be kept in mind through the writing.
  • Phase Two – Coding the story – Coding the story wasn’t hard at all. Using basic HTML & CSS we had a layout and a base to work from.
  • Phase Three – The timer – Setting the timer was very challenging. We had to figure out how to create a fixed frame that could hold the countdown clock and the content. Both of us very new to coding how to understand pages and pages of Javascript from various searched on google. We found a timer on one our google searches, but we had to study and learn the code of the timer. We asked help from other classmates, and even some second year students. Finally, we were able to understand it enough to be able to tweak it to add our own time and aesthetics to it. Through this phase, we learned to be more organized with our code in order to understand what we were doing. Sometimes, our code wouldn’t work and we couldn’t find out why. When a second year student, suggested we duplicate our files and keep organized or even sometimes work backwards, helped us to finish these phase successfully.
  • Phase Four – The visuals – The P5.js experience was a mission on its own. Phase three and phase four took the longest. The creation of clocks weren’t as challenging as embedding them within our story and coding them to go backwards and forwards in times according to the movement of the mouse. After figuring out the code, we had to go through the story and embed the code for each link. (which there were many links!!)

References & resources:

http://p5js.org/reference/

http://www.genekogan.com/code/p5js-transformations/

http://www.animatedimages.org/img-animated-clock-image-0006-82099.htm

https://processing.org/examples/clock.html

https://github.com/processing/p5.js/issues/1375

https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/