Device Motion Events

Technical Deep Dive & Specifications

The DeviceMotionEvent Interface

interface DeviceMotionEvent extends Event {
  readonly attribute DeviceMotionEventAcceleration? acceleration;
  readonly attribute DeviceMotionEventAcceleration? accelerationIncludingGravity;
  readonly attribute DeviceMotionEventRotationRate? rotationRate;
  readonly attribute double interval; // Sampling interval in milliseconds (e.g. 16.0 ms)
}

interface DeviceMotionEventAcceleration {
  readonly attribute double? x; // Left-to-Right axis (m/s²)
  readonly attribute double? y; // Bottom-to-Top axis (m/s²)
  readonly attribute double? z; // Back-to-Front axis (m/s²)
}

interface DeviceMotionEventRotationRate {
  readonly attribute double? alpha; // Z-axis rotation rate (deg/s)
  readonly attribute double? beta;  // X-axis rotation rate (deg/s)
  readonly attribute double? gamma; // Y-axis rotation rate (deg/s)
}

acceleration vs. accelerationIncludingGravity

The distinction between these two properties is fundamental to physical computing:

+---------------------------------------------------------------------------------------------------+
|                               ACCELERATION AXIS DEFINITION (m/s²)                                 |
+---------------------------------------------------------------------------------------------------+
|                                                                                                   |
|                                       +Y (Toward Top Edge)                                        |
|                                                ▲                                                  |
|                                                │                                                  |
|                                          ┌─────┴─────┐                                            |
|                                          │  [Camera] │                                            |
|           -X (Toward Left Edge) ◄────────┤           ├────────► +X (Toward Right Edge)            |
|                                          │  Screen   │                                            |
|                                          │           │                                            |
|                                          └─────┬─────┘                                            |
|                                                │                                                  |
|                                                ▼                                                  |
|                                       -Y (Toward Bottom Edge)                                     |
|                                                                                                   |
|           +Z: Straight OUT of the screen toward user's face                                       |
|           -Z: Straight THROUGH the back cover toward the floor                                    |
|                                                                                                   |
+---------------------------------------------------------------------------------------------------+

Digital Filtering & Shake Detection Algorithm

To detect an intentional Shake gesture (e.g., shake-to-undo or dice rolling):

1. Compute the 3D Euclidean vector magnitude of the acceleration: $$|A| = \sqrt{a_x^2 + a_y^2 + a_z^2}$$
2. Calculate the delta change $\Delta A = ||A_{\text{current}}| - |A_{\text{previous}}||$.
3. Check if $\Delta A$ exceeds a calibrated threshold (typically $15 \text{ to } 25 \text{ m/s}^2$).
4. Implement a cooldown debounce timer (e.g. 800ms) to avoid triggering dozens of events during a single shake gesture.

       Acceleration Vector Stream
                 │
                 ▼
     [ Compute ||A|| = √(x²+y²+z²) ]
                 │
                 ▼
       [ Is ||A|| > Threshold? ]
                 │
        ┌────────┴────────┐
        ▼ YES             ▼ NO
  [ Cooldown Active? ]  [ Ignore & Stream ]
        │
   ┌────┴────┐
   ▼ NO      ▼ YES
[ FIRE SHAKE ] [ Suppress (Debounce) ]

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 135–144: Defines the debounce threshold ($18.0 \text{ m/s}^2$) and cooldown ($800\text{ms}$) to prevent multiple triggers per single gesture.
• Lines 159–165: Handles the triggerShake() UI animation state and auto-resets after $500\text{ms}$.
• Lines 169–175: Reads pure dynamic acceleration ($a_x, a_y, a_z$) without gravitational bias.
• Line 177: Calculates the vector magnitude using Pythagoras in 3D: $\sqrt{a_x^2 + a_y^2 + a_z^2}$.
• Lines 182–186: Executes the debounced shake detection logic comparing dynamicMag > SHAKE_THRESHOLD and timestamp cooldown.
• Lines 188–198: Reads total force including Earth's gravity vector ($\approx 9.81 \text{ m/s}^2$).
• Lines 200–205: Reads angular rotational velocities ($\text{deg/s}$) from the gyroscope.
• Lines 207–210: Calculates the real hardware sensor sampling rate in Hertz from event.interval.

Expected Browser Render Output

⚡ Kinetic Device Motion & Shake Lab
Streams 3-axis accelerometer and gyro rotation velocity at hardware refresh rates.

+-------------------------------------------------------------+
|                      SHAKE DETECTIONS                       |
|                             0                               |
|               Shake device vigorously to test               |
+-------------------------------------------------------------+

LINEAR ACCEL (m/s²)              ACCEL + GRAVITY (m/s²)
X (Left/Right): 0.00             X: 0.00
Y (Up/Down):    0.00             Y: 0.00
Z (In/Out):     0.00             Z: 9.81

ANGULAR ROTATION RATE (deg/s)
α (Yaw): 0.0     β (Pitch): 0.0     γ (Roll): 0.0

Sensor Sampling Interval: 16.0 ms (60 Hz)   Force Magnitude: 0.00 m/s²