This semester, I'm studying a new course, "Prototyping Physical Interactions", that's aimed at strengthening students' problem solving skills using the new class of IoT devices that exist around us.

The first assignment is pretty simple - demonstrate the use of a physical sensor to provide input for a system, and produce some sort of output. My assignment submission is name-shaker, a little web application that can be run on any mobile device that has an accelerometer and supports the ondevicemotion Web API (so far that's iOS and Android).

It's a simple app that takes accelerometer input and, depending on how hard you shake the device, will spit out a random name. I find this thing easier to explain with pictures, so have some screenshots of the current version:

You can also see a live copy of it hosted on Heroku.

Now, onto how I did it!

How It Works

This is the first production-ready demonstration app I’ve made using React from scratch, and I must say I enjoyed using it and thinking of the application state as a finite state machine. Controlling the user interface cues especially was something I had to test repeatedly, and Webpack’s auto-refresh helped greatly with that.</p>

I pretty much cloned srn/react-webpack-boilerplate so I wouldn't have to do much React configuration upfront, and since my needs were fairly modest I didn't touch the Webpack confs at all.

I also use a modified version of alexgibson/shake.js that abstracts away the trivialities of . I say modified because I hacked away at and rewrote so it could work with callbacks - the browser event driven interface isn't particularly good for React in my opinion.

My current method of measuring the amount of movement in the device is pretty rudimentary - I just keep an ongoing sum of movement along the x, y, and z (alpha, beta and gamma under the Web API spec) planes, and shake.js filters out movements that don't fit within the threshold of a serious shake. This calculation works pretty well when testing it out with people, so I haven't changed it so far.

As to the generation of names, I've bucketed them into four tags: "very common", "common", "unusual" and "rare". Since name distribution is actually kind of hard, they're mostly arbitrary buckets. I used the US Social Security dataset for births in 2011, which includes the names of babies born in the year of 2011, for which there were 5 babies of the same name. Alongside name, they also store gender and count of names, so we can sort them and bucket them evenly into the four categories. I could probably use a less arbitrary bucketing method, but it didn't seem worth the effort and the results so far are not too bad (except for Jane being included in the "Unusual" bucket...2011 was a weird year).

The whole thing is ready to chuck on a Heroku box (or any box that can run a LAMP-equivalent stack actually, the code can be deployed with npm dist).

Next steps are to make it more obvious when you shake into a new category, since it's kinda hard to see the screen when you're shaking it to buggery - I'm thinking haptic feedback.