Text & Image: Final

Project title: To Whom It May Concern
Medium: Box containing 12 postcards


I did my layout in Photoshop (9 captioned postcards + 3 blank ones) and printed my postcards at Easy Print at Sunshine Plaza. I used 310gsm glossy card, which added a nice effect to my pictures. However, I felt that the glossy paper wasn’t the best of quality as they were a little bit patchy. Some colours were also a little off in the printing process.

As for the box cover, I searched for inspirations on google and settled for a simple, flat box with a envelope opening on four sides. I printed my title on an A3 sized pale brown card, and measured our the dimensions suitable for my stack of postcards. The thickness was about 6mm and I also left some extra room in length and width.

I was very happy with how the box turned out, as there were no errors and the material was sturdy enough and easy to work with. 🙂

MAX Assignment 5: Pixels


I wanted to add a little more colours into the pixel to make it look more lively, and i chanced upon this object called jit.scalebias.

Jit.scalebias is a tool that helps you adjust the hues of the imported movie/camera grab, through changing the values of RGB/A attributes like rscale, rbias, gscale, gbias, bscale, bbias.

Input different colours into each of the four matrices…

Interactive II: FINAL

Presentation day setup:

Our homemade wands!

Projection on screen – we wanted to split the projection across all three screens initially, but were unable to calibrate all three of them. Hence, we displayed a foresty background on the other two sides!


Video documentation:

Interactive II: #3 Milestones

MILESTONE: One week before submission!

Merging our animation into the particle system:

Our 3D animation and 2D particle system rendered in the same space, but on different planes.

After a long while of experimenting and figuring out the patch, we finally managed to render the animation in point mode. We extracted the location matrix of the animation and linked it with the location matrix of the particle patch (and disabling the randomness generated by the noise). However, it resulted in a very glitchy spread of particles, although the general shape of the animation is there.

(Front view of the dog)

(Side profile of the dog)

After a few days, we finally managed to get a smooth 3D spread of particles for our dog – and animate it!

We also found a function called jit.xfade -> which allowed us to switch between two matrices, 0 being left matrix, 1 being the right matrix, and anything in between 0 and 1 displays a mix of the two.

Hence, our left matrix was the animated dog, and our right matrix was noise. We then connected the slider (scaled from 0 to 1) to our presence patch. Therefore, the faster the wand is waved, the more likely the dog is going to appear!


moving on to…


Physical setup:
We met up in school on a friday to build and test our smokescreen system. As we were unable to purchase dry ice on that particular day (it was a public holiday), we decided to experiment using a smoke machine we borrowed from school.

Connecting our hoses and hole-y pipe, and propping them onto a stand.

Unfortunately it was unfeasible to use the smoke machine (we kinda expected it actually), because the smoke was very hot and insufficient in amount. It overheated our funnel and melted the glue on the duct tapes.

A few days later…

Managed to get the dry ice (3.0kg) from the store! We built a pail system to channel the smoke from the pail up to the pipes, and dumped hot water onto the pail of dry ice to produce the smoke.

Result? -> Our system did work, but the smoke channelled out from the pipes were too weak and too little (like short wisps, definitely unable to form a screen). Hence, we decided to increase our amount of dry ice.

On the day of presentation…

We decided to ditch the smokescreen idea because the smoke wasnt solid enough, and we really needed a clear projection to see the shape and change of the particles.

Interactive II: #2 Milestones


What we achieved:
We sourced around for patches related to particles and camera blob tracking. Of the two particle patches we found, the flow and behaviour of one was smoother than the other. However, we had some problems understanding the patch because it had many foreign objects and attributes involved. (jit.gl, mesh, render, jit.gen, jit.expr)

We used cv.jit.blobs.centroids for the tracking of the light source, and cv.jit.module.presence for the detection of movement.
Sensing: Camera detection
Effecting: Drawing of blob at the brightest spot (depending on the set threshold and the brightness of the surroundings), and output the xy coordinates of that spot

We linked both cv.jit patches with the particles, hence the particles can now be tracked using the blob. We also altered the number of particles and level of attraction to suit our project, however, we failed to change the colour of the particles.

Animation: Started on the rendering of a 3D deer and a deerhound.


1. Can’t change colour of particles
2. Camera was laggy because there was two face detection going on

New problems: Need to understand this complicated patch.



What we achieved:
With Lpd’s help, we managed to change the colour of the particles. Turns out there was an extra cord connecting our jit.gl mesh with some random object and none of us noticed it.

