☃️ Shaking it Up
I've been itching to get some experience with the web APIs for the gyroscope, accelerometer, and all that other Sensor stuff. I just never really had a project which was interesting and easy enough to make the juice worth the squeeze. Building a Snow Globe was the perfect project.
🎶 Do you want to build a snow globe? 🎶
Here's the basic idea.
- Setup the appropriate sensors.
- Monitor a for a "shake".
- Fire off some confetti.
- Polish it a bit.
Step 1 & 4, unsurprisingly, accounted for 95% of the work.
I'll go through each step.
1) Setup the appropriate sensors.
This was rough. For whatever reason, browsers require SSL to use the sensors. Cool. Safety. I get it. Lots of cool web stuff requires SSL. The caveat to the SSL, is most APIs will work without SSL on localhost. The localhost makes it possible for devs easily tinker.
Here's the issue, my computer doesn't have an accelerometer for obvious reasons. So in order to test any of this sensor stuff locally, you'll need to set up SSL for your local network.
browser-sync has an
--https flag. This is the easiest workaround. Your browser will warn you that it's unsafe, but just blow through those warnings and your local dev setup is fine.
Now you can FINALLY test the sensors you're setting up.
So let's talk about the APIs.
The nice part of these APIs is they're all using the same foundation. There's an unusual quirk to them though: These sensors update their local state automatically. Totally novel for the web world. The events are just to signal that they've updated, or that there's an error. They don't even provide the sensor data! you gotta check the sensor you created and started to get that info. Once you unlearn the patterns the rest of the platform teaches you, you're golden.
I wish more web stuff worked like this. If you want to know if a button is being held, you need to monitor the
pointerup events and basically maintain your own state machine. We just put up with stuff like this. It's wild!
Error handling is weird, but it's weird all over the web.
2) Monitor a for a "shake".
Once you grok the APIs, and set up a way to output the various sensors to your screen, round the numbers, and change framerate to 1 per second, then you can start to learn what these do. You can spend 2 hours reading about these sensors, and not truly understand what it means. Hold your phone which displays the readings for 20 seconds and you'll understand how they work in 20 seconds.
All of that just to say, My definition of a shake is met when the absolute values of x, y, and z from the LinearAccelerationSensor are summed together and exceed 20. That's a convoluted sentence, and still means nothing to me, but I'm happy with how it works. So that's good enough for a little tinkering project.
3) Fire off some confetti.
The homepage of skypack features a dead simple confetti package. It's great! It's configurable, and it even has a snow example. After a little copypasta and some minor tweaks, I got the snow working nicely. A shake would fire off confetti. It would take note of how the phone is being held and puff the snow up from the corner closest to the ground. If you shake harder, it sends the puff of snow further. I'm really pleased with this Package and it was dead simple.
4) Polish it a bit.
Apple sure does think different. Their APIs are different too. 😒
If you pull in a polyfill, negotiate the quirks, handle the user click requirements, and create sensible fallbacks if any of those things fail. You too could have something that already works on desktop and android, work on iOS! It'll only take around 2-4 hours, but hey that's a small price to pay so that the most wealthy company on earth can continue to keep their browser engine options locked down and under funded.
God bless Jen Simmons. She has been doing a great job bringing safari into 2022 fast, but there is still a long way to go.
Give it a whirl
jackhpeterson.com/s/snow-globe/ That's it! It was a fun project, took me a little while longer than I would have liked, but I learned quite a few things along the way. I hope you get a kick out of it, and maybe get inspired to build your own cool little project with one of many, lesser known APIs the web platform provides.