Design for Another World

Overview

In this design sprint, we will be exploring virtual reality to consider what it will be like when computation can transport us to another place. Transport someone to a real location, inside a game, among abstract art… whatever you think would be interesting, immersive, and compelling!

That’s it. Keep in mind that the lack of parameters in this project does not mean that the design your project should not be appropriately scoped. It is your job to define the parameters of your project. You pick your objective, you decide how to design for it, you decide what to build. Be sure that you communicate all of these assumptions in your blog post.

A couple of quick pointers before you start:

You can view some previous Hall of Fame examples from Emory here: Chinese New Year Story, VR Art Gallery. Here’s another example from Bucknell: Bucknell 2100.

Technology

VR Viewers: I have purchase several Google Cardboard viewers for us to use. If you haven’t used this before, you essentially can insert your phone into a low-cost VR viewer. It uses a binocular viewing port (two separate lenses) that can simulate depth in a virtual scene. Strapped to your face, the viewer uses your phone’s gyroscope to track your movements and allow you to move around a scene. To use it, visit your VR scene in the web browser on your phone, then insert your phone in the viewer. Check out some of the apps that have been developed for Google Cardboard for some ideas of what is possible.

Unity: Unity is a development platform and game engine for AR and VR. It relies primarily on coding in C#. Find resources on the web to get started.

A-Frame: A-Frame is a simple, web-based design platform that uses HTML to create VR scenes. In addition, a companion website - Glitch - provides a fantastic web-based development environment that will allow you to see your code + output simultaneously. Although the building blocks of A-Frame are basic, don’t underestimate its powerful potential. This is a good option if you prefer a “coding-lite” approach. Before you start, check out all of the interesting work people in the A-Frame community are up to. You need not use A-Frame. If your group is familiar with an alternative (Unity, etc.), feel free to use that instead.

Deliverables

Grading: Grading will be based on the design rubric. Be sure to complete the peer feedback forms linked at the enf of the design document guide, which will be a large part of your grade.

Some Technical Hints: Using A-Frame

Should you choose to use A-Frame, here are some tips compiled from around the internet and HCI students from Emory. Some of the information may be out of date since they had a significant update in recent history.

There are a number of resources to get you up to speed - A-Frame school, and there are of course various other tutorials blog posts if you simply Google “A-Frame”.

A final word of caution: You may want to avoid rendering a lot of animated 3D avatars into A-Frame because the more assets imported, the laggier the experience.

Here are some additional tips from Gary Song (Emory HCI student, spring 2023).

Getting Familiar with A-Frame

Some tips from Gabbi LaBorwit (Bucknell ‘20).

  1. Take a few minutes to play with the examples provided on A-Frame’s home page.
  2. Once you’ve looked around, go to the first example called “Hello WebVR” and click “Visual Inspector” in the top right-hand corner. Two boxes should pop up containing the source code and each HTML element’s properties.
  3. In the leftmost box outlining the source code, click the second line that reads <a-box...>. Now the rightmost box shows the blue cube’s design properties. Edit the position field and hit enter to see how it affects the scene. Play with the other elements/properties as well to get a feel for the code.

Remixing A-Frame on Glitch

  1. Read the first half of the “Getting Started” instructions and click the link provided to remix the starter example. When a box appears with 3 options, select “Remix your own” and sign in to your Github account from the button in the top-right corner.

  2. Back on the Glitch web-editor go to index.html and click “Preview” in the bottom row of buttons to view what you have so far. Now go back and “remix” the code to make it your own.
    • Note: There’s no need to constantly refresh the page, it automatically updates itself and saves the code in the Preview.
  3. In the top-left corner click the drop-down menu with your glitch username and select “Remix This”. Replace the code in index.html with the following basic template:
<html>
    <head>
        <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <!-- Your code here -->
        </a-scene>
    </body>
</html>

Some tips