We decided to add some audio effects into our patch – by linking it with the movement tracking (cv.jit.module.presence) and onebang. So, if player’ s movement speed > 80, magic wand sound effect will trigger.

We met up for a prop-making session to work on our smokescreen.
Some process pictures of us drilling holes into a PVC pipe that we found:

Animation: Managed to lock down all key poses and get some basic movements for the walk cycle of the deer and deerhound.


1. Time constraint
2. Overcrowded patcher (needs to split to two computers)
3. How do we put in the animation? (next step)

Narratives for Interaction: Final Project Process

Title: U N S E E N
Media: Website
Projection description:

Unseen is an interactive text-based website that illustrates the story of a secret agent from a first-person perspective. Due to unforeseen circumstances, the main character in injured and loses his sense of sight, making it a challenge to do even the simplest of things. Limited by pure text and soundscape, the players can select and direct the thoughts and decisions of the main character, as he journeys through secret missions and lands in a total predicament.

The story begins with the main character waking up in an unknown location. As he recalls and explores his surroundings through sounds and touch, he attempts a search and succeeds in locating a secret passage way out. The players are given a chance to source for useful materials to aid the escape, before being presented with two options that splits the storyline.

This webpage is a combination of two initial concepts that I had in the beginning – prison break and blind soundscape. I was inspired by American TV crime series White Collar and Prison Break, by how their storylines were so cleverly planned and written. After checking out some existing interactive story-games such as Blindscape and NoStranger, I was surprised at how text alone (or with soundscape) can be so engaging, and decided to explore further into text-based interaction. From these inspirations, ideas started to come together as I began creating my own crime-themed story.

My initial idea was to use JavaScript or ChoiceScript, which I realised was not ideal because JavaScript alone required too much technical work and ChoiceScript offered very limited design and functions. I then came across a story-telling programme called Twine, which helps users to better structure their stories by presenting each page in a mindmap format. It was very understandable and useful in helping me create split paths in my story, and can be exported in JavaScript, CSS and HTML format. It was only until much later that I realised that Adobe Muse could also work and actually was able to produce better graphics as compared to Twine. However, I stuck with Twine because my webpage was mostly text-based.

This is what Twine looks like:Twine is structured in a mindmap format – where you can link passages to one another through links, or timed transitions. The code and content for each page is stored inside each of these passages (or cells).
There are three different story formats to choose from – Harlowe, Snowman, and SugarCube, each with its own layout and limitations. I started off with Harlowe, which was good for editing text, styling text and also timing their appearance -> E.g. (live:2.0s)[your text will appear after 2 seconds]

The problem came when I wanted to add sounds into my website. Harlowe doesn’t support audio (except simply playing an audio on a passage, with no controls or timing whatsoever).

I certainly faced several challenges in my story-making process – both in terms of the content and the coding. My biggest fear was for my story to become too wordy and boring, such that the readers would lose interest. To tackle that, I decided to minimise my words by using key phrases and thoughts to narrate my story. I also encountered difficulties while trying to calibrate the audio clips, and the timing of certain words, because certain functions were restricted by the default Twine programme.

Narratives Sharing: Compact Disk Dummies (8)

Compact Disk Dummies Official (Belgium) is an interactive website made to promote their debut album ‘Silver Souls’. The site is set in a messy living room and a music room, with hovering objects and human replaced by dolls (resembling members of the band). The concept behind this was to recreate the feel and vibe of the music album within a website.

Click here to try it out!

I personally really like this website because it allows good exploration of the room. The content is entertaining and informative (of their album) at the same time, and the graphics are quite trippy.

What’s in the living room? – There is a mobile phone on the ground that often vibrates. You can click on it and access several applications on it!  You can also text your manager (who replies very frequently)… Or take doll selfies on the camera function.
There are also music videos on the television, where you can toggle between many videos and the timings. Other accessible objects include the posters, the game controller and their schedules on the wall.

What’s in the music room? – Another doll member, and an audio mixer for you to play with.
You can also access the computer, although there are limited things you can do here. There’s a grand theft auto icon on the computer but it doesn’t run. Some inacessible computer files and an internet link on the desktop labelled ‘NOT_PORN_!!’ (see below).

Also found a sketch fill with pages of lyrics and drawings, illustrating the band’s music making processes and random thoughts. Other clickable items include more posters and album covers.