Narrative for Interaction Plot Idealisation II

More Research about Informative Narrative 

Seven digital deadly sins

I like how the simplicity brings out the content and able to interact with every user. Users are also allow to leave their own choice that add up to the live statistic which I found it very interesting. Probably I should make things simpler so that not to confuse user and its achievable.


This approach draws on nonlinear narratives’ strengths—meaningful tangents over time. Create a framework with plenty of content branches, leaving your visitors free to choose what most interests them. Discoverability is key here; your job is to offer enough guidance so visitors know what to do, and then get out of their way. Clearly mark possible routes with instructional labels, animations, and even color-coding. Provide menu structures that prioritize choice over simple information retrieval. For example, group similar narrative blocks in a large slideout menu, or pair questions and thumbnails, instead of relying only on text links. As you develop more content, add it to the framework as a new offshoot to explore. For instance, the Guardian’s “Seven Deadly Digital Sins” features an incredibly complex set of stories and dispersed content. The loose layout, which displays the sins in grouped thumbnails, and the slow, measured music encourage people to experience the narrative at their own pace.


Raising awareness of income inequality in New Yoke City, using a very direct platform. A very clear and user friendly where the purpose of the website is right at the top.


These are perhaps closest to the types of work designers and developers do every day. Database narratives use metadata, ARIA roles, and tagged content to auto-generate content. They’re most commonly deployed in data visualizations, where a story’s meaning often comes from the explanatory framing (via copy) and juxtapositions of data. For instance, the subway-inequality map from the New Yorker builds an elegant, interactive narrative on wealth disparities, out of seemingly impartial census data. Visitors can click to see how income varies—sometimes dramatically—across subway lines and stations, and their neighborhoods. Database narratives are an effective way to convey a lot of data in a small space.

Information NArrative and interactive

After researching and looking through various website, to me information narrative and interactive is something to let the user explore and gain knowledge from it.

Information Narrative = weather it is idea, awareness or some information statistics that by going through, user will gain and learn something.

Interactive = The choice to let user choose, how they want to explore your web page with their own paces.

one paragraph description of my idea

The Hidden Singapore  [not confirm the name] hope to give another perspective of Singapore. Even though Singapore is small but we doesn’t seem to explore some hidden places and the name of our MRT. My project will allow user to explore freely by clicking the area of Singapore and images that people posted on social media. This will allow many photos to automatically update frequently and provide variety for the user. User could also revisit the site when they need ideas where to go.

show or create some audio/visual material that represents your project

The ultimate direction

Halo 5: Guardians Visualizer 

However after research I am afraid that this could be very hard to achieve. As the programme blender, I could not add in the JSON files, I have also checked the computer in school which doesn’t export to JASON files as while. But I will try one more week to work on this, if really cannot I will move on to the example below.

Seven digital deadly sins

I feel the layout really suits my idea well and its simple to navigate.

Markuslerner travelscope

Another possible layout.

define a structure or a plot for your project

  1. Entering preview page The map
    [An introduction to user, what is the objective of the website.]
  2. The overview of 3D map
    [User can move around with mouse and decide which area to click to view. Than it will zoom in to specific areas]

Using the combination of Threejs and WebGL. Before that 3D model of the map need to be done. [Researching Still in Progress].

  • Information about that place
    [There will be information of that particular place as well as a cluster of photograph will be link from social media, either from hashtags or the location that they tagged. ]

    explore the technology that you want to us

  • Blender for 3D modelling
  • threejs and WebGL
  • HTML Canvas

Narrative for Interaction Plot Idealisation I

The direction of the project I am going towards is information narrative showcasing different parts of Singapore, could be place that is common or uncommon. I will using the advantage of social media to link up with my project. I have found a reference on how the interaction to the user will be from a game promotion website. 

Halo 5: Guardians Visualizer 

Possible flow of plot:

  1. Entering preview page The map
    [An introduction to user,
     what is the objective of the website.]
    Reference: Markuslerner travelscope
  2. The overview of 3D map
    [User can move around with mouse and decide which area to click to view.]
    Reference: Halo 5:Guardians Visualizer

Using the combination of Threejs and WebGL. Before that 3D model of the map need to be done. [Researching Still in Progress].

  • Information about that place
    [There will be information of that particular place as well as a cluster of photograph will be link from social media, either from hashtags or the location that they tagged. ] 

