Project 2 Documentation

Project Description

The main activity used as the basis of the project was using a calculator. The goal was to re-imagine the calculator interface in a VR setting. The calculator most people are familiar with is either in the form of the physical calculator or as apps on our phones or computers. Both versions display the results on a two dimensional screen. Also, the interaction to input numbers is often restricted to the act of pressing buttons – whether they are physical  buttons or those on a screen. With this mind, we wanted to make use of the VR platform to design a functioning interactive calculator in a 3 dimensional space. 

As the project’s emphasis is on the mix of both the usual (everyday) setting and a sense of the alternate, we decided to have two settings for the project. The first, user’s spawn location, is an everyday setting, located in a person’s bedroom. The bedroom is furnished with objects which an average person would possess – bed, drawer, bookshelf, etc. Non-textual elements – such as lighting and color – is used to naturally direct the user towards the calculator. The interactions in this room follow the conventions of the real world, gravity for example, to provide a clear distinction between this world and the alternate. The alternate world is accessed through clicking the calculator. The interactions that take place in this virtual calculator interface would have qualities which do not follow the everyday scene – flying, endless black background, cubes that float in space and snap to each other – creating a clear sense of an alternate reality. 

Brainstorming

Project Two’s brainstorming process was different due to its collaborative nature. The team met up in person, each with potential ideas in mind. Several ideas came up, some of which further developed the 3D drawing idea, simulation of throwing glass, cooking food in a campfire, falling from the sky, pet simulator, backyard work, etc. Ultimately, Ben mentioned re-imagining the programming interface in VR. Discussing the potentials of this idea ultimately led to re-imagining the calculator interface in three dimensional space.

Implementing two different scenes made the division between the everyday and alternate very clear. The everyday surroundings of the bedroom was achieved by placing familiar furniture – desk, bed, plants, etc – under a warm lighting which created a comforting ambience. Furthermore, Ben allowed the user to interact with the objects in the space, making it more interactive. The alternate aspect of the project comes in when the user clicks the calculator. While clicking on other objects, such as the pencil, plant, etc, allows the user to grab and throw, clicking the calculator teleports the user inside the 3D calculator interface. The alternate environment is distinct, evident through the endless black background, glowing objects, ability to fly, grid-like floor. The user also has the freedom to fly. The nature in which objects, cubes in this case, interact is also different. The cubes are not influenced by gravity and also have snapping qualities to each other. 

Process / Implementation

