PhoneSaber Starter Kit
Tags: javascript, gyro, glitch, firebase
Published: 2019-05-06 21:37:22

---
title: PhoneSaber Starter Kit
published: true
description: Learn how to stream your phone's gyro to Firebase to update a 3D lightsaber on your desktop!
tags: javascript, gyro, glitch, firebase
---

![](https://media.giphy.com/media/XdJkp9XEnGPBXzlp8e/giphy.gif)

{% glitch phonesaber-starter app %}

- Visit this link on a desktop (or use the embed above): https://phonesaber-starter.glitch.me
- Click <kbd>Start Server</kbd>, noting the server ID
- Visit the same link on a device with Gyro (or use the embed above)
- Type the server ID
- Click <kbd>Connect to Server</kbd>
- Move your device around to see the 3D lightsaber update on the screen!


## Background

So I've been developing a bunch of tools to help people with disabilities use the web hands-free through computer vision. The idea is that people can use head tracking to control a mouse on the screen, and by using JavaScript you can build tools that anyone can use on any device without downloads.

---

![duckhunt-handsfree](https://media.giphy.com/media/MWvfeCGV2MYmaRzvkP/giphy.gif)
[duckhunt-handsfree (smile to shoot)](https://duckhunt-handsfree.glitch.me/)

---

However, head tracking only works if you're able to point a camera at your face which isn't always possible or practical. So I started thinking about using gyroscopes as a way to move a mouse.

The first idea I had was to use the phone as a sort of "marble maze platform", where tilting the phone moves a cursor on the screen like a marble, like those old school marble maze toys:

![](https://images-na.ssl-images-amazon.com/images/I/71AVKJRCNDL._SX425_.gif)

But when I had this idea it was May 4th, and since I'm a fan of Star Wars I wanted to experiment with using Gyro's to control a lightsaber on the screen as a fun way to practice using the API.

The API definitely works really well so I'm very eager to start experimenting with it for accessibility purposes. However, I wanted to share my demo which I've released as a [starter kit on Glitch](https://glitch.com/~phonesaber-starter).

Instead of finishing my app, I turned it into a starter kit that's ready for you to make exciting games and experiences!

## How it Works

### Dependencies

- [Spectre.css](https://picturepan2.github.io/spectre/), I've been using this for years as my goto prototyping stylesheet
- [Babylon.js](https://babylonjs.com) - The 3D engine I used. aFrame.io is another fantastic engine and is WebVR ready (and with an easier learning curve)
- [Gyronorm.js](https://github.com/dorukeker/gyronorm.js/) - This library hasn't been updated in a while, but this is my first try with the gyro API so I went with this to simplify things
- [Firebase](https://firebase.com/) - How I communicate between the client/server
- [Kyle Katran's Lightsaber by Al on Sketchfab](https://sketchfab.com/3d-models/kyle-katarns-lightsaber-low-poly-textured-40ff644dad724523a9983149b3b284c0)

### Key Files

- `/src/saber.js` - This is where you'll probably start your game code, and contains a callback
- `/src/scene.js` - Where I set up the lightsaber, 3D scene
- `/src/client-server.js` - Sets up the client/server, you can mostly ignore this

## Ideas

- Add sound effects
- Deflect lasers
- Use [PoseNet](https://github.com/tensorflow/tfjs-models/tree/master/posenet) to so that it moves around too!

## API Key

I added a free Firebase API key for you to try with, but I recommend [creating your own](https://firebase.google.com/docs/storage/web/start). It's super quick to do and all you have to do is replace the values at the bottom of `index.html` with your own (do a document search for "Initialize Firebase")

---

## Thanks!

Let me know if you need any help setting up etc. I don't write many how-to's so I never know how much info to put 😅