Visit my room in webvr
My Surprise room in A-frame
Use the arrow keys on your keyboard to navigate the room
I created a room in A-frame as a UX project to convey the emotion of surprise. You can check it out at http://serious-vibraphone.glitch.me/
My User Story – VEX – Virtual Experience
This project began as the need to create a room to convey the emotion of surprise.
This is a room where everything holds the potential for surprise or represents past surprise. There is confetti on the floor. The walls are white but have the potential to change colors as the light changes. The floor to ceiling windows line one wall with a view that changes constantly. The weather randomly changes in the view outside.
There are unopened boxes of different shapes and sizes and colors around the room, some large and some small. There is a comfortable conversation area with a couch and a chair with a coffee table. There is a photo album with pictures of past surprise parties and surprise events. There is a plant on the table that blooms when touched. A butterfly emerges from the bloom. There is a lottery ticket on the table.
A cat roams the room and pounces unexpectedly. A bookcase holds objects like a jack in the box and an engagement ring box. There is a portal that opens when the correct object is removed from the bookcase shelf.
Music playing with a surprise party appearing with balloons appearing and confetti being thrown.
Memorable Constructs
- cat pouncing
- window with unexpected events and weather outside
- balloons
- surprise party
- jack in the box
- lottery ticket
Sketching
Development
A-frame was a new experience for me but I like how accessible it is to people with or without a headset. I developed this on Glitch by remixing another persons project. Credit to Preston McCauley for use of his room to rebuild. He did much of the development so I was able to develop my room more quickly. There are many projects on Glitch so this is a great way to get a project up and running quickly.
Iterating
For Iteration 1 I was still struggling with learning a-frame so I quickly substituted other elements for some of my original ideas. I also learned some of my original ideas were difficult to develop in a-frame. My initial room really didn’t convey the feeling of surprise enough so, true to the UX process I went back to the drawing board to determine what elements I could substitute to create more of a feeling of surprise. I added the “surprise party” on the tv with people screaming surprise. A confetti animation proved too difficult to produce in a-frame so I used the video of the people throwing confetti and added “Surprise” to the audio.
Future Iterations
I can continue to add more elements. I plan to add the lottery ticket to the table and pictures of a proposal, gift opening events, etc. The plant can be animated to bloom when touched or bloom randomly so that can be included in future iterations.
Closing Thoughts
A-frame is an excellent tool to use for rapid prototyping to show and idea to a client in another location. The link can be shared easily and the experience can be viewed on a headset or desktop so it is a versatile tool. Complicated animations are difficult but I’m sure this will change over time. There is a bit of a learning curve but if one is familiar with html, it is fairly easy to learn. My next project is to build an online art gallery opening for my artwork. A virtual gallery is an excellent way to showcase an artist’s artwork and allow guests to explore the artwork in the virtual world from their own home. A gallery could show clients artwork that might be at other locations or on exhibit. Web vr allows the user the versatility of viewing the space with a headset or on a traditional desktop if a headset isn’t available.