This project demonstrates real-time accelerometer data streaming from mobile devices using WebSocket technology. The system combines a Node.js web server with a Processing.org visualization interface. When a mobile device connects to the server through its browser, the visualization displays a distinctive red cube among randomly positioned background cubes. The cube features a dynamic transparent aura that responds to the intensity of the device’s movement - the more vigorously you shake your phone, the more pronounced the visual effect becomes.
The implementation relies purely on HTML and JavaScript, making it both lightweight and accessible. This creates an intuitive bridge between physical movement and digital visualization, effectively demonstrating the potential of mobile sensors in interactive web applications.
Visualization based on mobile phone data from Kai Kunze.
The complete source code is available on my GitHub repository: devicemotion-demo This project builds upon several excellent resources:
- A Node.js WebSocket tutorial demonstrating chat server implementation by Martin Sikora: a simple chat server node.js tutorial
- Paul Hayes’ guide on creating animated 3D cubes using CSS3 transforms: 3d css cube
- The “3D Cube World” Processing sketch that inspired the visualization: 3d cube world
These resources provided the foundational techniques that were combined and adapted to create this interactive demonstration.