Narratives Sharing: How far away is Mars? (5)

Done by David Paliwoda and Jesse Williams, Distance to Mars illustrates the Earth (100pixels) and its relative distances away from Mars. The webpage takes us on a virtual journey towards Mars, which is 428,000pixels away (by scale).

Check out the website here!

This is a simple webpage done to illustrate the realistic distance between Earth and Mars. While it is only based on one fact and may not have a strong narrative behind it, I feel that the travelling experience it provides is rather interesting and unique, and perhaps, has the potential to expand into a whole solar system.

Narratives Sharing: Flat vs Realism (4)

Flat vs Realism is an interactive story and game website that illustrates the battle between flat design and realism, in 2013. Created by inTacto, the webpage tells an epic story of the kings – flat and realism, leads to a classic video game battle, and ends with a peaceful reconciliation and a new year greeting from the company.

Check out the website here!

This webpage has awesome graphics and animation that clearly demonstrates the difference between flat design and realism. The personification of these design styles as kings and the physical (but virtual) battle between them helps build an immersive experience for the players.


Narratives Sharing: Gods Will Be Watching (3)

Gods Will Be Watching is a survival concept game with pixelated graphics. The back story involves a team conducting research on a certain virus, which then went wrong and left to fend for themselves in the wild. The aim of this game is to survive 40 days along with your comrades, and fix the radio in order to send a message to your headquarters.

Click here to play!

god1 god2

The player tries to survive, along with 5 other people and 1 dog. Each of those 5 characters has his/her own profession – psychiatrist, doctor, engineer, soldier and a robot. You can choose to interaction with these characters differently, by making use of their skills to help the group survive, to talk, or to kill.

god3 god4

What I like about this game is the challenging aspect of it – players need to ration (only 3 actions per day) and strategize in order to survive. It also brings forth moral issues and prompt us to analyse the situation carefully before making a move (cause the gods are watching!). E.g. Is is necessary to kill the weak in order for the rest to survive, or is it just easier?

Narratives Sharing: NoStranger (2)

NoStranger (available on GooglePlay!) is a user-choice-driven narrative that revolves around having a conversation with a stranger. By conversing with the stranger, his/her name, background story, motivations and intentions are revealed, bit by bit. The player gets to choose between different actions to take after finding out certain information about the stranger. Through the browsing of blogs, websites, social media and related contact profiles, bits and pieces of the whole story can be put together.

screenshot_2017-02-16-15-34-54-45 screenshot_2017-02-16-15-35-11-01

This game captured my attention due to its unique form of interaction and its relevance to the issues faced by the current society. As the nature of the story is slightly dark, topics like suicide and violence are involved, along with several moral decisions that the player has to make.

Narratives Sharing: “The Grudge” (1)

“The Grudge site was created to promote the film, “The Grudge”, starring Sarah Michelle Gellar. Rather than a traditional production site, the client wanted an immersive, frightening environment that would evoke the spirit and tone of the film and generate interest throughout the target online demographic of males/females aged 18-24.” –

Click here to check it out!

This is a horror-themed interactive narrative story that provides an all-rounded experience for the player to immerse in – from its dark, flashing creepy visuals to the eerie background music.


Apart from its excellent visuals and audio, one thing that really struck me was the build up of suspense throughout the story. The inclusion of the player’s name and initials made the game even more immersive, as though placing the player right at the centre of the story. As someone who has never seen or read about the movie “The Grudge”, I felt that the story had a strong start, as the mood, theme, setup and location of the whole story was neatly portrayed. The player is guided throughout the game by small notes with clues and instructions as to where to go or what to do next, e.g. go to the laundry room and mum’s room.

Narratives for Interaction: Twine vs ChoiceScript

I’ve decided not to go with ChoiceScript for my project because I found its structure rather rigid, in terms of the story flow and possible designs of the page. After much googling, I found another program that supports the creation of interactive web stories.

Twine is an open-source program for creating interactive, nonlinear narratives. Twine provides a framework for us to structure the flow of our stories, but can be published directly to HTML. Hence it is possible to extend the story beyond just text – music, sound effects, visuals, using variables through JavaScript and CSS.

Example of a Twine code:

Here’s an example of an interactive text-based story done using

MAX Assignment 2: Eye Tracker

Task: Create an eye or movement tracker that follows you as you move left and right

  1. Detection of your face, calculation of the x-coordinate of the midpoint (sensing)
  2. Uploading of eye movement clip, scale the frames of the video to the position of your detected face (effecting)

