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

study note_{Three.js}

By jhclaura in Coding for Emotional Impact, Spring 2014 0 Comment

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