Making Apps for Google Cardboard

Creating a VR app on thunkable without knowing how to code

Albert Ching
Thunkable Thoughts
5 min readMay 2, 2017

--

“our thunkable beaver loves virtual field trips!” by our amazing designer, Yue Xi
Humpback whale-inspired Cardboard App: Click to start drawing using the tilt of your head, shake to erase. This app was inspired by a recent trip to Maui during humpback whale breeding and mating season in February of this year.
Click here to remix this Cardboard App on thunkable

The Future is Virtual

We’re making a long-term bet that immersive, virtual and augmented reality will become a part of people’s every day life” — Mark Zuckerberg

A few weeks ago at Facebook’s F8 developer conference, Mark Zuckerberg revealed Facebook’s bet on the future — and that future is virtual.

Outside of Silicon Valley, this message must have been puzzling as virtual reality is still a bit of a mystery to most people. In the US, only *one in ten adults has ever tried VR (*as of 2015, when the latest stats were available).

When most experts talk about virtual reality, they imagine an experience similar to the one I experienced at my cousin’s house in Queens, NY last year. A fully immersive headset connected to a powerful standalone box with add-on features like joysticks to let you not just be immersed in a virtual world but also take a lead role within it.

While I must admit I was blown away by the experience of shooting zombies from all angles or being eye to eye with a gigantic blue whale, I never felt comfortable in a virtual world that someone else imagined for me. And while the future of VR may eventually converge on bringing users front row to some of the best events on the planet, today, you are still immersed in some creator’s fantasy.

What if anyone could be not only a consumer but also a creator of virtual experiences?

High-end virtual reality demo by my cousins Jason and Pamela in Queens, NY

Virtual Reality for (Almost) Everyone

Buy your own Cardboard on Google for $15, or $25 for 2

Three years ago, a few Googlers in their 20 percent time hacked together one of the best inventions towards bringing the virtual experience to almost everyone: Google Cardboard. Unlike the robust virtual reality machines that required a roomful of equipment and cost my cousin several thousand dollars , Google Cardboard could retrofit any smartphone with a gyroscope and minimum operating system requirements into a VR machine for the masses, all for the relatively accessible price of $15.

Designing for Cardboard

Creating your first cardboard app on thunkable, the fastest way to make native mobile apps without knowing how to code, can be as easy as remixing the code for the sample app I created.

Before you get started, please note that there are a few key components in any virtual reality app — a Gyroscope sensor, which can sense changes in rotation and tilt of your phone, a Canvas, which provides both the visual palette and the touch sensor for the Cardboard, and a Sound player, which works with the Canvas to trick your eyes and ears that you are in another environment.

With Cardboard, there is only one button that is enabled to trigger an event for the user — so you have to creative if you want to create something like a drawing application that both draws and erases. In the case of the sample app I created above, I added an Accelerometer to erase the canvas when I shook the phone.

The app project size limit on Thunkable is 10 MB so be careful of the size of your images and audio files which may exceed those limits since you’ll likely want to include as rich a media as you have available. Audio clips can be shortened into loops and images can be sized down to their minimum required size for the maximum screen size you want to support.

One other peculiar thing that you may notice is that the drawing for this sample app only happens on the left side of the screen. One reason for this idiosyncrasy may be explained by how our eyes combine two separate images to form a single projection in our brains. For whatever reason, when the drawing only appears to one eye, based on my own experience, it appears more 3-dimensional.

Remixing a Cardboard app on thunkable

Click here to remix this Cardboard App on thunkable

To make your own version of the sample I app I created, you may want to follow the simple steps below.

Step One. Click here to copy the sample app into your thunkable account

If you are a first time visitor, you might want to first watch our beginner tutorial series on YouTube.

Step Two. Add an image, preferably a square one to the two Canvases in the app.

In my case, I took an image from my favorite Square-shaped social media account, Instagram.

Step Three. Add your own audio track.

I was lucky enough to record underwater audio of a humpback whale calf and mother earlier this year on a GoPro and used it for the sample app.

Step Four. Live test it. Make tweaks. Repeat.

If you don’t have the thunkable Live app, download it here. With the app, you can accelerate your app development by seeing the changes on your phone as you make them. Try changing the color of the lines or the speed of the ball and you’ll see it instantly reflect on the app. Even hard-core developers don’t have this tool.

Sharing is Caring

This sample app is only the tip of what’s possible with VR on thunkable. We invite you to let your creativity run wild and post questions to our wonderful community of developers.

At thunkable, we are beginning to believe that sharing apps and their source code enables our community of (mostly) first-time developers to not only build better apps but to also build them faster. In other words, we believe ain’t nobody got time to create the same app that another thunkable developer has created before.

To encourage sharing, we are creating a new section in our community forum called #OpenSource for thunkers of all kinds to share their app source code files (.aia) for other developers to learn from and remix into something even better.

We’ll share our favorite open source app projects and the stories of the developers behind those projects on this blog.

We look forward to seeing what you share!

--

--

Albert Ching
Thunkable Thoughts

Crazy interested in helping everyone and every team be their best selves — and searching for ways to slow down time.