gARden Cards

Inspiration

One of our teammates got an email from his boss that a colleague from their office had fallen sick and would be out of the office for awhile in the hospital. People in the office struggled with coordinating to send flowers and cards and general well wishes. We wanted to create a tool that allowed us to make a heart felt message of well wishes and connect us with the recipient through technology.

What it does

gARden Cards allows users to collaboratively build a VR/AR experience for someone else. You are given an easy to use collaborative web interface that allows you and your friends to plant flowers on a garden planet and write and/or record good wishes for your recipient. The system then presents you with a PDF that you can use to print out a physical card. The card has a simple message and a AR Marker inside of it. When the recipient views the card from a phone or VR headset they will see the custom garden with voice and written messages (activated by gaze) spill open on a virtual landscape. The recipient is encouraged to come back to the garden over a period of time to see the garden grow and bloom in a celebration of their health and wellness.

How we built it

We used A-Frame in combination with Vue.js to build a platform agnostic VR/AR experience.

Challenges we ran into

We were super excited to use our Microsoft Mixed Reality but we only had MacBook Pro's with barely any graphical power to use them with. To make sure that we could all develop and be productive we leveraged webVR to ease our development and iteration cycle.

Accomplishments that we're proud of

We made new friends!
Our solution is made to help connect people while using cutting edge technology. In a world with an increasing amount of devices that monitor us, it's still a real problem that we don't have emotional awareness of our relationships.
None of us had used A-Frame before this weekend
None of us had designed 3D graphic assests before this weekend
We combined these technologies in a unique way to allow a community or group of friends to make a custom VR/AR experience for someone else
VR is usually an isolating solo experience and this is an experience that is social and emotional

What we learned

How to use A-Frame
How to use Cinema 4D
How to quickly take a big idea and fit it into a weekend
How to build a platform agnostic VR/AR experience
How to do VR/AR development on macbook pros

What's next for gARden Cards

To make it accessible to all. We made this to share.

Built With

a-frame
blender
cinema4d
firebase
javascript
microsoft-mixed-reality
three.js
vue
webar
webvr

Submitted to

Reality Virtually Hackathon at the MIT Media Lab Returns Year 3 January 17 - 21, 2019
- Winner Best MR

Created by

I wrote the model handling and rendering allowing for the particle effects as well as the Augmented Reality portion. Graphics were done in A-frame and Vue.js with augmented reality work done in AR.js.

I also made the background music and some of the 3d models.

Mo Kakwan
I wrote most of the WebVR code in Vue and A-Frame, which before this hackathon I did not give nearly enough credit. Oh, and I'd never used Vue until Thursday either. It was a slightly more productive weekend than usual.

Jason Morris
I helped with the ideation, design, wireframing, storyboarding and made the 3D flower assets using Cinema 4D (my first time doing 3D modeling!).

Lydia Jessup
I helped with the design and created the print assets for the physical Get-Well Card.

Victoria Grant
I work mainly in VR/360 video. Interested in developing in AR, OpenPose, OpenCV, and designing for accessibility.
ooookai CHANG