{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

Timing and Pacing

For this week’s subject Timing and Pacing, I chose “No Safe-House” in the soundtrack of The Grand Budapest Hotel to decode.



effect I intend to achieve

–> emotion accumulation, cheerful and narrative.


  • library I used for camera in 3D –>  http://mrfeinberg.com/peasycam/#about
  • using PShape to store the tetrahedron I made and set their movements with trigonometry functions, noise, hsl, and hard-coding frameCount!!!(see how long and tedious my codes are :P)
  • issues to work on, since I used frameCount, it’s different all the time, depending how fast my computer run. need to use millis() next time!
  • next step will be using library Minim to generate the patterns directly from the analysis of sound file.


Continue reading

Face and Spider_60 sec. animation_{stages * 3}

Audio wave research time!

Totally not what I planed to do. I ended up make a story about a face and a spider. And it’s a face I guess represents the dark side of human beings. Scared easily by the unknown, and psyched about seeing spider being bullied by boxes.

3 stages story. Codes are gross and messy because I stayed up all night and was unconscious most of the time, and it can’t be played in Openprocessing I don’t know why… But. I kind of like the result even though it’s rough as hell, and I plan to make a v.2 of this.  Soon.


Continue reading

tweaking mini_arc of Mimi

Tweaking Mimi’s codes(go to youtube page to link to the amazing original codes of Mimi)!

–> the image of cat makes me laugh and realize the relationship of it with curve above better.


–> Feeling calm and a little be enchanted, just staring it to finish the pattern you expect in mind.


–> the change of speed, size, and color makes this feeling-soft-at-the-first-glance video more lively.


And I chose to watch the Cat footage for 10s, 30s, 2 minutes, 5 minutes, and 10 minutes….. what do I feel? NAUSEOUS. Apparently. It starts as interesting and fun, but after long time staring it, it became boring and made me dizzy.

physical aspects {Tranquil_v2}

Based on the physical characteristics assigned by Neva:

  • Scale: Immersive versus Distant
    • distant
  • Density: Heavy versus Light
    • light, in order, orientation like lotus
  • Rigidity / Elasticity: Hard versus Soft
    • freely, floating, soft
  • Energy-Level: Exciting versus Calming
    • calming
  • Number: One versus Crowd
    • only one
    • or many but with a lot of space, freely floating like stars

I adjust my {Tranquil_v1} from this:

to this(click to switch the background mode(black, grey dots, white), it’d run faster if you enter the post to see):


emotion visualization {Tranquil}

Before I start, let me document one thing first… I FORGOT the format of Processing. Proof as below.

Screen Shot 2014-02-07 at 7.41.33 PM

And also, I found a music video programming in Openframeworks. Pure Astonishing.


OK. Let’s begin.


For creating 3 studies of the emotion with ratios of space, rations of color, and ratios of time, I got Tranquil from Kate, and l first pictured the situation I’ll have this feeling in, and then tried to convey them through coding.

<em>Situation</em>: sparkling dust floating in dark, hair floating with wind, immerse in music in crowd environment, look into sky, unfocus eyesight, repeat pattern

Study 1: calm(look into sky, unfocus eyesight, repeat pattern)

Study 2: free from disturbance(immerse in music in crowd environment)

Study 3: free(sparkling dust floating in dark, hair floating with wind)

perform test & 5 patterns of emotion

Group perform test w/ audiences!

And below are my 5 patterns of emotion.

The emotion accumulates through the weaving of three stories. At first, the emotion is unsure and blur. And gradually, the similarities of three stories appears, and the emotion goes higher and higher. In the end, huge amount of happiness burst out. The pattern of emotion reaches pick. And the result makes the sweetness linger into the end.


For music, similar to the 1st piece, emotion starts low and then goes high. What’s special about this is its “swinging” feature. By swing low makes the high even higher. And the competitive pattern create the anticipation from audience and creates more sense of involvement.


I see the pattern of the weaving from up to down. Not only the lines, the different materials and textures bring and add another layer to the pattern. It’s like the extra details on the high and low points. Besides the pattern of wave, different genera.


It’s an unusual pattern I’d love to challenge. Unlike the easy-following pattern, the abrupt fault shift the layers as whole, so although it’s easy to tell from looking at distance, it’s difficult to tell in close-up view. In the way to express, I’d imagine the “style” will change abruptly and unrelated at all. Altering without clues. And after that, gradually and gradually, viewers(or receivers, more broad) MIGHT realize the changing. Hopefully.


It’s a raw meat pattern. Less linear, more circular. It’s like a linear pattern without the end. Ending is always the beginning. Love the variation of width of layers. Difference of width, curves, and colors can add up producing a rich experience. Not good for real performance definitely.