Dem Bones! (I'm pretty proud of this Weird Web October site!)

[Dan Q]

I've been half-heartedly doing Weird Web October, picking and choosing from the themes to find a few that I'd enjoy engaging with. But I'm really proud of what I came up with for today's theme of "skeletons" and I wanted to share it with you:

https://skelly.monster/

About ten years ago I made a game that used tilt sensors and websockets to turn a mobile phone into the "steering wheel" of a car, entirely using Web technologies? I started from what I learned from that, stripped out the third-party dependencies, and went back to plain HTML, CSS, JS and SVG.

You'll need two devices to play it: one to go to the site with. And a second one that can scan QR codes and has orientation sensors, like a mobile phone. (Mad props to @Noah_S for helping with some testing earlier this week and showing that I wasn't being very clear about the two-device requirement!) I'd recommend you try it yourself, but if you'd rather just watch, here's a demo video:

It's a marionette puppet on your desktop that you control using the tilt sensors on your phone, all powered 100% by standard Web technologies! (Here's an explanatory diagram.)

(Specifically the web tech it leans on are the Orientation API and Websockets; that latter one means it needs a server, but I think it could be re-implemented to use WebRTC or Bluetooth if you wanted a high-performance serverless variant... although it would place certain requirements on the network that your computer and your phone are connected to!)

I've open-sourced the entire thing if you want to learn from or adapt it... or perhaps, if you're a better artist that me (I know you are, @WynnDawnstrider: thanks for the backgrounds BTW!) than you might like a go at making a different monster, right in time for halloween? I'd love to see this done with a mummy, vampire, witch, zombie...

Anyway: I hope you'll find it as fun to play with as I found it to make! Here's some links to wrap up:

• Dem Bones! (skelly.monster) - the game itself: go play!
• Blog post about it
• Source code

P.S. Don't forget to check out other Weird Web October site creators. I'd just like to specifically call out our very own @ribose whose works in this and previous years are inspirational: I wish I had the stamina to launch something every day!

[mrparker]

Stuff like this makes me wish I knew math, I don't know any math and I would 100% make stuff like this if I did.

This is great.

[Dan Q]

Stuff like this makes me wish I knew math, I don't know any math and I would 100% make stuff like this if I did.

This is great.

Thank you!

The maths wasn't actually too bad. Mostly I used examples online of how to make a puppet-like thing with forces acting on it (a string pulling in a vector, plus gravity)... and then ended up with this huge list of constants which I gradually tweaked, one at a time, until I was happy with how it moved! It was trial-and-error as much as anything else.

It probably would have been easier if I'd used something like MatterJS to do the work for me, leaving me to just define the shapes and their weights and things. But I wanted to go as close-to-vanilla JS as possible for this one.