PhoneSaber Starter Kit

• Visit this link on a desktop (or use the embed above): https://phonesaber-starter.glitch.me
• Click Start Server, noting the server ID
• Visit the same link on a device with Gyro (or use the embed above)
• Type the server ID
• Click Connect to Server
• 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 (smile to shoot)

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:

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.

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, I've been using this for years as my goto prototyping stylesheet
• Babylon.js - The 3D engine I used. aFrame.io is another fantastic engine and is WebVR ready (and with an easier learning curve)
• 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 - How I communicate between the client/server
• Kyle Katran's Lightsaber by Al on Sketchfab

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 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. 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 😅