Narrative for Interaction Sharing – Old names of places in Singapore

Old, Common Names of Places in Singapore, and their Origins

I find that this is quite interesting, they has the locally name for the places with the dialects pronunciation. Dialect is something that is disappearing in Singapore, even myself I could not really speak my own dialect [Hokkian] fluently. What about our next generation?

Narrative for Interaction Sharing – Interesting tour to know about MRT

The outreached Singapore  provides a tour around North-East line and Circle line, the selected MRT station to provide better understanding of the past character of each neighbourhood that reflected on the artworks.

They provides 2 hours walking tours to expose the participants to art installations and insights to the history of the station. Just for those of you who wants to explore our tiny Singapore this would be a good tour I guess! laughing

I am currently contacting them to ask for more information and if possible I would want to join them for the tour to know more in depth. This would greatly help my narrative part for my project.

Narrative for Interaction Progress update for Week 7 & 8

Starting off my project straight away after researching much about HTML & CSS. I feel this can help me learn better by solving the problem one by one as I encounter along the way.

I manage to build the it scrollable and is divided to two section.

This is the cover for my website. It will be add with more thing during the last stage after the main component of my project can work.
This is where users will start to navigate to explore more of the individual links.

After this I continue to venture out to code for Instagram API.

Client id is important as it will be needed for the code to work.
This is what I need for Instagram endpoint location: location id and access token

However after long time figuring out, I am still unable to grab the content under scope: Public Content.

AND… I found out is due to the change of Instagram policy. But what I have learn is that I am able to grab my own photos! HAHA still, I accomplish something. For more about Instagram API visit my another post.

Each Instagram client are only allow to grab 20 photos which only from your own account.
So I apply it into a more complicated code.

For the above, I have used a library call Instafeed which is very popular during the times when we are still able to grab Instagram photos freely. And I have seen tutorials that it really work! Its really damn cool and lots of possibility to explore.

I have also tried grabbing photos using JSON with PHP Composer but this is really hardcore coding that I makes me really confused.

However, moving on with such circumstances, I have search for other Instagram approved API websites to grab photos from there. I came across a few, sadly they all need to pay except for TwineSocial. TwineSocial provide 1 month free trial which suitable for a trial session.

Result of the search for Bras Basah MRT photos! Next will adding it to the website.

Narrative for Interaction Sharing – Limitation of Instagram API

Everything you need to know about Instagram API

I came by this link as I was doing my project and figuring out why I could not access Instagram public content. It was due to a change of restrictions of Instagram API since 1st June 2016, this also affected a lot websites that uses the similar code as mine.

Instagram restrict every sandbox user to only 20 post only for their own tagged post or posted photos. Moreover, to access photos with hashtags or tagged locations [scope under public_content], you will need permission from Instagram. They will need you to meet requirement:

  1. To help individuals share their own content with 3rd party apps: scope: basic
  2. To help brands and advertisers understand and manage their audience and digital media rights: scope: basic, public_content, comments, relationships, likes, follower_list
  3. To help broadcasters and publishers discover content, get digital rights to media, and share media with proper attribution: scope: basic, public_content, comments

However they does not allow one off projects but looking for a more long term commitments.

Narrative for Interaction Progress update for Week 6

My next step is finding out how to link Instagram photos to my html file. Instagram developer, the Instagram API platform that allow us to get data that is public content based on, the users, relationships, media, comments, likes, tags and even location.

For this project I am looking at the locations, however, more tutorial teach on the tags.  So I will start off with the tags first and improvise my code from there.

There is two tutorial I found:

  • This tutorial has a search button and we can search any hashtags with results of photos.

  • While this tutorial uses a library call instafeedjs when I do not need additional codes for the layout of photos I took from Instagram. This will save me some time!

Next I will be doing up the tutorial and update again.




Narrative for Interaction Progress update for Week 5

I started off with the three.js example for interactive particles that show above as this is similar to the effect that i wanted to achieve. It has the hovering and it has clean design. After some editing to the code I decide to move on, on making click-able particle. After much research, I found mr.doob says on a forum adding this line = { url: “” }

However, this doesn’t work for my first few attempt, but I while i try and error the code at different particles code it works for this!

Before the link can work


Currently the particles are able to link to

After I added the code at the correct place it work! However, I feel I am still confused with how three.js code so I decided to go for online tutorial. I found this tutorial which will teach me steps by steps from making basic shapes, adding colour to more complicated stuff. While doing the tutorial, I decided to learn more I need to improve from the previous code that they teach and see the differences and how they make it work.

The code actually work similarly to processing, they provide the class on the start and write the detail of the code.

Java script has function initializeScene() where we have draw our object, set the position of the object and colour also the camera. Next, function animateScene() where we animate our object turning. Lastly, function renderScene() to render out the above what we have code out to the screen.

Example of the tutorial

2D turning of the object
3D turning of objects






The shapes are using three.js. THREE.Geometry for the 2D object while 3D will be using THREE.CylinderGeometry for the pyramid and THREE.BoxGeometry for the cube. THREE.MeshBasicMaterial is use for the colour or even texture mapping for the objects.

However, with the tutorial I am stuck at tutorial 06 Texture mapping. I am still trying ways to make it work.


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 – 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: