{currently works with Chrome and Firefox browser}

For the composition assignment the final of Coding for Emotional Impact class, I want to create something with multiple layers and is self-explained. Inspired by the description of computer vision is a rabbit hole from Andy(because I’m learning Three.js by myself recently), I wanted to make a game about “Rabbit Hole”, and my biggest assumption is that everyone is sort of down the rabbit hole.

ps. It’s not really a fun game to play. Still confusing should it be fun to play or just an emotion-building nowhere…

– Title
Rabbit Hole
– Environment
environment     environment2
– Audience
Whoever also down the rabbit hole or wonder how it feel down there.
– Narrative arc
Rabbit HoleMetaphor for the conceptual path which is thought to lead to the true nature of reality. Infinitesimally deep and complex, venturing too far down is probably not that great of an idea.

Literary Nonsense- has no system of logic, although it may imply the existence of an inscrutable one, just beyond our grasp.

And below are three snapshots of what I’ve built so far. I made my own models in Maya and drew textures in Photoshop. Can’t view online because of some web-related issue I can’t solve to load the music(SOLVED_by hard coding the url of music file path). But have no ideas how to do the transition from scene to scene…

SCENE_ZERO: http://www.rabbithole.link/


SCENE_ONE: http://www.rabbithole.link/index_D.html

Screen Shot 2014-04-13 at 10.26.14 PM

SCENCE_TWO: http://www.rabbithole.link/index_G.html

Screen Shot 2014-04-13 at 10.27.30 PM

SCENE_THREE: http://www.rabbithole.link/index_S.html

Screen Shot 2014-04-20 at 6.44.00 PM

SCENE_FOUR: http://www.rabbithole.link/index_M.html


SCENE_FIVE: http://www.rabbithole.link/index_T.html


SCENE_SIX: http://www.rabbithole.link/index_F.html


SCENE_SEVEN: http://www.rabbithole.link/index_V.html


SCENE_EIGHT: http://www.rabbithole.link/index_E.html


( Three.js + web stuff ) == super deep rabbit hole.

study note_{Three.js}

3D in Web journey starts! Trying to convert last week’s sketch from Processing into Three.js. But can’t finished it by Monday for the class, still in progress… Here’s what I got so far(WARNING: ROUGH), and below are the notes on translating Processing into JavaScript. Will organized it once I finish the work. Stay tuned!

Experience I learned from banging my head against bloody wall

  1. put your codes in function and then execute them by calling the function
    • tried to rotate my goddamn tetrahedron without doing this and had been failing for nearly 2 hours, just kept failing and failing and failing….
  2. OOP
    • links
      • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
      • http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work
      • https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/issues/8
      • http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/
      • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
      • http://www.objectplayground.com/
  3. color
    • if using HSL, material.color.setHSL( h, s, l); –> *careful* can’t set s, l both to 1, it’d be white even though h < 1
  4. Web Audio API
    • http://srchea.com/experimenting-with-web-audio-api-three-js-webgl
  5. Clickable!!
    • http://soledadpenades.com/articles/three-js-tutorials/object-picking/
    • http://threejs.org/examples/canvas_interactive_cubes.html
    • http://stackoverflow.com/questions/11036106/three-js-projector-and-ray-objects

css update: Healthy Movie Night

One page web-fantasy UPDATE! GO PLAY.

  1. Type in the movie you’re going to see.
  2. Type in the food you’re going to eat.
  3. Choose which exercise you’re going to take.
  4. Type in your weight, in kg or lbs.
  5. Base on the duration of movie, the calories of the food, the amount of calories born in certain exercise, and your weights, Healthy Movie Night gives you back how much food you can eat without worrying gaining any weights!

Screen Shot 2014-03-23 at 9.03.15 AM


e.g. “The Grand Budapest Hotel”, pizza, Jog in Water, 51kg.
Screen Shot 2014-03-23 at 9.03.49 AM


e.g. “Wanted”, spaghetti,  fishing, 51kg.
Screen Shot 2014-03-23 at 9.05.09 AM