Stages of progression

  • Using Blender or other 3D modeling software that can export JSON files to model the map out [compatible files for threejs.]
  • Try out the exports of JSON files in coding the threejs
    [Research Still in Progress]
  • 3D modeling of the map
    [Research Still in Progress]
  • Coding for Introduction to user using threejs and WebGL 
    [Research Still in Progress]
  • Coding for Map
    [Research Still in Progress]
  • Linking up the social media to html [+ problem solving, foresee there will be a lot of problem] 
    [Researching Still in Progress]
  • Final editing


Narrative for Interaction – Research Part II


After presenting my ideas, I am really curious how the touch screen projection work [Story of the time when god is everywhere].

So I found out about this touchjet Pond which uses the pen that is connected to the projector by the camera. Which it works similarly like how Wacom works.  However, the even cooler projector is Lazertouch Mini Projector.

This lasertouch projector uses the laser to track the area being touched which I think thats how the Story of the time when god is everywhere are working. I felt it was really fun touching the projection and something happen. So I went to check if ADM has this machine but ya, we don’t have it. However, for the technical part if I really want to do a project out of it, I think it will be quite manageable. But I have decided to learn more than that. Probably going on to HTML..

I went on to research for some interesting websites. Here is what I found.

A game promotion, where the instagram #hastags made up the helmet.

I like how the interactivity is made here.

simple yet interesting.

Some other links that I want to keep:


Reflection #01 Four Naughty Concept Play Games Narrative and Interactivity


The four naughty terms, play, games narrative and interactivity has been widely use nowadays. I agreed with Zimmerman that are we using those terms with little knowledge about them. As in probably there is another side that we didn’t see before due to the impression of what was introduce to use first. Like Interactivity, the common definition was people having interaction with a device while also receiving responds. Zimmerman pointed out some underlying concept which is linked with narrative that I feel that it made up the interactivity. There will be some sort of communication, movement or activity going on, to be interactive. From this will link to the four modes of narrative interactivity mode 1 or even mode where the physical material/object making some connections.

The most eye catching concepts from Zimmerman to me was the explanation of play. Since young I was taught that play can be referring to a lot of things such as playing computer games, playing with friends, disturbing your friends etc. Zimmerman narrow down the different categories of play which gives me another perspective of the term “play”. From his explanation I felt the intention behind us playing something that will be categories weather is it a Game play, Ludic activities or just being in a play state of mind.

Another interesting point that I feel I usually mix up the experience of some interactive art work or games when they do not provide the same excitement or pleasures. Zimmerman stated that why should we expect to receive the same pleasures as film from a novel when they are a different medium? It is like we are comparing apple and a vegetable.  Indeed, I usually neglect that part probably that’s why I dislike readings as I am a more visual person. However, looking back to my experience going to museum or looking though some of the artworks I judged too quickly and neglected what the true message that the artist wanted to show. The experience even thought is different or less exciting but there will be still some message or point that the artist wants to bring across.

Narrative for Interaction – Research and Possible Project Ideas

Interactive Narrative 

The direction that I want is to include the user as part of the storyline/Interactive. They could make changes or choice during the process and contribute to the story as well as they get something out of my project. I am also looking into questions/topics that I have always been interested and curious of.

Inspirations/Research #01 


From lecturer in class sharing, this project caught my eye ” bear71 “. I really like how the user has the freedom to move around and learn about the animals. There are other interesting elements like videos of the bears, environment sound and narration about their habitat.

#01 Explore The Unknown

I use to travel from west to east, west to north to attend my school. There is something that I am always curious about is the Uncommon Mrt stations. What is the uncommon one? For example stations like one-north[the only small caps station], Marrymount, Dakota, Bartley or Tan kah kee. To be more specific, I am not curious about the station itself but what kinds of build are there, what is the place of interest or what is it like around the mrt.


Possible outcome

  • Video recordings
  • Information about the place / or even if the history of the station name “Tan Kah Kee named after the founder of Hwa Chong Institution”
  • Live weather forecast for the environment
  • Unlock some achievements? For the user to be at there personally.
  • Search of something?


Understand Singapore a bit better, also to find the hidden interesting areas.



Inspirations/Research #02 

I remember this project very well because I really like their interactivity using words to graphic while achieve the fun and educational, which I hope to achieve something like that. The words that has been touch will turns into the graphic which I think it made up the canvas.

I found some similar project also from Teamlab. Even though this is a simple concept but it also narrate a story and experience.

#02 when we touch the night sky

Night Sky: Constellation patterns, moon.

User will touch the stars and become enlarge with some descriptions.


Making understand the stars easier.