The first portion of this assignment involves detection of the face, inverting and extracting the coordinates using jit.iter, similar to the magic mirror.


New objects/messages used in this assignment: @autostart 0, frame_true $1, bang, getframecount


(left) Calculation of the x-coordinate of the midpoint of the face detected: adding the top left and bottom right values then divide by 2.

(right) Uploading of video using read and, play the video by a specific range of frames determined by the scale.



Problems encountered:

Jumping of the frame when no face is detected -> abrupt
Solution: if value <=0, then play frame (middle)

(To be updated!! Have yet to get this part^ to work)

MAX Assignment 1: Magic Mirror

Task: Using Max, create a virtual magic mirror that fades and brightens depending on the distance between the person and the mirror

  1. Detection of the person’s face and the calculation of the size of the face, marked by the green box (sensing)
  2. Inverting, changing the opacity of the image, rgb2luma and prepend frgb (effecting)

What is Max?
Max is a visual programming language that connects objects with virtual patch cords to create interactive sounds, graphics, and custom effects. Like a mind map, sort of.

This is my first experience with Max and I find it very different from the previous coding languages that we were exposed to in the previous semester. What I like about Max is that the mind map structure makes it easier to comprehend the function of the programme as a whole. However, the new terms, commands and flow of the programme was a little challenging to grasp.

Started off this assignment by learning the basic objects, messages, numbers and how to connect them using patch cords.

untitled3   untitled2
(right) The face detection is done using cv.jit faces, a function that scans a greyscale image for human faces. Hence, it is necessary to input jit.rgb2luma before cv.jit.

(left) The objects jit.iter and unpack separates the coordinates of the detected face into 4 values. To calculate the minimum and maximum area of the detected face (which directly proportional to the distance between the face and the screen), the x and y values are subtracted and multiplied. The resulting minimum and maximum areas are then scaled down to 0 and 1, before it is input into jit.op which controls the brightness.


Problems encountered:
Couldn’t get the programme to work for awhile because I mixed up the (n) objects and (m) messages, the number (i) and float (f).

Programme does not work with >1 detected faces on screen

Overall, it was a great learning experience and I look forward to exploring more features and possibilities with Max! 🙂

Narratives for Interaction – Ideation (2)

TOPIC 1: Nature
Surviving in the wild

This game revolves around the theme of nature, and tests the player’s ability to strategize in a life-and-death scenario, by rationing available resources. Throughout the course of the game, players can learn about the names of some common edible/poisonous plants and the importance of clean water.

Act #1: You are stranded in the middle of a forest, in an unknown location. Armed with a compass, you plan to navigate towards the direction of safety (which will take days to reach by foot).

Act #2: With limited supplies in your backpack, you need to source for ways to stay alive in the wild. Your aim is to maintain your levels of hydration and energy in order to survive.

Hydration level – decreases over time. You need to source for water from rivers/streams nearby, and purify before drinking.
Can’t find a water source – dies from dehydration.

Energy level – decreases over time, especially from travelling and other vigorous activities. You need to source for food by foraging for edible plants, fruits and small fishes.
Eats poisonous fruits – dies from poison.
Can’t find food – dies from exhaustion.

Act #3:
Outcome 1 – You fail to survive and died.
Outcome 2 – You succeed in reaching safety and requested assistance from people nearby.

TOPIC 2: Blind

Prison Break

This is an interactive story about escaping a prison, but with a twist – you can barely see. With limited visuals, the player is encouraged to focus on the background narration and audio, in order to complete the mission.

Act #1: In an operation gone awry, you are injured and find yourself 80% blind. Having been framed, you are wrongly accused and thrown into prison. However, you are the only person who knows the truth behind what happened and only you know where to go to uncover it.

Act #2: Due to prior training, you know how to break out of prison, to solve the case. However, being unable to see makes the situation so much worse.

What to do – to source for useful materials to unlock the prison and escape to safety.

Outcome 1: Get caught. Game over.
Outcome 2: Escapes successfully!

Act #3: It’s 11:00pm, you reach the office of the culprit who framed you. There is a hard drive containing crucial information which you have to retrieve in secret. There is only one worker in the office who is working overtime.

What to do – search for the hard drive without making too much noise. Avoid crashing into things around the office, considering that you can’t really see.

Outcome 1: Crashes into something, the worker gets alerted and you get caught. Game over.
Outcome 2: Steal the hard drive successfully and expose the culprit!