After seeing the incredible "Sock Puppet" WebGL demo by myp" and having tons of fun acting it out via keyboard and mouse, I immediately dreamt of implementing some kind of Jim Henson style "Waldo" out of spare parts and streaming the data to the web page somewhat as I'd done for @MakerSylvia's DML 2012 demo.

But immediately I said to myself... why would I do that if I can access the gyro data immediately available in a web ready device in my pocket! And so my lunch break was spent hacking this little test.

The intent is that you have (at least) two devices on the same WiFi network:

• A: computer/tablet/mobile device to run the server and display the puppet on. Technically you can run the server on one computer, but display the puppet on a third computer/device.
• B: mobile device capable of accessing its gyroscope data via web browser

0. Make sure you have node.js & NPM installed on computer A. They usually install together and you should be in good shape.
1. Clone/download this code to a handy folder, then in a command/terminal window, navigate to said folder, and run npm install, this will download/install express and socket.io
2. From this same window, run node sockpuppet, and our server should be running.
3. From this same computer (or some third computer), pull up the IP address/hostname of the server computer, at the port 3883 (this can be changed in sockpuppet.js) in a modern WebGL capable web browser. If on the same computer, this would be http://localhost:3883
4. You should see our happy green puppet guy. Now for the controller:
5. On your mobile device on the same WiFi network, enter the IP address/hostname of the server into the browser, eg: http://192.168.10.42/control
6. This should give you a simple white page that will immediately start streaming gyro data and controlling our sock puppet :)

Node.js acts as a simple webserver, also allowing us to stream data quickly to all clients via websockets. There's very little to this thanks to socket.io. The web page on the mobile device uses the gyro.js library to poll for rotational data and this is cleaned and pushed directly to the server, where it simply bounces it back to all connected clients.

In the Puppet WebGL experiment, I've added the socket.io client library, and simply trigger manipulation of the bones as the keyboard and mouse controls would be doing, but when gyro or tap data is received. Super easy!

Feel free and have fun and hack. This could easily be improved in many ways with more hand controls for facial expressions, and likely some kind of tween/smoothing for the often quite noisy gyroscope data.

Code by TechNinja; MIT Licensed. Original code for WebGL demo by myp".