Technology: Vid Slider

The main technology that runs in the interactive music video is a HTML5 before-after comparison slider, which I found on

As mentioned before in my previous blog post, I took away the phone input due to its complexity with Node.js after testing on a prototype. Besides that, many have mentioned that using the phone distracts them from the actual animation.

Thus, removing the phone and focusing on the web interaction seemed like the best option that I had. It was a tough decision at first because I proposed to turn my project into a cross-platform interactive music video, but there were unseen circumstances which prompted me to make this decision.

Thankfully, by using this slide interaction, users are able to see and compare the two scenarios (which was originally meant to be controlled with the phone) on the screen instead. This way, they can put full concentration on the interaction and watch the music video as well.


W8: change in execution method

To be frank, I have been struggling with the tech part of my project for the longest time. Due to the complications with cross-platform technology such as Node.js, it was a real challenge for me to overcome. I didn’t want to waste my time any further as I’m already in week 8; with only about a month left to submission. I had to make a decision.

I decided to take away the mobile input of the project and just stick with the web execution method. Meaning, whatever interactions will only happen on the screen. This way, I can focus more on the visuals of the project and not get too caught up figuring out the technical errors that are constantly occurring.

This change in execution method slightly affects the perspective of the whole project direction in general. But the foundation still remains – to allow users to experience a story from various perspective, which grew from the roots of remix and exquisite corpse.

I truly hope that in the span of 1 month, I’ll be able to perfect this project and provide a well-finished interactive music video that is able to touch my viewers emotionally.

We’re almost there!

W8: WIP Progress Check

Last week (14 Dec 2016), I was unable to attend the WIP check with some of my classmates. So this week (22 Dec 2016), a few of us will be having our first WIP check for this project.

For the first check point, my progress should be about 50% as expected. Here are some of the items that will be shown during the WIP progress check:

  • 3 animated scenes for the video
  • 4 pages on website: – landing page / instructions / main pc page / mobile page
  • soundtrack: draft


Although it is mentioned in the gantt chart that all animations should be done by now, there were some slight changes which resulted in a delay. Because of that, my Alpha test will take place during our study break (24 dec 2016 – 2 Jan 2017) with 5 user testers, that will be recorded on this blog later on.


Sem2 W5: Tutorial

Tutorial with Mervin (Saturday, 10 Dec, 11AM at MMLab 1)

Notes of discussion:

  • Current problem: syncing of PC video and mobile video
  • Animation: 1 default scene=2 panel, 2 alternative scenes=1 panel each


Agreed actions:

  • Look into several possible methods to solve syncing problem:
    1.QR code
    2.Web socket
    3.Sound trigger
  • Animate and do video first to save time
  • For first WIP progress: Show 2 or 3 animation



Character Design


My initial character design was based on the illustration I’ve done for the draft poster (as seen in the image above). But after a while, I refined the colors, design and the overall feel of both the main characters.

Currently still in the work-in-progress stage at the moment for these characters. In the midst of refining them, I’m also designing the backdrops for the animation. Even though I’m currently in week 5 and should be almost done with all the animations by now, I’ve decided to spend more time refining the visuals as my project has moved to a more visually driven direction, leaving more time to produce the responsive website as compared to a cross-platform project that requires more coding.

I’ll be giving myself this week (28 nov – 4 dec) to finish up the first draft of visuals, and start coding the responsive website as well.

Things to do (week 5):

  • Finish storyboard draft
  • Re-record soundtrack

Sem2 W3: Tutorial

Tutorial with Mervin (Saturday, 19 Nov, 11AM at MMLab 1)

Notes of discussion:

  • Technology / Execution method
  • Feasibility of project
  • Animation
  • UX


Agreed actions:

  • Execution: 1 responsive website (fits on PC and mobile)
  • Allow users to place phone on screen for different outcomes
  • Use Adobe flash for animation
  • Complicated tech doesn’t necessarily mean good UX. Find the best solution for your project.
  • Make sure PC screen is big enough for a visually driven project like this.
  • Don’t forget welcome + instruction screen

Equipment List / Floor Plan


As you can tell from the image above, there will be ONE PC screen which has a split video, and each player controls their side of the video with a phone which will be provided.
What they are able to control is the different types of scenarios happening at one place. (Example: At the dinner table – option 1: fighting / option 2: chatting / option 3: ignoring) I’ll elaborate further on the storyboard after I’ve done drawing them.

For the setup, here is a rough equipment list:

1 PC set
2 android phones
2 headphones
1 wireless mouse
2 chairs

Not confirmed:
props – vinyl cover
deco – fairy lights
table cloths (matching colors)

Floor Plan