Special Note

To see our project, head to team-codename.glitch.me. To see our latest code, don't go to the GitHub link, go here.

Inspiration

Our idea sparked from room arrangement therapy – who hasn't totally re-organized their room in a frenzy to feel at peace? We needed a space where not only we can breathe, but where the room breathes with us. We needed to make a room come to life.

What it does

A spatialised audio navigation takes one through a wondrous open gallery of beautiful objects come to life. This friendly and whimsical abstraction of the often impersonal online shopping experience drops you into a magical world where you can spin detailed Wayfair 3D models. Follow the consequential musical objects, truly delivering an immersive and memorable experience.

How we built it

We built this on the Glitch IDE using the A-Frame javascript library and HTML. Periodically, we had to add more assets via GitHub and pipe those into Glitch because while it is a good editor it kept invalidating our assets' connections to .mtl files for a while in the standard Glitch setup.

Challenges we ran into

  • A hard challenge was figuring out how to align textures due to a Glitch irregularity. Glitch is a wonderful service but our .objs and their .mtls were not wearing the textures also with them, even though we thought they were linked to each other, we thought. It took us most of that time to figure out that Glitch indexes everything differently than expected of .mtl files depending on relative proximity (being in the same folder). Furthermore, Glitch has limited directory control in its UI, so this threw another obstacle in the road. We fixed this by having a backup GitHub repo that we would backup to Glitch when incrementally adding items to the work.
  • There were different levels of coding experience, and only one of the members had had experience with A-Frame. Two members are first time coders, so we definitely took some time to learn from our more experienced members, but in the end it was worth to all be jamming together!
  • Constructing a story, a seamless experience linking a pragmatic object to a fun experience. We spent a lot of time revising our ideas along the way, always coming back to our ultimate question: "How to we bring a room to life?" "How can a space bring about relaxation?" "How can a space tell us when it's happy?"

Accomplishments that we're proud of

  • We had an extremely high level of collaboration and diversity of involvement, given the expansive nature of our team members' interests. This fed our work greatly and we're proud of having come together in this way.
  • We did it!!! (And two of us coded for the first time along the way! And three!! of us are first time hackers!!)
  • Accurately rendered and animated several Wayfair products
  • Created a spatial audio experience in A-Frame – attaching custom made sound files to each objects to create the soundscape.

What we learned

  • A-Frame
  • How Glitch works, including its filing system for projects
  • Html
  • UX design
  • How to fit together radically different interests and backgrounds seamlessly into a project with equal parts passion and compassion.

What's next for the Breathing Room

We might make more similarly surreal experiences in the future, stay tuned! We hope to enhance the artistic context within which Wayfair furniture could exist and be uplifted by a free-form environment. Maybe some fun and themed scenes? We're highly interested in making a design that uses soothing music, sound and visuals as signifiers and cues to advise the best design without having someone telling you that you did it wrong, or it just looks terrible! A perfect room design should be like a perfect piece – it all fits together. It just sounds right.

Built With

Share this project:
×

Updates

Sarah Abowitz posted an update

hhrrrgh, this was submitted in a hurry so some controls notes are in order!

PC

  • WASD or arrows to move
  • drag to look around
  • when the red center dot is on an object, clicking on it might bring it to life!

Mobile

  • no motion, you are fixed in place but you can look around!
  • when the red center dot is on an object, tapping on it might bring it to life!

also thanks to will for making the red dot magic possible ~S

Log in or sign up for Devpost to join the conversation.