RCWeb V-Drums Control App

The RCWeb V-Drums Control App (app/v-drums-control) functions as a dedicated smart-drumstick within the V-Drums ecosystem under the Asymmetric Pattern.

Screenshot

What it does

• Sensor Translation: Transmutes raw gyroscope and accelerometer inputs from a user's mobile device into a fluid virtual drumstick in a remote 3D space.
• Baseline Calibration: Requires the user to hit a "recenter" button which captures a baseline offset matrix, allowing them to comfortably sit anywhere and reset what "forward" means toward the kit.
• Impact Haptics: Actively listens to the viewer host. When the viewer computes a successful strike on a drum head, the controller instantly triggers the native navigator.vibrate motor, providing physical tactile feedback in the user's hand precisely at the moment of impact.

How it works

The architecture securely accesses protected browser APIs.

• Security Gateways: Rigorously requests DeviceOrientationEvent.requestPermission() handling iOS/Safari specific security models, falling back gracefully to manual GUI controls if motion data is denied or unavailable.
• Bandwidth Regulation: Rapidly polling motion sensors can generate over 100 updates a second. The code buffers states manually utilizing a strict SEND_INTERVAL_MS = 40 timing block to prevent saturating the RCWeb WebSocket infrastructure.
• Dynamic Quaternion Math: Internally constructs complex rotation translations by reading alpha/beta/gamma degrees, converting them into Three.js compatible quaternionFromEuler definitions. It mathematically rotates these coordinates against the established baselineInverse matrix to constantly output perfect relative vectors back to the main drum kit host.

Launch RCWeb App