p5.tree/helm

Flying the camera or an object from a live 6-DOF device

Six-degree-of-freedom control for a WEBGL sketch: feed translation and rotation rates each frame from a SpaceMouse, a gamepad, a touch gesture or any other live source, and something moves. createCameraHelm flies a camera body-relative, a forward push flying forward. createPoseHelm produces a pose and drives whatever you bind to it: a plain pose object, a second Camera or your own setter, with from choosing whether pushes are screen-, world- or body-relative.

helmRig draws a control rig of the six channels, in the scene or as a corner HUD, lighting up the one being driven; add identify to see which input channel moves which axis when wiring up a new device.

p5

createCameraHelm([cam], [opts])

Fly the camera from a 6-DOF device: feed it translation and rotation rates each frame and the camera moves body-relative, a forward push flying forward. Pass a camera to fly a second one, or opts for deadzone and a profile that maps input channels to axes (see the probe example). Needs a WEBGL canvas and a rate source such as a SpaceMouse, a gamepad or a touch gesture.

ParameterTypeDefaultDescription
cam optional p5.Camera | Object Camera to drive, or the opts object. Defaults to the current camera.
opts optional { profile?: Object, deadzone?: number }

Returns PoseHelm

Fly the default camera from a probe: hold the mouse, y pushes forward and x yaws; the rig reads the lanes

createPoseHelm([opts])

Drive an object from a 6-DOF device: feed it translation and rotation rates each frame and the bound target's position and rotation follow. Bind a plain pose, a Camera or any object with an applyPose method, and choose with from whether pushes are screen-, world- or body-relative (see the SELF example). Needs a WEBGL canvas and a rate source such as a SpaceMouse, a gamepad or a touch gesture.

ParameterTypeDefaultDescription
opts optional { profile?: Object, deadzone?: number, from?: string | Float32Array | p5.Matrix, bind?: p5.Camera | Object }

Returns PoseHelm

from: EYE, the default: hold any key and steer with the mouse; the push is screen-relative whatever the orbit
from: SELF, body-relative: a swept forward push and yaw drive the box like a car

createHid([opts])

A SpaceMouse over WebHID: a stream of raw 6-DOF rates that feeds a helm every frame once bound. Call connect() from a click or a key press to choose the device; a device this page was already granted reattaches on its own. Chromium-family browsers only, in a top-level page over https or localhost — available says whether this page can ask at all, connected whether a device is reporting. Needs a WEBGL canvas.

ParameterTypeDefaultDescription
opts optional { bind?: PoseHelm, filters?: Object[], decode?: Function, resume?: boolean }

Returns Object The stream: { available, connected, lin, ang, connect(), bind(helm), unbind(), dispose() }.

Fly the camera from a SpaceMouse: click the canvas to connect; the rig shows the live lanes

createGamepad([opts])

A gamepad as a 6-DOF rate source: polled every frame, feeding a helm once bound. The standard layout maps the left stick to slide and lift, the right stick to yaw and pitch, the triggers to push; pass map for another. A pad appears once the page has seen a button press on it. Needs a WEBGL canvas.

ParameterTypeDefaultDescription
opts optional { bind?: PoseHelm, index?: number, map?: Object }

Returns Object The stream: { available, connected, index, lin, ang, bind(helm), unbind(), dispose() }.

Fly the camera from a gamepad: press any button on it first; the rig meters read the ±1 sticks

helmRig(helm, [opts])

Draw a control rig showing a helm's six degrees of freedom: translation arrows and rotation rings, with the channel being driven lit up in the direction of the push. Give x and y for a corner HUD, or draw it in the scene at the driven object; add identify to label each input channel with DOM text over the canvas, no font needed. Needs a WEBGL canvas.

ParameterTypeDefaultDescription
helm PoseHelm
opts optional { size?: number, bits?: number, identify?: boolean, x?: number, y?: number, tilt?: number | number[] }
opts.size optional number 100 Rig extent — world units in-scene, pixels (default 120) in the HUD overload.
opts.bits optional number TRANSLATE | ROTATE
opts.identify optional boolean false

Returns p5 this

In-scene at the driven object: dim baselines are the profile, bright overlays the live push
identify: each arrow and ring names its input lane in DOM text; lanes 1 and 2 are the ones fed
The HUD overload: a corner readout through its own camera; tilt: 0 aims it head-on

PoseHelm

bind(target)

Choose what the helm drives: a plain pose object, a Camera, an object with an applyPose method or a get/set accessor. The target's current value seeds the helm so there is no jump on the first frame (see the second camera example). Chainable.

ParameterTypeDefaultDescription
target p5.Camera | { get: Function, set: Function } | { applyPose: Function } | { pos: number[], rot: number[] }

Returns PoseHelm this

A second camera as the target: flown in world axes from a probe, shown as its frustum