- 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 😅
Top comments (0)