Documentation – Project 2: 3D Calculator

Project Description

Demo of final version

With the idea to make a “3D Calculator,” Ben, Keyin, Yeji and I worked together on this project. Its purpose is to imagine how the everyday activity of using a calculator could happen in a very different way with the help of VR.

Upon entering the scene, the user will find themselves in a bedroom (scene 1). In the center of the room, there are a bed and a desk, on which is a calculator, lit up by the lamp beside. Once the user clicks on the calculator, they will be taken into an alternative world (scene 2) where the calculation takes place.

Here, the user can form a formula by creating and dragging around cubes that represent operators and operands. The cubes that make up the formula remain red if not connected to the green equal sign cube; once connected, they turn blue and the result will pop out automatically.

It feels very alternate because instead of pushing buttons on a traditional calculator, the user places numbers and operators in whichever way they want to on a 3D canvas that can contain infinitely long formulas. They can actually place the cubes in specific ways to embody the logic behind the calculation, while digits on a small screen won’t be able to do so. Moreover, the technology of VR allows us to turn a electronic device into an entire environment.

Process and Implementation

Before making up our minds on 3D calculator, our team discussed a few ideas. From pet keeping, programming to barbecuing, we kind of traversed the spectrum of interaction: human-animal interaction, human-computer interaction, and human activities involving non-responsive objects.

Draft of ideas and storyboards

We finally settled on 3D calculator, as all of us agreed that the idea of being able to create and snap together virtual cubes sounded cool and futuristic. Personally, I was interested in how it could embody both the everyday-ness and the alternate-ness. Calcutor is a common device that people are very familiar with, and the action of using it takes place in a lot of scenarios in our daily life; but by reimagining calculator within a VR context, we introduce to the user a brand new interface, where they get to experience a different set of operations. These new operations might open up the door to a lot of new possibilities of how everyday activities could be done in easier ways. Specifically, with this project, we want to demonstrate that activities requiring a strong sense of logic, such as mathematical calculation, and even programming / coding, could take on a more graphic and more intuitive approach. Once users get familiar with this kind of operations, tasks may be done more efficiently.

We divided the work in developing this project into two parts: building the everyday environment, and building the core interaction with cubes. Keyin and I took on the former, so I will first elaborate on the design of the bedroom scene (scene 1) with respect to the following aspects, and then introduce briefly the calculator scene (scene 2) Ben and Yeji built.

  • Purpose
  • Identities
  • Design: furniture, room structure and lighting
  • Interactions

Purpose The question to answer before doing anything is, what is the purpose of scene 1? I expected our scene to act as a friendly starting point for the user, where they would instantly feel familiar.

Identities This required us to create a homely and realistic atmosphere for the scene to be as immersive as possible. Therefore, we decided that building a bedroom would be an easy way to achieve the purpose, as a strong feel of warmth and coziness is often attached to bedrooms, and the identities above wouldn’t be too hard to realize with appropriate design.

Furniture We started with the bed at the center of the room, which has a very realistic texture that gives it a cozy feel. A nightstand was placed right next to the bed. Then we found a desk asset with incredible details, and put it in front of the bed as the platform where the calculator would locate. Alongside the calculator, we placed some other stationery as well as a lamp on the desk in an untidy manner to reflect the casual bedroom identity. The chair came into the scene for a similar purpose. Other decorations include the curtains, a plant at the corner, and three pictures on the wall.

Room structure A significant feature of the room is that it has a staircase on one side. The idea began with me suggesting that there certainly needed to be a door in the room, but Keyin added a staircase instead, which I later found to be a better idea. If we had a door there, it would most possibly not be functional; the staircase, despite not being functional (walkable) either, opens up the space and extends the user’s perception of the house. Since there is a second floor in the house, the user wouldn’t feel isolated in an enclosed space. The large French window provides a view of sunset and serves for that purpose as well.

Lighting We chose the time of dusk as the background because it brings out a serene feel and leaves much room for us to create our own lighting. The bedroom contains two spot lights casting light from above, each having a gentle intensity and a warm yellow-ish hue. The light on the second floor is in fact brighter, so that it may leave the user imagining a brighter space in other parts of the house even though they cannot go upstairs. Not to forget that the desk lamp produces a spot light focusing on the calculator, highlighting the most important object in the room and encouraging the user to interact with it.

Interactions There aren’t many interactions in this scene, the only ones being that the user can click on the calculator or push around the chair. Later after we combined our scene with Ben and Yeji’s, Ben added the interaction of picking things up and throwing them around. We initially enabled the chair to be moved around in order to enrich the gaming aspect of the project; after other objects became movable as well, I found the entire scene a lot more interactive, realistic and engaging.

Demo of interactions in first version of scene 1

The calculator clicking interaction was made using RayCast, which basically means that as the user looks around, the center of their view remains a cursor that can be used to click on things. When the cursor is pointed at the calculator, the calculator turns blue, suggesting that it is clickable. Once it is clicked on, the user will be teleported to scene 2. From the desk lamp to the color changing, we tried to make it as intuitive as possible for the user to nevigate themselves and access all the interactions.

Scene 2 When the user clicks on the calculator, everything in the room disappears except the calculator, which remains at the same place, while a sci-fi-ish scene appears and replaces the bedroom. The calculator apparently acts as a portal from the real world to the alternate reality, and the reason that it is still present in the latter is that by clicking on it, the user can return to the bedroom scene, which is suggested by its unchanged position.

Since we compromised the project for PC platform instead of Vive, the experience of this core interaction feels a lot different from how we intended it, but the scene per se very much lives up to my expectation. (Thanks to Ben and Yeji’s hard work!) The glow-y cubes work well with the blue/black grid floor and the darkened background, creating a futuristic feel that contrasts greatly with scene 1 and presents the alternate-ness as expected.

Demo of an early version of scene 2

The interaction is not as intuitive as it would be with a VR device. It involves several keys on the keyboard and all three mouse buttons, due to the amount of operations needed in this scene. Operations including choosing an operand / operator, creating / moving / deleting a cube, as well as walking around.

Reflection/Evaluation

One thing that’s been bugging me is the amount of intuitiveness that our project provides for the user. In other words, is this way of doing calculation simpler than the regular way? How is it more appealing? The core problem is, how many old conventions are we taking into consideration, and what new conventions are we trying to build with such an interface? In this sense, I think this project stayed far away from a lot of conventions of using a calculator. Our interface does not include a digit keyboard, which would be very familiar to most people. We don’t even have all the digits and operators laid out for the user to choose from; they have to scroll their mouse wheel to find what they want instead. Moreover, placing a cube at a desired position within a 3D space appears difficult through a 2D display, because the sense of depth is very much missing.

But in the meantime, I can’t help but wonder what the project would be like in VR. Obviously, the user would have more dexterity in VR with both hands available for more instinctive movements. Probably it will come in handy and be faster than the traditional calculator once the user gets used to the operations. Like I said, the ultimate goal is to explore the possibilities for 3D interfaces to become a common operating language, which could serve for more purposes, more than just doing mathematical calculation.

Agency Question

Like Murray said, the pleasure of agency could come from double clicking on a file icon and seeing it open, or obtaining a desired output from a piece of code. In our project, creating cubes to form an equation provides the same type of pleasure, which is equivalent to pushing down buttons on a calculator and getting the correct result. I think the summit of pleasure comes when the user places the equal sign cube at the end of their formula. Whether they have a desired result or not, it is meaningful to see that result coming out and fulfilling their expectation, because it is generated from something they build. The colors of the cubes (red when incorrect or not connected, blue otherwise) as well as the grid on the floor help inspire the user to create things in their way and anticipate the result.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.