e.g. “Alice in Wonderland”, cake, Ballet, 51kg.
Screen Shot 2014-03-23 at 9.05.51 AM


Eat wo Quilt

(click pic to enter)


  1. choose your movie
  2. choose your food
  3. give me your weight
  4. movie length * calories burn by exercising per min = calories of food in certain amount you have.


  1. hard to find regular food calories API
    • right now just use the first item in the array
  2. pizza has no serving size unit(null)
  3. id –> name


  1. The Movie Database API
  2. Nutritionix




<!DOCTYPE html>
		<meta charset="utf-8"/>
		<title> FanGuide </title>
		<link rel="stylesheet" type="text/css" href="style.css"/>

		<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

		<p>The Movie Tonight
		<input id="movie" type="text"/></p>
		<p>The Food Tonight
		<input id="food" type="text"/></p>
		<p>Feel Like
		<button id="saw">Forestry</button> 
		<button id="fish">Fishing</button>
		<button id="dance">Ballet</button>
		<button id="jog">Water Jogging</button>
		<p>Your Weight
		<input id="weight" type="text"/>
		<button id="kgButton">kg</button>
		<button id="lbsButton">lbs</button>

		<button id="searchButton">Search</button>
		<!-- <button onClick="getFoodData();return false;">ARMS Surveys</button>
		<div id="divResultARMS"></div> -->
		<!-- <button id="update">UPDATE</button> -->
		<div id="articles"></div>
		<div id="articles2"></div>

		<script type="text/javascript" src="script_new.js"></script>


var idMovie;
var movieTitle;
var duration;

var idFood;
var nameFood;
var calories;
var servingSize;
var servingSizeUnit;

var weightUnit;
var exerciseType;	// int
var exerciseTypeText;
var caloriesExercise;

var caloriesBurnAfterExersice;
var amountToEat;

var base_url = "http://image.tmdb.org/t/p/w500";

