WP2WS Project 2 No Way Out
No Way Out
Demo
Concept (proposal)
This project aims to visualize a journey through one’s spiritual space, where one’s inner child is trapped. I intend to develop this project into an interactive storytelling website, in which users experience the process of discovering, listening to, accepting, and healing the inner child.
The main character will first fall into a huge space where a lot of ladders fluctuate and seem to indicate a way out. In this scene, the main character will encounter his/her inner child in the mirror and empathize with it, feeling the sense of being “trapped” and “helplessness”. When the main character approaches the mirror, the mirror would be distorted and the ladders scatter, indicating that “there’s a way out” is an illusion. When the main character touches the mirror, he/her will fall into a tunnel “helplessly”, where he/her will meet the inner child and adventure through the deeper, mental space.
Process
I first constructed 5 planes and put them into a group. I attached a light to the top plane to show the inner structure:
I then translate the group to move the pivot to the desired place. However, when I’m scaling in depth (z axis), the cube is still scaling from the center.
With Prof Moon’s help, I found that I moved the pivot before I translated the group, and the translation didn’t actually take effect. the final solution is to clear out the movement and move the group in z-axis to change the pivot.
Then, I constructed my ladder using particles:
I then tried to construct a class for the ladders to generate multiple instances with variations in height. But when I try to build multiple objects with different positions and ladder lengths using the Math.random() in a for loop, I get the same value for all the objects generated, so that visually there’s only one ladder in the scene. I check that there are 10 objects in total, they are just at the same position.
Later I found that I added all the instances to the same group that I declared in the main threejs file. I added this.grp for the ladder class solve the problem.
After that, I added a mirror plane with a huge width:
For navigation, I disabled the OrbitControl when the scene is first loaded, and enable it when the user clicks the screen (my intention is to have the bridge animation displayed upon clicking, but I failed to generate the bridge…). I disable the orbitcontrol again when the character touch the mirror and make the camera z position increase with frame to generate an illusion of being transported through a tunnel.
Failures:
I constructed another class for vectors of the particles that form the ladders. However, when I tried to modify the particles’ position using this second class, my computer couldn’t display the scene at all: 
Without error messages, I failed to figure out what’s the problem. It might be using the second class drastically slow down the program. But I don’t have enough time to debug.
I also failed to generate the bridge objects. (I wanted to display several cubes and rotate them 90 degree for animation, and I made a class for the cubes. But when I displayed it, the bridge didn’t show and I couldn’t figure out why…)
Feedback & Reflection
In this project, I explore algorithmic visuals, lighting, shadow, reflection, and camera movements. Due to the limited time, I didn’t get to where I expected. I failed to generate the bridge and the particle scatter effect.
In the presentation, I get feedback from my classmates and professor.
For the mirror, Eric said that he didn’t realize there was a mirror until I rotated the scene, and he suggested that I can change the mirror’s color to gray so that it’s more obvious. Prof Moon said that maybe I can keep the mirror black at first and turn it to another color when the character touches the mirror so that I can keep the surprise.
For the ladders, Prof Moon suggested that I can make a huge ladder that shoots up to the sky rather than a lot of ladders floating around. Also, since the ladders slow down the computation a lot, I can turn off the visibility of some ladders to improve the frame rate. Visually, since the ladder is a very concrete object, it’s more reasonable to just import a 3D object rather than use complicated math to generate it. So I might also try to include more abstract, algorithmic visuals.
For future development, I will add more abstract visuals and further explore the navigation.
Reference
Prof Moon’s in-class demo: https://glitch.com/edit/#!/wp2ws-f22-w07
Going Home: http://goinghome.302chanwoo.com/
Bing Bong description: https://insideout.fandom.com/wiki/Bing_Bong
Other Visuals: https://www.pinterest.com/
Breaking effect: https://threejs.org/examples/#physics_ammo_break