Due to the cancellation of physical classes and partly for convenience, our team divided the work, allowing each of the members to work remotely. As we had two different scenes, it made sense for two people to take charge of one scene. (Keyin and Tiger – scene 1 (bedroom), Ben and I – scene 2 (calculator). 

I was responsible for designing the necessary assets in the alternate world – cubes being the main one. We needed cubes which represented single digits (0-9) and operators (+,-,*,etc). Text Mesh Pro was used to display these numbers. TMP allowed access to the numbers through script which was convenient for Ben when altering the numbers and operators. As the background of the alternate world was darker, a glow effect on the cubes was applied. This was achieved through using the LightWeight Render Pipeline which included a bloom effect.

After finishing the design for the cubes, I worked on writing the script for the teleportation to familiarize myself with the c# language. From Sarah’s suggestion, we decided to place the two worlds in a single scene and teleport the user’s position instead of switching scenes. I initially used Raycast to identify where the cursor was pointing. The raycast was only initiated when pressing the mouse. When the object pointed by the ray was the desired object, the user would be teleported to an assigned location. The script was applied to the player.

From feedback, the script was simplified significantly applying the script to the calculator. Raycast was no longer needed as teleportation was initiated when the calculator was clicked. There was another issue which arose due to the First Person Controller where the player was returned immediately back to their default location after being teleported for a short period of time. Ben fixed this issue through temporarily disabling the First Person Controller while the teleportation took place.

After each person completed their part, the project was assembled in person. Teleportation was implemented to connect two scenes. Most of the time was spent adjusting the LightWeightRender Pipeline to the first scene.  

Reflection / Evaluation

The project managed to create an alternate version of both the interaction with the calculator and its internal interface. The alternate version of the interaction itself was achieved through prompting a different response when clicking the calculator as opposed to clicking the other objects in the room. When clicking the other objects, the user can grab and throw them whereas clicking the calculator teleports the user. This contrast clearly distinguishes the calculator from the rest of the objects. The alternate version of the interface is achieved through the visual and physical elements that clearly differ from the everyday scene. The relative flexibility in the alternate scene allows interactions – such as flying, floating cubes – to occur. 

The primary visual cue which prompts the user to interact with the calculator is the desk light. The calculator is placed in the center of a large desktop under a bright spotlight. When the user hovers the mouse over the calculator, the object luminates to indicate a special interaction and encourages the user to click.

In the alternate world, colors are used to represent the different status of the cubes and expression. Moving around and placing objects follow the conventions of many computer games (wasd) and mouse-click, allowing the user to quickly adapt to the controls. The “=” cube which exists in default, along with the block on the right corner, signals the user to place and block and add on to the expression. 

Different colored cubes

The end result turned out similar to the original designs. Alterations that were made were primarily due to the change in platform from the vive to computer. The keyboard allowed for more freedom in user movement, such as flying. It allowed more buttons for input which were necessary in the alternate world to support the operations. As most interactions in the bedroom was limited to holding and releasing the mouse, they could easily be adapted to the vive. 

Agency Question

Calculators allow for the computation of infinite expressions. This function itself, creates a high-agency experience for the user. The project simply provided another visual interpretation of this very function. Hence, the interactive aspect (pull and drag, snapping, flying), in addition to the freedom of the user to compute any expression and see results for all cases, provide a high-agency environment for the user to interact in. This allows the user to focus more of their attention in formulating expressions and waiting for the right answer and feedback, and less on the physical interactions themselves.

Documentation Project 2

Project Description

The activity that we chose as a basis for the interaction and the environment in which it is carried out is pressing a light switch. It is an action that most people become familiar with early on in their lives and they naturally develop an assumption that there should be a change in the lighting of a room when a light switch is pressed. We decided to work with this very natural and intuitive interaction that most people have grown up doing and add an element of surprise and unexpectedness. After pressing the switch, we make the surroundings and the environment suddenly alternate. Although the user begins with being located inside a regular kitchen and dining area, after exploring the room and interacting with two switches placed in the room, the user learns that the space becomes irregular after the switches have been pressed. If one of the switches is responsible for turning on or off the lights in a room, therefore indicating a more natural and common interaction, the other causes fireflies coming from plants to gradually fill up the room. This response transforms the room in an alternate world and gives more capability to the simple interaction of pressing a switch, as the user now learns that there are more possibilities than only the commonly assumed one.

*

Process and Implementation

Our brainstorming sessions started while still preparing the project for a virtual world using a VR headset and controllers. The initial idea was to illustrate a morning routine and what the effect of a morning coffee has on a person’s mind and imagination, as it comes back to life after the night’s sleep. We were first asked to come up with three interactions and all three that we chose were part of a regular morning routine that many people have. At first, the users would find themselves in a dark hallway where the only thing in front of them would be a door. The back of the hallway would be dark and access to the rest of the hallway would be restricted in the VR environment. Using visual cues such as an apparent handle, we would invite the users to interact with the door eventually opening it and finding themselves inside of a kitchen. There would be different appliances and furniture inside of the kitchen, yet some of the objects would have stronger visual cues than others, therefore guiding the users to explore them in more depth. The first object to appear more apparent would be a light switch which would be responsible for turning on the lights in the room, just as a person does when walking inside of a dark kitchen in the early morning. The next and last object that would allow for an interaction would be a coffee machine. The interaction would be to grab a coffee cup and when it happens, the environment around would suddenly change – the color ambience of the room would become more vibrant, plants in the room would go from dead to green, etc. This reaction would represent the effect of the morning coffee on a person’s mind.

*

Unfortunately, we all had to adapt our initial ideas and narrow it down to just one interaction that would not be carried out using a VR headset anymore. After discussing with my groupmates, we decided to keep the interaction of pressing a light switch as we thought it was a captivating interaction and we could see using it as a means to still carry out some of the ideas that we had previously brainstormed. Therefore, we changed the concept of the project and decided to make an alternate switch world where instead of only a regular action happening from pressing a light switch also more unprecedented and unusual events would take place, such as turning fireworks outside of the window on or off or filling the room with fireflies. We decided to carry on with the idea of the fireflies instead of the initial idea of color change or dead plants, as we liked the visual effect and feel that the fireflies added to the room. We also added fireworks that are happening outside of the window and which can be turned off by pressing the light switch which also controls the lighting, therefore suggesting an alternate action by using an everyday object. The user starts in a room which is lit up and has fireworks but can then turn off the lighting and the fireworks to move on to to the next switch to fill the now dark room with fireflies.

*

The everyday component in our world is the initial environment and the room itself, as well as the action that is carried out in this setting. The kitchen and dining area was made to look as realistic as possible with normal and everyday appliances and furniture. The light switches look like regular switches, and we also worked hard to make the visual effect of pressing the switch look natural – the switch flips up or down when the interaction happens. Up to the moment when the user realizes that there are unexpected reactions happening in this world, the user would just think that it is a regular everyday setting. However, once noticing the control over the fireflies and the fireworks, the user realizes that the world is more alternate than an everyday world.

*

It was definitely a challenge to implement our interaction with using a keyboard instead of a Vive system. When we were thinking about how the user could use the Vive controllers to press the light switch it seemed as a more intuitive interaction, as the user could literally use their hand to approach the switch in the world and then physically press a button on the controller. Because of changing the project to a keyboard, we had to come up with a different solution. In order to move around we used WASD keys, as they are very intuitive in the gaming world. In order to give some guidance to the user about how to press the switch we included some visuals and there is a text box that pops up on the screen with instructions to press the key ‘e’ on the keyboard to press the light switch.

initial moodboard before project alterations
initial storyboard before project alterations
initial game scene after project alterations
the switch asset
updated game scene with ceiling lighting on – kitchen area
dining area
ceiling lighting off – kitchen area
before entering the switch area
when entering the switch area
the fireflies starting to fill in the room

*

Reflection/Evaluation

I think that we managed to achieve an alternate world version of our chosen activity because the results from the interaction are very different and unusual from what a user would normally expect from pressing a light switch. In order to make the experience more intuitive to the player we included a small, but in my opinion necessary visual cue which was to add small lights on the switches which would draw the player’s attention to the switch area. In that way, we tried to design a more intuitive experience to the player, similarly as with adding some text when the user enters the switch area and is able to press a key to turn the switch on or off. Overall, I think that the end result was in line with how we had envisioned the revised version of the project. We utilized those keys that we thought would be the most intuitive in a keyboard world. However, I think that if we were able to use the Vive headset and controllers, the medium would allow for a more thorough and memorable experience for the user, both in terms of controlling the interactions and also the immersion within the space.

*

Agency Question

The action that we designed for the user is the interaction with the light switch. We looked thoroughly to find the most appropriate light switch asset for it to look the most intuitive and natural in order for the user to not confuse it with something else. We wanted the user to start off in the kitchen, look around and be sure right away that there are two light switches located on either side of the walls. We then added the small lights that indicate the player that there is something awaiting them in the switch area, as the lights are subtly inviting them to move forward to the switches. Once the user enters the area we incorporated the textbox that appears on the screen with instructions on what to do next. Ideally, we wanted the user to use their hand to approach it in the direction of the switch and then press a button on the controller if we were using the Vive setup. However, as this option was not possible anymore, we took a step back and looked at the simplest versions of game design. In our opinion, an effective and intuitive way to communicate something in games is by using a subtle text box with instructions, therefore we chose that to communicate to the player. Lastly, we made sure that the switch would change position after it is pressed in order for the user to feel like some action actually took place. We anticipated that he user would otherwise feel a sense of disappointment and unfinishedness if the state of the switch did not change. We think that these steps allow for the user to feel like the action was meaningful, as they have been guided towards the switches by using visual cues and they anticipate something to happen because it is their expectation based on real life precedents when seeing a light switch and pressing it.

Fire Planet | Documentation

Description: Fire Planet is an experience/game that takes place on a planet engulfed by never-ending fires. In order to ensure the security of this mysterious civilization on this planet, a dome has been erected surrounding their city as well as powerful water sprinklers to fight off the constantly encroaching fires. The user assumes the role of a protector of the planet, using their mysterious magical powers to shoot projectiles that kill the planet’s flames. In this scenario, one of the sprinklers malfunctioned, causing the fires to move towards the dome. The user is tasked with putting out the fires and reaching the broken sprinkler to fix it and ensure the security of the city.

Brainstorming: We started brainstorming by discussing what everyday actions would be interesting to replicate in VR in an alternate reality. We discussed ideas such as picking up trash, throwing balls and we eventually settled on designing an experience around the action of using a hand fan. This would entail swinging the VR controller from left to right or up and down. From this, we came to the concept of using a powerful hand fan to blow away or put out fires.

Initial scene brainstorm
Image result for temari fan
I envisioned the fan to resemble something like this (not sure if this is what my group mates envisioned)
This is a character from the anime Naruto who swings a powerful fan

Because using a hand fan powerful enough to put out large fires was an idea that is something that is not realistic, we created a concept revolving around firefighting in an alternate scenario. We decided to create a narrative of a civilization on another planet constantly threatened by approaching fires.

Due to the changes we had to make for the project, we decided to simplify the project from waving a fan, which we believed would not be as compelling of an experience with a mouse, keyboard and computer screen, to simply aiming and throwing orbs of particles that would put out the fires. Because of the disconnect between the motion of throwing or aiming and using a keyboard/mouse to do this, we found it hard to really make the action intuitive besides from most people’s engrained experiences of using a mouse and a keyboard to play video games. But in this alternate scenario, the action of pushing the hand forward mimics that of throwing something, and we found it vital to add this animation of the hands to the experience.

Process: We divided the work with me doing the scene design and character animation, Will with particle interactions and Mari with the projectiles. We worked together to bring all of our parts together to finish the project.

For the scene design we all had a desolate planet in mind with no vegetation. From this I decided to make the environment dark and the terrain rocky and dark. I designed the city in the background with a sphere with a transparent material and used some building assets along with some bright lights to have it contrast the desolate environment that the user is standing in. I also added a red spotlight from that emitted from the base of the dome to make the environment red in order to add some urgency to the actions required of the user.

Animating the hands was something that we believed had to be done so that the experience so that the user would feel like they are the firefighter. I initially started experimenting with models from Mixamo but found these difficult to control and I could not figure out how to remove certain parts of the avatar so that it would not obstruct the camera’s main focus on the hands. With Sarah’s advice, I was able to find a way to use the VR hands. I was able to figure out how to add simple animations (point, closed fist, open hand) to the VR hands. I also felt like the default skin of the hands fit nicely, with red and black gloves resembling the outfits that a sci-fi game character would use.

Lastly, I worked on creating the orb that would be shot at the fires. For this, I created a simple particle system using Unity’s Visual Effects Graph and attached this to the projectile game object that Mari made.

To tie this all together, we added a voiceover to greet the user and provide some context for the experience, as well as a closing voiceover when the user completes the task. We also played around with how we could best guide the user towards the sprinkler they needed to fix. We did this by adding a semi-transparent blue cylinder with the sprinkler inside. We also added an animation for when the user would reach it, as the sprinkler springs up and jets of water begin shooting out of it to reaffirm that the user completed the task

Screenshots

Gameplay:

Reflections:

Overall I had a great time doing this project and I am happy with how it turned out. It was difficult to really mimic motions with the VR controllers to a mouse/keyboard experience, and I am happy that we still somewhat stuck with our initial concept because it was something that I really liked. I am happy with how our game design turned out and the cues and instructions we provided the user. Our positioning of the fires and the cylinder ahead of the player allowed us to make it intuitive that the user must go forward to complete some objective.

Agency Question:

I believe that we gave the user agency that compelled them to act in a certain way by giving them the ability to react to the environment, in this case, they have the complete ability to extinguish the fires. Because fire is something that evokes an immediate response of fear and danger, we believe that a user’s immediate reaction would be wanting to put out as many fires as quickly as possible. We spawned the user right next to the fires facing the objective so that their instinct, even without any cues from the voiceover, would be to put out the fires. Furthermore, we placed the fires they must put out in, more or less, a line towards the objective, extinguishing the fires until they reached the blue cylinder. Lastly, we wanted the final interaction of the user entering the cylinder to be a rewarding one, delaying the animation of the sprinkler turning on and the ending voiceover so that it is apparent that the user accomplished their job and successfully controlled the environment’s dangerous fires.

Project 2 Documentation: Boxing with Ares

PROJECT DESCRIPTION

  • Team member: Neyva, Nhi, and Vince
  • Environment: dark and ominous, yet there is still an indication of hope
  • Boxing with Ares is an interactive experience that aims to immerse the users in a bloody reality. We focus on creating an environment similar to the one in the movie The Matrix, which is simple yet gives a sense of exploration for the users by interacting with what lies in the scene. Our scene consists of the plain ground with foggy surroundings, the red bloody sky scattered with floating small punching bags, and the main punching bag for interaction. Our basic interaction is punching action with the emphasis on the unexpectedness – doves flying out in different angles, speeds, and positions around the punching bag. While the interaction is analogous for finding hope in the darkest time, it is also open to the users’ interpretation that hope is escaping their reach, impossible to capture. In either interpretation, this still serves as an alternate reality experience that deals with different manifestations of hope, be it the shining beacon in the darkest of times or the flickering illusion that forever remains out of human reach.
Dark, ominous, and bloody environment
Movie scene in The Matrix

PROCESS & IMPLEMENTATION

  • Our initial idea for the project is completely different from our final one, though the punching action remains the same. In our first sketch, we planned to have Punching the bag (every time the user punches the bag, besides the normal oscillation, there would be white/black doves flying out magically. The white doves represent peace, and the black doves represent the concept of war), Pressing the button (this button would change the color of the doves. Every time the user presses the button, the color will change from white to black and vice versa), and Theater stage: in the back of the stage, we are considering putting words/colors/pictures to reflect the theme of our project.
Our first sketch for our project
  • After our first idea presentation and the current switch to online class, we decided to constraint our project to one interaction – punching bag & doves flying out – and replaced the theater stage with an ominous empty environment.
  • Our idea for the environment was inspired by the photo below.
Environment
  • After deciding on the final idea for our project, we divided the work as follow: Neyva worked on building the environment, Vince and I worked on developing the interaction.
  • Our final environment reflects the true identity we wanted to bring in this project. Using a grid to lay out small punching bags dotted in the dark bloody sky and using particle systems to create the fog effects in the scene, we created the environment as an implication of darkest times, creating a feeling of loneliness while the player stands and observes the scene.
Red bloody sky
Small punching bags
  • For building the interactions, we wrote 5 main scripts in our project:
  1. animationController: trigger the animation whenever a punch happens. We also put a Punch class that will return the anim.GetCurrentAnimatorStateInfo(0).normalizedTime in the get method.
  2. collisionDetector: if we detect a collision and the value anim.GetCurrentAnimatorStateInfo(0).normalizedTime < 1, we play the punching sound as if the player punches the bag.
  3. RaycastTracking: we decided to use raycast to brighten the color of the punching bag whenever the player looks at it. This aims to attract the player’s attention and serves as an invitation for interaction.
  4. ChangeColor: change the emission color. However, in the end, we decided to not use this feature because the fog we added using the particle system makes the change not obvious anymore.
  5. BirdGenerator: we decided to create a class bird and encapsulate all attributes into this class, and when we dynamically create the birds, we assign the random values to the attributes of the birds. This makes things consistent and easier for us if we want to add additional attributes in the future.
  • Camera: we used First Person Controller camera and boxing man are the children object of First Person Controller. By doing so, when we move the mouse, the boxing man would move accordingly. We also positioned the camera and limited the looking angle (x rotation: -60 to 45) so that the player can only see the hands of the boxing man and the space above
Camera
  • Animation: we have two animations in this project: boxing man animation and bird animation.
Bird prefab

Sound effect: we added background sound (https://www.youtube.com/watch?v=Qm-El3qztgw) and punching sound to make the user experience more interactive.

REFLECTION & EVALUATION

This project is an amazing learning process and great team collaboration. Though our final project looks different from what we envisioned in the beginning, in my opinion, it is a successful adjustment to feedback and improvements during the development of the project. In addition, the process of writing these scripts and debugging was really frustrating but rewarding in the end. Being able to understand and adjust the available resources we found in class and online to implement it into our project is definitely a great learning process. While we could not use VR for this project, the project still reflects what we want to deliver and even more successful than we thought it would be.

AGENCY

Agency has been described as “the satisfying power to take meaningful action and see the results of our decisions and choices” (Murray) and “the actions players desire are among those that they can take” (Wardrip-Fruin). In our project, the reason we choose to create an environment where there is only a punching bag facing the player when the player enters the scene is to invite him/her for an interaction with the punching bag. While the punching bag immediately captures the players’ attention and hints them at punching action, it also triggers the confusion and hesitation in this ominous environment. Every time the player punches the bag, there would be a punching sound effect that gives the player a more real and powerful experience. The more they punch, the larger the number of birds flying out. Yet the birds will fly away from the player out of the reach. This reflects the aforementioned interpretations in the Project Description, giving the player some thoughts and reflections on his/her own.

Documentation for Project 2: Switch World

The activity we used as the basis for the interaction was the action of turning on and off the light. To put this interaction into use, we needed an environment in which such an action would be normal. Thus, we came up with a simple room/kitchen with two light switches on the side. One light switch was completely normal: flipping it on and off would turn the light on and off. The other light switch however, would prompt fireflies to appear from the plants. This is our primary alternate world activity where turning on and off a light switch would create something unusual. The light switch also controls the fireworks that the user can see outside the window.

When brainstorming, we wanted to create an environment that incorporated our daily interactions in the real world. We started off with actions such as turning off the alarm in the morning, waking up and opening the door, turning on/off the light, and grabbing a cup of coffee. In the beginning, we assumed that we were using the Vive system, however due to outside circumstances, we had to stick with Unity only. We ultimately decided to choose turning on/off the light as the main interaction. We felt that this action could create more possibilities for us to explore an alternate reality. By turning on/off a particular light switch, we could have different events show up. In our alternate world, most things were just like normal. The interaction itself was also ordinary, but what happened from the interaction was not necessarily ordinary. Unfortunately our main mode of interaction with the world was the keyboard, the interaction was just simply pressing ‘e’ on the keyboard when the user was near the light switch.

Figure 1: Initial Idea with 3 interactions
Figure 2: First take on kitchen

The steps to implement the interaction were quite simple. We primarily used the onTriggerEnter and onTriggerExit to determine whether or not the user was near the light switch. Once the user was within the box collider of the light switch, simply pressing the letter ‘e’ would result in the light switch being turned on or off. For the fireflies, they also fell under a similar script but we used the particle system to create the effect.

I definitely feel like we did achieve our goal of creating alternate world. Turning on the light to generate fireflies or to start fireworks in the middle of nowhere is not something we see in our world. The design was supposed to create a serene experience in which the user was just there to observe. There’s no real goal for the user; the user has freedom to explore the room and check out the effects of the lights. In an attempt to guide the user, there are GUI’s asking the user to press the ‘e’ on the keyboard when they are near the light switch. Additionally, there’s a light on the light switch to prompt the user to explore. I felt like the end result coincided with what we originally envisioned. We created an everyday interaction and turned it into something unordinary. However, I felt like the medium itself took away from the implementation of the idea. The motion of turning on and off the light switch is quite distinct; it is something we’re familiar with. We couldn’t quite encapsulate the action with our medium as we could only use the mouse click or the keyboard. Perhaps if we were using the Vive, we could make the action much more realistic. Pressing ‘e’ on the keyboard and seeing a change doesn’t create the same sense of bewilderment if the user were to actually flip the switch.R

Our primary action was to turn on/off the light switch. We gave the user freedom to move around within the room and there is nothing else the user can do except from move around or turn on/off the switch. To prompt the user to carry out the action, we had GUI on the top left corner of the screen when the user approached the light switch. Additionally, there’s a light on the light switch that would curate curiosity

Figure 3: GUI when near light switch
Figure 4: Completed look of kitchen
Figure 5 : Fireworks
Figure 6: Fireflies
Figure 7: Lights turned off

Documentation: Project 2

Description

Link to Github repo

Link to executables

For this project, we decided to use the act of calculating as a basis for our interactions. The idea is that the user starts in an everyday setting — in our case, a bedroom — but upon interacting with a calculator on the desk, the user is transported to an alternate world where the calculations will occur. In this world, calculations are performed by dragging and snapping blocks together rather than pressing keys in a “2D” setting.

Process & Implementation


Conceptually, the ideas were more or less there from the start. Most of the difficulties came in the implementation of the systems and dividing up the work. Tiger and Keyin worked on the bedroom world, Yeji worked on the alternate world, and I worked on scripting/back-end. Most of the interactions were made with Rigidbody physics and Monobehaviour.OnMouseDown. The world switching was achieved by placing both worlds in the same position and toggling their enabled state when the calculator was clicked. To achieve more visually pleasing graphics, we used LWRP and the Post-Processing stack as well as several PBR shader graphs.

The development journal contains videos of the process of creating the dragging/snapping interactions.

Reflection/Evaluation

I feel that we successfully provided an alternative interpretation of the act of calculating. Although the idea itself is relatively novel, the implementation works well because the actions used (dragging, clicking, moving) are rather intuitive and easy to learn. This end product actually ended up being much more robust than we initially expected, despite the fact that we couldn’t use VR. For example, we initially never thought about including interactions in the bedroom world because we were primarily focused on interactions in the calculator world. Perhaps the lack of VR allowed for more freedom of implementation, however; after all, we no longer had to worry about VR-induced motion sickness and limitations in movement when programming the worlds.

Agency

The interactions that best enable user agency are those found in the bedroom world. Upon entering the bedroom, the user is first encouraged to walk around. The user will then likely bump into the chair, which will move in response. The user is then encouraged to interact with other objects in the scene by dragging and clicking around; by making most of the items in the scene interactive or responsive in some way, the user is able to feel that they have a great degree of influence over the environment. This helps contextualize the sense of freedom that the user is meant to feel in the alternate world too and perhaps serves as a way to let users lose themselves in this environment.

Project 1 Documentation: The Land of Weilgalia

Project Description

For my initial project, I wanted to focus on creating a space in the sky. I love the idea of standing on a floating island and looking into the expanse of the sky. I wanted to keep it close to what the Earth’s sky looks like (blue with clouds) and during the day instead of at night.

So I created The Land of Weilgalia (the name was taken as inspiration from the 2003 JRPG game Tales of Symphonia, in which there is a floating city in the sky filled with angels called Welgaia.) This project was completed using Unity in order to make it 360 VR. Furthermore, using an Android Build, it is possible for users to experience The Land of Weilgalia through Google Cardboard. The user should see islands around them, with only a small cropping of land beneath their feet that is filled with green grass. The islands around them are in the distance, and there is no visible way to get from island to island; only to look at them from afar.

Inspiration

This VR project was heavily inspired by the Gamecube Game Tales of Symphonia. Throughout the game, you use magical flying transportation to fly around the map of two interconnected worlds. These flying machines allow you to visit places above the worlds and in the sky, and as such, there are multiple towns you can land in and visit. I focused on their city in the game called Exire. 

(Although the name was inspired from the city in the game called Welgaia which is the city of angels, but it had a very different, scifi and futuristic aesthetic which I was not looking for.)

Welcoming animation into the City of Exire
One of the walkable island of Exire
Exire’s aesthetic for the islands is what I was envisioning for my VR project.
The Scifi, futuristic land of Welgaia in the game.

In this game full of amazing, imaginary landscapes, I chose the floating islands due to the calm I think the environment can create. While the area can in theory look frightening, as you are alone very high up in the sky with no reprieve, it can also be very peaceful. With the correct lighting, sound, and some composition decisions, I wanted the user to feel transported into another world where they could explore the serenity found in floating islands in the sky.

I was also further inspired by other games and films with floating islands in the sky such as the feature film Avatar.

Floating Islands in the film Avatar

This was not an ideal example to follow though, as I found the close proximity of all the islands to give me a sense of claustrophobia. This was the opposite of what I wanted to accomplish, as I wanted the user to have more open space in the expanse of the sky they were viewing. I did like the amount of fog and cloudiness within these clouds, and wanted to take that element into my project. While it can add onto the claustrophobia, I wanted to camouflage the islands a bit within the cover of the clouds.

Another inspiration was from the game Zelda Skyward Sword. The user can fly between islands in the sky in order to go on different adventures. The entirety of the game takes place in the sky, and there is minimal landing onto the surface of the Earth.

Flying mechanics Skyward Sword

The islands in Zelda gave me a good idea of what I wanted the shapes of the islands to look like, but I did not like the ever-present cloud cover under the islands. Again, this is why I defaulted to the Tales of Syphonia game in the city of Exire, as I found it to be a perfect example of what I wanted to create.

Process and Implementation

Since the beginning of the project, I knew that I wanted to avoid using lowpoly assets and use a more realistic or artistic interpretation of the environment. From there, I began to sketch out my idea from the Tales of Symphonia game.

Sketch for the land of Weilgalia

From there, I began to explore the different asset packages I could to begin to create the environment I wanted.

***Apologies in advance, most of my screenshots are not maximized as I did not know how to maximize on unity at the time***

My audio theme: The city of Exire (as shown above.)
One of the later examples of what my terrain looked like.
After a suggestion from Sarah, I added in different colored lighting to make it less dull in color.

When creating my environment, there were specific things that I knew I had to avoid in order to make it feel serene.

Firstly, the viewer could not be standing on the edge of the floating island they were on. Although this would give me more room to work with in the visuals below the island, I knew that having the viewer on the edge would cause a slight sense of anxiety. Because of this, I situated my user straight in the middle of a medium sized floating island.

Secondly, I knew I needed to make the sky daytime in order to make all my details visible. I considered making the islands at night, but I thought this might give my user a sense of anxiety. I believe I would feel anxious if I were in the dark and I had huge, floating, and unidentified objects around me. I also thought that creating the space at night wouldn’t allow for the wide expanse of space to be appreciated; I wanted the user to see floating islands in the distance, and I thought that would’ve been harder to accomplish in the night.

Thirdly and lastly, I chose to use a semi-realistic landscape in order to connect to something the user is already familiar with. I wanted to take a patch of green grass which everyone is familiar with but place it in an environment that is hard to envision. But this small sense of familiarity would help connect the user into the environment by giving them something small to tether onto.

Reflections

Overall, I did face some difficulties in executing my project as I first intended. Originally, I wanted there to be cities in the distance on the floating islands. This was harder for me to implement, as no matter where I tried to position different buildings, I could not get them to the quality and size that I wanted them to be. This I think I can improve on in time, but within this first project, I really struggled with getting the buildings to look the way I wanted them too. (I also had a lot of trouble with some of the asset packages I would download for buildings. A lot of the scripts would begin to interfere as soon as I downloaded them and I was unable to debug the problems with some of the packages that best fit the aesthetic I was looking for.)

The bottom of the floating islands were also just an enlarged rock prefab from a certain package, and I found this to be very limiting when making the floating islands. In the future, in order to improve on my islands, I would need to find a more viable alternative on how to create the textured bottom of the islands instead of the one rock asset.

Project 1 Documentation

1. Project Description

When I started brainstorming ideas about the environment I would create for Project 1, I realized that I wanted to make something realistic-looking but with a hint of enhancement. I had recently watched the movie “Once Upon a Time in Hollywood” and was very amazed with its scenography. The scenes were beautifully set and very atmospheric, and I decided that I would like to recreate a scene inspired by the movie. A vision that I had in mind from the very beginning was a late 1960s Hollywood street with palm trees surrounding the street from both sides, retro cars on the road, some diners and motels on the sides and an endless desert in the background during a beautiful pink-toned sunset. The identity that I was striving for is dreamy, tranquil and deserted. In the finished project the camera’s point of view is in the middle of a street that stretches far into the desert. Palm trees densely surround the street from both sides. There are no cars or buildings, thus enhancing the deserted mood of my environment. Emphasis is put on the sunset, its lighting and colors.

*

2. Process and Implementation

The process of creating this project started with looking for suitable assets for my environment. The road was an integral part of my scene, therefore I spent some time looking for the most realistic-looking road asset. Instead of having a ready-made road I found an asset that allows to draw a road on a terrain, thus being able to change its width and curvature. After struggling for a bit with making this asset work, I eventually tried out many different shapes of the road to see which one encompassed the feel of my identity the most. I placed the camera in the middle of the road to maximize the view on the surroundings. I created a vast desert on the sides of the road by using the terrain tool in Unity and applying a sand texture to it. I then placed palm trees alongside the road, alternating different types of trees to make them look more natural. The trickiest part of the project was creating the lighting and colors of a sunset. This was the part where I wanted to go for a more unrealistic feel and have very bright sunset colors that look more enhanced than during a real-life sunset. I found a skybox which I liked conceptually (the angle of the setting sun and the clouds), however, I wasn’t convinced with the colors and I wanted to change them. After meeting with Sarah, I learned that I could change the coloring of the skybox in Photoshop, thus I experimented quite a lot with the color palette that I wanted the sunset sky to have. I especially emphasized the pink and the purple colors. After changing the colors of the skybox I also experimented with the environmental lighting in the scene and added two directional lights. One of them is placed closer to the end of the road that is nearer to the sun and that directional light is a yellowish white color. I chose that color because during a sunset there is sometimes a ray of the last sunlight peeking through the clouds and illuminating the ground. I wanted to recreate that feeling by placing a directional light and illuminating the road for one last bit, as well as casting a shadow on the road coming from the palm trees. The other directional light acts from the opposite side of the road and is a darker color – a pink. This light emphasizes the pink ambience of the scene and makes the other side of the sunset look a bit darker. The environmental lighting is also pink to emphasize the pink feeling coming from the atmospheric clouds.

*

I think that playing with the colors and enhancing them made my world into an alternate world, as it was the only more unrealistic aspect. I wanted to create an environment where one could feel like they can escape to a dreamy sunset and experience colors that they haven’t seen in the real world. Also, the road is eerily empty which only happens in very remote areas. I think this also adds a layer to my alternate reality because usually there is more traffic on roads, therefore my world suggests a more deserted feeling.

*

The composition of the areas in view was carefully chosen to represent a real-life scene of a road that is situated in the middle of a desert with palm trees on the side. I wanted the user to feel like there is really nothing else in the scene except for the road and the desert on the sides. However, the colors of the sunset are captivating enough to make the user not feel scared but rather calm and peaceful.

moodboard that I created for inspiration
storyboard of my envisioned environment
the road asset & terrain with applied and texture
palm tree assets
the interactor’s point of view towards the setting sun
the opposite side of the road which is in more shadows
left side view – vast palm trees and vast desert
top view
right side view

3. Reflection/Evaluation

I think that the implementation reflects my intended identity, and when being in my environment I feel similarly as what I had imagined while brainstorming ideas in the beginning. What helps my environment to achieve the identity goal is that my environment is located in the middle of the desert with no other living beings or objects around, therefore creating a deserted feeling. The colors of the setting sun hopefully cause the user to feel a tranquil and dreamy feeling and I associate these colors and clouds with something peaceful and safe. Compared to the initial storyboards of my environment, the end result is quite similar, however, not completely the same, as I didn’t include some of the envisioned assets like retro cars and buildings. At first, I had imagined the scene to be filled with more objects, but I was also thinking a lot in terms of the mood and feeling that one would feel while being in my environment. I wanted the mood to be mainly created and emphasized by the sunset, the desert, the road and the palm trees, thus I think that I managed to achieve the mood I was aiming for in my end result.

*

Lastly, the medium that we worked in was advantageous because Unity allowed to easily manipulate objects in the scene – change their position, change their size, change their color, etc. Therefore, many different versions of the same thing could be created to see which one fits and looks the best. However, in my case, the end result was a build for the computer screen, therefore, it didn’t feel quite realistic when looking at it because there was a notable separation between the environment and the person interacting with it. I would like to also build my project for either Google Cardboard or a VR headset to see whether the environment feels more capturing in that medium.

Project 1 Documentation

Project Description

1.1 – Inspiration and Direction

The environment which I tried to create for this assignment was centered around the theme of disproportionate objects. Primarily inspired by the works of the Russian surrealist, Vitaly Urzhumov, I wanted to create a landscape composed of objects that were either bigger or smaller than their average size. Through the abnormal sizes of the objects, I wanted to initially provoke a sense of confusion for the user. However, as seen in Urzhumov’s works, although the sizes are not normal, he makes sure to maintain balance in all other aspects of the work such as the side-objects (the tree in the first work, the man and cloud in the second, the mountains in the third), the lighting, the landscape, etc. He does this to set the emphasis on the few objects that are out of proportion. If he were to make everything disproportionate, there would be no focal point and the world will not be visually appealing to the eye of the viewer. I was inspired by these particular aspects of Urzhumov’s work.

1.2 – Environment and Identity

Environment: 

Surreal Landscape consisting of Disproportionate Everyday Objects

Identity: 

The identity of the user is a person who stumbles across this landscape. To achieve this, I made sure to avoid making the user the obvious center of the terrain. The user was placed under a shaded area, behind a few trees. The main scene of the space is the portal and skeletons, illuminated with green light. This ensures that the user does not feel like the world was created for them – rather, they have coincidentally stumbled across an already existing scene. 

1.3 – Design Goals

For this project, I had a couple of design goals I wanted to achieve:


1. Limited Use of Color: 

I wanted to limit the user of color I used for the scene. As the style I was going for was more surrealist – less realism – I also wanted to express this through the choice of colors. I was inspired by an ios game which I played a couple of years back, called Monument Valley. I wanted to adapt the same approach where there are only two to three colors – very bright but pastel. Limiting the colors leads to a more creative adaptation of the different range of tints and tones of the color. I also wanted the main directional light to be an unconventional color which dominates the scene and walls of the objects.


2. Light / Shadow: 

Inspired by the talk on the development of Kentucky Route Zero, I learnt how light and shadow can provide various functions. Particularly, their ability to create a focal point without the user of sound or words, seemed to be such a subtle way to naturally bring attention of the user and communicate what objects were of higher significance, and vice versa. I wanted to make use of this functionality in my project.


3. Depth: 

Looking at various indie games during the brainstorming stage, I learnt that depth – created through layering of objects, fog, lighting – was an essential feature of making a space seem believable. I wanted to make sure to implement depth in my landscape so the user could not sense where the end of the terrain was. 


4. Objects Proportion:

Inspired by Urzhumov’s works, I wanted to make sure to magnify some objects, while keeping the other objects in normal proportion to reinforce the effect and not overwhelm the user. 


5. Consistency in Object Style

To make a scene appear consistent and believable, I thought it was very important to keep the styles of the objects consistent as well. As I needed to use many objects, I decided to stick with low-poly resource packs to increase my options.

Process and Implementation

2.1 – First Build

For the first build, although the Howl’s Moving Castle idea was scrapped, I still wanted to incorporate the aspect of two main spaces – internal (where the player will be located in) and an external space. Although surrounded by a foreign and surreal environment, I want to recreate a sense of coziness through enclosing the user within an internal space. Having these ideas in mind, I started working on my unity file. I decided to go with a cold shade of pink (#CC00FF) and ultramarine (#3300FF). These colors were chosen through playing around with the color options of the directional light on unity.

As seen in the previous surrealist art pieces, I took prefabs of ordinary objects – those small enough to be held with a person’s hand – and blew them out of proportion. I placed these objects within the terrain, through burying their roots, giving a sense of an abandoned landscape. Although I increased the size of most objects, I made the sizes of the trees and hills realistic to emphasize and highlight the absurd proportions of the other objects.

To construct an internal space, I used the fence prefab object and surrounded the 360 camera with it, giving an illusion of being protected. I also placed grave stones and skeletons right outside the parameters of the fence to give the fence significance and to provide a sense of fear towards the outer environment.

2.2 – First Build Limitations

Some primary limitations of build 1 that were taken into consideration when constructing build 2:

  1. Fence: The size of the fence was very big to make the user seem smaller. However, it blocked a significant portion of the background. The effect was not worth the blocking and creation of internal space. 
  2. Not Enough Depth: Due to the lack of objects in the background and fog, it is very obvious where the terrain ends.
  3. Too much pink: Although pink was pleasing to see aesthetically, it seemed like it did not serve any purpose other than the visual appeal. I wanted to maximize the potential of using colors for emotional effect as well.

2.3 – Second Build

Changes that have been made since build 1. These are the main changes:

  1. Depth (mountains, fog effect):

One limitation from the first build was the lack of depth. Due to this, it was very obvious that objects only existed within the parameters surrounding the user. To solve this issue, I added a fog effect, to make the background blend in a more subtle manner. I also layered more objects and filled with empty spaces with objects to remove the filling of emptiness. The overall size of the terrain was also increased to provide more space for objects in the background.

2. Story (lighting)

One aspect lacking was a story. I had a clear image of the world, but no clear narrative for the user and their identity. An idea of the story came to me during the development process. I got feedback that the bones mentioned in the previous build were not easily identifiable as bones. 

Hence, I downloaded a resource pack of a skeleton to replace the bone. While playing with the skeleton, I was also trying to make an escape portal from this alternate world. Combining these two aspects, instead of an escape portal for the user, I decided to give the portal a function – one where if objects go through it, it magnifies (giving more narrative and reason behind the disproportionate world).

3. User Location

Initially, the player was located in the middle of the terrain – again, this made it seem like the world was built for the user which I did not like. Instead of the user, I placed the portal and the skeletons in the middle of the terrain, darkened the overall lighting of the scene, and placed a luminous green light around the scene to bring attention to it and indicate that this was the focal point.

The user was relocated to the side, under the shadows and behind some trees, to make it seem like they were hiding under the shadows witnessing a haunting scene. Through this relocation, they no longer became the focal point of the world. Rather, a spectator who stumbled across this world.

4. Sound

I added the sound of an empty room (which actually has a sound) and placed it under the camera rig. I also added portal sound effects and placed it on the portal to add to the atmosphere.

5. Blue adds to cold and haunting atmosphere

The previous build was very pink. I liked the visuals of it, and enjoyed playing around with different tones and tints of pink, but it did not really add to the atmosphere I was intended to create. Hence, I changed the color to a colder one – blue, to give it a haunting atmosphere. This suited the new narrative more.

There are many more little changes made since the previous builds but the ones above are the most significant.


Reflection and Evaluation 

Do you feel the implementation reflects the identity you intended? In what way?

The most important aspect of the work, which was making the objects disproportionate, was followed and achieved, it seems like that aspect of the identity was clearly reflected in the world I created. Also, the change which I have made in between the two builds – particularly the color change from pink to a colder blue – seemed to aid in achieving the effect of being lost in an unknown world. Changing the user location from center to the side, under the shade, seemed to have contributed significantly in achieving this identity and effect. Hence, I think many of the changes made for build 2 were essential in creating a more accurate depiction of the identity I intended.

How did the end result compare to what you envisioned?

The main components – such as the magnified everyday objects – seemed to align with my original vision. But, the implementation of a storyline – the skeletons and the portal – were ideas which came during the development process through playing around with the prefabs. After the implementation however, it seems like that became almost the focal point and a very significant part of the scene which provides context and a potential reason for the way the world is. This seems to increase the user presence in the scene. 

How would you evaluate the medium for being able to render this kind of environment?

Working on this project made me realize the lack of limitations in using VR as a medium of implementing my vision. As it gives the developer to customize a 360 view of a scene, it is very similar to the way in which we view the real world. The act of looking around alone is a significant part of what makes VR an immersive and powerful tool for creating a place. Due to the 3 dimensional nature of the space, compared to 2D space, it seemed to have many more possibilities. Especially since my project dealt with size, more specifically the alteration of it, the extra z-axis contributed significantly in providing a larger surface to place and move around objects. The specific incorporation of sound into objects was another key component to increasing presence to the scene. Even in a very quiet room, there is always sound at low frequency. It is rare to come across a completely noiseless scene. For my scene, I incorporated the sound of an empty room, and a portal sound to add to the atmosphere. Even with the lack of movement and interaction, except looking around the 360 degree view, it seemed, there were enough properties – lighting, proportion, colors, depth, etc – to create a presence. Through this project, I learnt that it is not necessarily the complexity that matters as much as perfecting these fundamental properties in constructing a place – something to keep in mind moving forward with future projects. I also realized through the process of having more than one build, the importance of having enough time and flexibility to alter ideas in between builds as these changes in development process are equally important and significant. Many of the changes and additions I made in between builds have become an integral part of the scene – the portal, skeleton, color change, etc. This taught me alot about the nature of the development process and to always give myself more time than planned to work on the project to allow these changes. 

Link to Final Build: https://drive.google.com/open?id=1970tL91_xtHvKijMk0bQVuJPqfQTTcDQ

Documentation – Project 1: Psychedelia

Project Description

Entitled “Psychedelia,” my first project is a 3D environment built with Unity. The viewer can look around the environment by moving around the mouse. Drawing a lot of inspiration from psychedelic art, I intended the environment to evoke a psychedelic, surreal, dark, dizzy, and even suffocating feel.

Demo of “Psychedelia”

What the viewer will first see is the television right in front of them starting to play a music video upside-down. Then they should realize that they are located on a round, isolated platform that sits in the middle of an extremely dim room filled with dark pink liquid. As they start to look around the platform, they will notice the checkerboard-patterned dance floor, a palm tree lighted up with funny colors, and a green armchair. Farther surroundings include some cars, trees, an airplane, and a huge disco ball drowned in water. In the darkened background there are some mountains and walls covered by a glitchy image.

Process and Implementation

For this project, there are a few things I specifically worked on to realize the identity of psychedelia, which I will address in different parts of this section:

  • Colors/patterns
  • Lighting/shadows
  • Themed elements

The first thing I did to bring my imagination of psychedelia to life is making a storyboard to present the basic idea of the environment I wanted to create, as shown below.

I used black and white striped patterns to emphasize the dizziness they bring. The colors, on the other hand, are all bright ones and clash with each other so that they evoke a surrealistic feel.

Then I started to implement things in Unity. Above is what the enviroment first looked like. I changed the disco dance floor into a checkerboard because the former didn’t look good as expected, while the latter is about equivalent to a black and white striped pattern. I also found a water asset online that automatically generates waves and turned it pink.

I soon realized that even after I deleted the directional light existing by default, the light given out by the sky box kept the whole scene lighted up, which hindered the darkness I was going for. Therefore, I built walls and ceiling to make it an enclosed space, but within the walls it was still quite bright. By playing with directional light, I found out that rather than deleting it, adjusting its angle helps change the brightness of the environment, and a 188° directional light gave me just the right amount of brightness to design my own lighting.

Coming back to the focal point of the environment, lighting upon the island consists of six spot lights. Two of them are main ones that cast red and blue light respectively on either side of the island, creating a contrast that the viewer can notice instantly as they change angles. The other four spot lights surround the palm tree and cast the shadows of its leaves all over the island and the surface of water.

As a result, the palm tree is illuminated with a bunch of different colors.

After that I began working on the surroundings. I thought carefully about what to add to the scene to help with the psychedelic identity, and finally settled on two sets of objects (themed elements): one would appear more realistic, while the other would enhance the surrealistic aspect. Together they would distort the viewer’s perception of how realistic this reality is.

“Realistic” elements

The realistic set of objects includes some trees, cars, and an airplane, which are elements with a sense of everyday life. These objects not only added layers to the scene, so that it looks deeper from the viewer’s point of view, but also complemented the lighting. Under lighting of different colors, the trees contribute to darkening the atmosphere.

“Surrealistic” elements

The surrealistic set of objects, on the other hand, includes the striped pattern on the walls, the psychedelic-style mountains, two disco balls, as well as the island itself. Disco ball presents a sense of clubbing/intoxication/hallucination and is reflective like mirrors, which would add to the lighting structure of the environment. Meanwhile, the palm tree encourages the viewer to look up, to not only see the disco ball overhead but also explore outside of the horizontal view.

Moreover, in this part I kind of “cheated” by inserting videos to achieve the dizziness I wanted. Besides the music video played on the television, there are videos of a glitchy screen playing on the walls and the mountains. Even on the checkerboard dance floor, I added a video of disco lights revolving slowly to accompany the rhythm that the water movement produced.

The video played on the television is a music video of the song “‘Cause I’m a Man” by Tame Impala. The video has been a great inspiration for this project, and therefore I paid homage by integrating it into the project itself, which acted as great background music at the same time.

Everything combined looks like this:

Reflection/Evaluation

In fact, psychedelia as the identity for an alternate reality is already interesting, because psychedelia itself refers to the experience of altered consciousness. Personally, I am satisfied with how the project turned out to reflect my initial idea of psychedelia, especially how the distinction between presence and immersion is also somewhat reflected here. The colors, patterns, lighting, and surroundings of the environment are all part of creating the immersion, while the television is a means of presenting presence to the viewer. Since looking around is the only interaction allowed here, there is not much that can be done to promote the sense of participation; nonetheless, stopping to watch the television becomes something that the viewer can do, besides looking around, in the alternate reality.

From another perspective, I am content with how the final product embodies psychedelia both visually and musically, sometimes blurring the line between the two. Psychedelia itself can refer to a genre of music – the music I used in this project falls within that category. More importantly, during presentation in class, Vince pointed out the “rhythm” within the environment created by the water movement. Together with the revolving disco lights and glitchy videos, they act as a visual presentation of the music. And don’t forget that while the viewer is looking around the environment, they themselves are also revolving with it. They become a part of their very own psychedelic experience.