function getDuration(){
	var url = 'https://api.themoviedb.org/3/',
		mode = 'movie/',
		key = '?api_key=YourKey';

		url: url + mode + idMovie + key,
		dataType: 'jsonp',
		success: function(data){
			console.log("<img srt="" + base_url + data.backdrop_path + "">");

			movieTitle = data.original_title;

			duration = data.runtime;
			$('#articles').append("<div class='articleBox'>");
			//$('#articles').append("<p>" + movieTitle + "'s runtime: " + duration +"min" + "</p>");
			//$('#articles').append("<img src="" + base_url + data.backdrop_path + "">");

				"color": "white"

				"background-image": "url("" + base_url + data.backdrop_path + "")",
				"color": "white"


function getFoodID(){
	var url = 'https://api.nutritionix.com/v1_1/',
		search = 'search/',
		appId = '&appId=YourId',
		appKey = '&appKey=YourKey',
		setUp = 'results=0%3A10&cal_min=0&cal_max=50000&fields=item_name%2Cbrand_name%2Citem_id%2Cbrand_id';

	var input = $('#food').val(),
		foodName = encodeURI(input);

		url: url + search + foodName + '?' + setUp + appId + appKey,
		dataType: 'json',

		error: function(data){
			console.log("Something wrong!");
		success: function(data){

			idFood = data.hits[0]._id;
			nameFood = data.hits[0].fields.brand_name + "'s " + data.hits[0].fields.item_name;

			console.log(idFood + nameFood);



function getNutrition(){
	var url = 'https://api.nutritionix.com/v1_1/',
		item = 'item?',
		appId = '&appId=YourId',
		appKey = '&appKey=YourKey';

	// nutrition search
		url: url + item + 'id=' + idFood + appId + appKey,
		dataType: 'json',

		error: function(data){
			console.log("Something wrong!");
		success: function(data){

			// calories = data.nf_calories;
			// servingSize = data.nf_serving_size_qty;
			if(data.nf_serving_size_unit !== null){
				servingSizeUnit = data.nf_serving_size_unit;

			if(data.nf_serving_size_qty !== null){
				calories = data.nf_calories / data.nf_serving_size_qty;
			} else {
				calories = data.nf_calories;

			$('#articles').append("<div class='articleBox'>");
			//$('#articles').append("<p>" + nameFood + "'s calories: " + calories + " per 1 " + servingSizeUnit + "</p>");


function caloriesSetUp(){

		exerciseType = 363;
		exerciseTypeText = "jog in water";

		exerciseType = 318;
		exerciseTypeText = "saw trees";

		exerciseType = 114;
		exerciseTypeText = "fish";

		exerciseType = 205;
		exerciseTypeText = "dance ballet";

	// unit set-up
		weightUnit = "kg";

		weightUnit = "lbs";


function caloriesBurn(){

	var input = $('#weight').val();
	if (weightUnit == "lbs") {
		caloriesExercise = exerciseType / 100 * input;
	} else {
		caloriesExercise = exerciseType / 100 * (input*2.20462);

	return caloriesExercise;

function calculateEat(){


	// how many calories it will burn after exercising
	caloriesBurnAfterExersice = caloriesExercise / 60 * duration;

	// for certain calories, how many I can eat(per 1 serving size)
	amountToEat = caloriesBurnAfterExersice / calories;
	amountToEat = Math.round( amountToEat *10)/10;


	$('#articles2').append("<div class='articleBox'>");
	if(servingSizeUnit !== null){
		$('#articles2').append("<p>During " + movieTitle + ", if you " + exerciseTypeText + " all the way through it, you can eat " + amountToEat + " " + servingSizeUnit + " of " + nameFood + " without worrying gaining any weights!</p>");
	} else {
		$('#articles2').append("<p>During " + movieTitle + ", if you " + exerciseTypeText + " all the way through it, you can eat " + amountToEat + " " + nameFood + " without worrying gaining any weights!</p>");
	$('#articles2').append("<p>Calories burnnnnnn.</p>");
	// $('#articles').append("<img src="" + base_url + data.backdrop_path + "">");

	var url = 'https://api.themoviedb.org/3/',
		mode = 'search/movie',
		//var url = "https://api.themoviedb.org/3/movie/550?api_key=";
		key = '?api_key=YourKey';


		var input = $('#movie').val(),
			movieName = encodeURI(input);

			url: url + mode + key + '&query=' + movieName,
			dataType: 'jsonp',
			success: function(data){

				idMovie = data.results[0].id;






	width: 100px;
	height: 50px;
	text-align: center

.articles {
	text-align: center;


answers to hw and hopely to project


var print = "#";
for(var i=0; i<7; i++){

	print += "#";	


for(var i=0; i<100; i++){

	if((i+1)%3==0 || (i+1)%5==0){
	} else {


var size = 8;
var print1 = "#";
var print2 = " ";
var printFinal1 = "";
var printFinal2 = "";
for(var i=1; i<size+1; i++){
	if (i%2==1){

for(var i=0; i<printFinal.length; i++){
	} else {

Yeah hay.

As for the project that

Create a single web page experience that, upon user input, responds with data from at least 2 web apis. (1) a user needs to “trigger” an event, (2) data needs to be requested via AJAX from two APIs, (3) and the page should update appropriately.

I’m not sure yet… stiill tuning!

5-in-5_Day2_Moving Eye


(click pic to play! Using keyboard’s ↑ ↓ ← →)

JavaScript, first time! Nearly die…. I think I’m too used to Java/C++ syntax and too greedy/ambitious to try to do projects with JS… I spent whole afternoon searching on internet, and although I did found some awesome source codes, they just simply blown my mind. SO FOREIGN.

Thanks to Andy‘s suggestion, I narrowed down my goal to make a simple bouncing image in window. And it worked! After kind of (really just kind of) understanding JavaScript’s syntax and structure, I added extra functions: auto-moving and controlled by arrow keys at same time, and speed up/slow down feature.

Below are some of the resources I found:

I know right? Crazy.