All posts by Mint

About Mint

An ITPer ITPing.

web interface + final

Interface == Internet == sharable

Internet. We use and interact with it every day. So I want to make the 360 images available on the web where other people can have access to my website.

And this week’s assignment to create my own interface is perfect for what I am doing in Networked media class where I learned to create my own servers and databases.

So what I am developing is an early development stage of a media management tools where I can easily take snapshots, saved the images onto my cloud database and output the saved images onto the web page.

Login/Signup Page.

Landing Page.

One Page Web – ajax call

Saved Data to the database, retrieved from the back-end and output into the front-end.

I used ajax to retrieve the saved data from mlab and I was very surprised to see these flooded of letters and alphabets just like in the movie matrix…. I would have never thought back then that I’ll be sitting right here like Keanu Reeves like “whattttt????”

Video’s snippet of when I saved images to mongo. As you can see, the data is humungous.

Data GIF - Find & Share on GIPHY



Then I tried to add my presence to the 360 images live. I found that there was too many information being sent through the web. At first, I thought the keying process did not work properly but then I found out when I opened Lisa’s kinectron example from her github account. I found out that Lisa’s simple keying example won’t stop sending keying data through the server until at 2273 keys (pictures below). But when I tried with 360 images, keying stopped at 67 keys (sorry I didn’t snap a picture).

What’s next?

  • search tab – since I have the data saved into my mongo database, I can write the js code to call these saved images out.
  • upload – I hope to add uploading features from my local laptop to my server whether they are:
    1. 360 images – scenes
    2. 3D models and rigged animation
    3. 2D kinectron images


1-2. 360 images – upload features through server, node, and express

3. 3D Rigged Animation – I want to have a feature like a button where I can add a 3D asset myself online in 3Dspace.

Animated GIF  - Find & Share on GIPHY

Animated GIF  - Find & Share on GIPHY

OSC04 – Interaction

Lo-Fi Interaction

(Is there any way I can change this heading’s font)

I continue this week’s assignment with the project I’m doing with Tiri and Sebastian in “Sense Me, Move Me” class on this week’s theme “Interaction”.

We did not input the protagonist into the 3D scene, but we tried to use the physical space as a virtual world. The room slowly emerge through the flash light.



OSC03 – Elements

I was very excited for this week’s assignment on creating elements. I want to play with kinectron because recently, I’ve seen a lot of ITP students starting to use Kinect with their projects. So I  picked Kinect for this week to experiment to create elements in the scene.

I teamed up with Tiri and Sebastian from Mimi’s Sense Me, Move Me class. I think we can create something interesting from both our classes skill sets combined.

The idea is “an act of cleaning”. Rubbing the whiteboard, sweeping the floor, or tidying the cable etc.


The protagonists will be cleaning a physical world (room 50) while their presence is also cleaning a room in a virtual world.


We are going to explore different physical properties of the things that we are going to clean/perform. While we’re cleaning different surfaces, our body’s movement will behave differently to each type. Our bodies will move slower with a hard and rough surface or move faster when sweeping the floor.

In the beginning, we used keying mode but because we are moving around in the scene so much it’s a bit laggy. I can see obvious delays in the scene. So we change to use skeletons instead.

During the setup, there was a little hiccup with the cables just like when you demonstrated in class.

Here is a video of us testing the Kinect.

OSC02 – Bunch of Scenes

For this week’s assignment, I decided to get out of the floor and take 360 photos outside!! YaYY!! It takes more efforts than I thought to leave the floor.

So I got a hand on the Ricoh Theta S and took a few photographs. I found the scenes that have symmetrical composition most interesting.

The photos need a bit of retouching because of the monopod and my hands. I also learned that using the camera stick is easier when retouching in photoshop.


There is a list of array images in different locations and each image has its own scenes stored within.

  • Press any ‘key’ to change the background location.
  • Press ‘Previous’ and ‘Next’ to change the scenes of that particular scene.

After I imported the images into three.js, I found that if I didn’t hold the camera flat, images will turn out crooked and tilted and its really cumbersome to edit in photoshop afterward.

>>> Demo


List of image background:


I also imported the 360 images into Unity3D to experiment on different platforms apart from three.js

This online tutorial was very helpful. I used their code to map the video texture onto Unity’s shader to get the environment.


So the last experiment I tried is not really related to the class’s assignment but since I already have Ricoh Theta S with me I took a group selfies where everyone stands around the Ricoh camera. The output is kinda interesting.

OSC01 – Tacky Scary Movie

I made a tacky scary movie storyboard. I built this week’s assignment of off your code. It’s basically a stop motion when clicking the ‘next’ button. I find the code quite overwhelming for the first’s class assignment. I ended up watching a bunch of tutorials on Lynda on ajax and server.

I ended up using Gyphy images to imitate animating images like in many old horror films cut/changes scenes. I believe that if I use enough numbers of Gyphy images in many scenes, I’ll probably have made an introductory short horror film.

>>> CODE

>>> Demo Page