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.

Butterfly Effect – Sourcing of Materials [Zi Feng & Su Hwee]

The most important and hard to get is the Butterfly. We have been calling oh’farm to have regular updates regarding of the caterpillar kit that is out of stock during our last visit.

We also found other alternative to catch butterfly. From this article “Setting Gardens A-Flutter” by Nature Society they mention about Alexandra Canal Linear Park, Hort Park and Tampines-Changkat Community Garden is place where they plant host and nectar plants to attract butterflies. We also spots some butterfly on our way to canteen 2 in NTU! When there is butterfly, there will be caterpillars!

We also found another blog teaching us how to breed the butterfly! They have detail explanation and instructions but they are lucky to get caterpillars from their neighbours.

As for the box, we are ordering from Dama. They sells cheaper acrylic and able to cut to the size we want. We have ordered and will be getting it on Monday.

We are also thinking that we will be using mesh to block out the back of the box so that is easier for us to manage the butterfly inside.

Butterfly Effect – Research for other similar projects [Zi Feng & Su Hwee]

Hologram can be a future ideas for other project, the effect is quite interesting as a 2D image can be portray in 3D. However there is also limitation to the size that can be show.

This installation not just only an artwork but also an educational piece that raise about educational issue.


Curiosity Cloud installation work on a simple idea of using motor and sensor, still this art work catches my eye because of its variations. They uses 25 different type of insects, whenever viewers walk closer the insects starts to flattered. This creates a surprise element and its just mesmerising to look at.

For our project, just in case that we couldn’t breed the butterfly we might also use the similar method to create movement for our fake butterfly.

This project is quite interesting in a way that he uses bugs to create the painting.


Orchestra Da Camera, mice running wheels playing music boxes. This has some similarity with our project, just that our graphic will be react to the butterfly movement.

I feel that this artwork has give a different perspective. The combination of music and nature movement of birds to create a piece of music. The artist did not plan it so complex or complicated to make it interesting, however a simple concept creates a lot of possibility in music.


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.