{Rabbit_Hole}

By jhclaura in Blog, Coding for Emotional Impact 0 Comment

{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 Hole–Metaphor 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/

open

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

maze

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

TV

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

jump

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

voice

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

Elevator

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

HealthyMovieNight

By jhclaura in Blog, Mashups Web APIs, Spring 2014 0 Comment

Eat wo Quilt

(click pic to enter)

Idea:

  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.

Issues:

  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

API:

  1. The Movie Database API
  2. Nutritionix

Source:

 

html

<!DOCTYPE html>
<html>
	<head>
		<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>

	</head>
	<body>
		<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>
		Tonight</p>
		<p>Your Weight
		<input id="weight" type="text"/>
		<button id="kgButton">kg</button>
		<button id="lbsButton">lbs</button>
		</p>

		<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>

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

js

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';

	$.ajax({
		url: url + mode + idMovie + key,
		dataType: 'jsonp',
		success: function(data){
			console.log(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 + "">");
			$('#articles').append("</div>");

			$('#articles').css({
				"color": "white"
			});

			$('body').css({
				"background-image": "url("" + base_url + data.backdrop_path + "")",
				"color": "white"
			});
			getFoodID();
		}
	});

}

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);

	$.ajax({
		url: url + search + foodName + '?' + setUp + appId + appKey,
		dataType: 'json',

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

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

			console.log(idFood + nameFood);

			getNutrition();
		}
	});

}

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

	// nutrition search
	$.ajax({
		url: url + item + 'id=' + idFood + appId + appKey,
		dataType: 'json',

		error: function(data){
			console.log("Something wrong!");
		},
		success: function(data){
			console.log(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>");
			$('#articles').append("</div>");

			calculateEat();
		}
	});
}

function caloriesSetUp(){

	$('#jog').click(function(){
		exerciseType = 363;
		exerciseTypeText = "jog in water";
	});

	$('#saw').click(function(){
		exerciseType = 318;
		exerciseTypeText = "saw trees";
	});

	$('#fish').click(function(){
		exerciseType = 114;
		exerciseTypeText = "fish";
	});

	$('#dance').click(function(){
		exerciseType = 205;
		exerciseTypeText = "dance ballet";
	});

	// unit set-up
	$('#kgButton').click(function(){
		weightUnit = "kg";
	});

	$('#lbsButton').click(function(){
		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(){

	caloriesBurn();

	// 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;

	console.log(amountToEat);

	$('#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 + "">");
	$('#articles2').append("</div>");
}

$(document).ready(function(){
	var url = 'https://api.themoviedb.org/3/',
		mode = 'search/movie',
		input,
		movieName,
		//var url = "https://api.themoviedb.org/3/movie/550?api_key=";
		key = '?api_key=YourKey';

	caloriesSetUp();

	$('#searchButton').click(function(){
		var input = $('#movie').val(),
			movieName = encodeURI(input);

		$.ajax({
			url: url + mode + key + '&query=' + movieName,
			dataType: 'jsonp',
			success: function(data){
				console.log(data);

				idMovie = data.results[0].id;

				getDuration();

			}
		});

	});

});

css

.searchButton{
	width: 100px;
	height: 50px;
	text-align: center
}

.articles {
	text-align: center;

}

PComp_Interaction_Rethink

By jhclaura in Blog, PComp_Physical Computing 0 Comment

7 weeks past, I’ve seen a lot of interaction thought through a lot of ideas for midterm project. Personally, it strengthens my favor for the tangible interaction. It doesn’t necessarily need to be touched to activate but it’s really a satisfying moment to be able to be touched, if users want to. For me, touching strengthen the level of interaction, since touching make workpiece more lively and real. More approachable. And that also strengthen my desire to make some low-fi thing! The original, unpolished appearing can let users focus on the content, and the exposed, seeable technology(e.g. motor, mechanical and physical stuff) can surprise users with familiar things doing unfamiliar things, and might even catalyze users to have new ideas to live the life.

About whether interaction to be implicit or explicit, I think it is case by case. Personally, unpredictable and surprise is my thing but some people might find it annoying and uncomfortable. Moreover, measuring the level of implicit is also an important issue. It should still have patterns or certain amount of logic, in that way users can still have the power of control.

PComp_5_Don’t Touch My Cookie!

By jhclaura in Blog, Fun, PComp_Physical Computing 0 Comment

Fantasy kind of comes to live guys!

After the PComp class, I was inspired to do more about how the communications between Arduino and Processing. I want them to be more instinct, more meaningful, and more related to each other, not just switching on and off. And stay away using MOUSE to control/adjust my work all the time. My works should have their own behaviors patterns, without others tell them what to do. (kind of like users can only have small control/impact on them ;))

So I came out of an idea to control the chocolate spiders amount of my this week’s ICM homework! Since my intention of this project is scaring away people who try to eat it, why not building the interaction based on that? The more you come closer to the cookie(I use photosensor), the more chocolate spiders will come out alive. And the button at Top Left corner will turn red to warn!PComp_cookie_spider

And it worked! 😀 The contends and the behavior matched perfectly. First time! Exciting!! And my circuit looked simple as well.

2013-10-09 14.33.07

Come out a good/crazy idea, and then execute it well in the most instinct and simplest way. It’s my goal of life now.

Below are my To-Do-Lists that inspired through today’s PComp class:

  1. Change velocity, acceleration, changes, instead of just position and on-and-off, so when there’s no input(no one using it), animation still runs.
  2. Different modes with different compositions of inputs. (e.g. Mode A: button 1; Mode B: button 1+2 …)
  3. Let users feel they control something in an abstract way. (Wwwwooo complicated…)