p5.tree/panel

On-page controls for parameters and playback.

Put a small control panel next to the canvas with one call. createPanel() builds sliders, checkboxes and colour pickers from a plain object of parameters and can push their values into a shader every frame; handed a PoseTrack or CameraTrack it builds playback controls — play, seek, rate, loop and a button to add a keyframe; handed a PoseHelm it exposes the helm's per-axis settings and live meters.

Reach for it when a sketch needs tweakable numbers or a timeline without writing any page markup.

p5

createPanel(trackOrSchema, [opt])

Create a panel beside the canvas from what you hand it: playback controls for a PoseTrack or CameraTrack, sliders and inputs for a plain schema of parameters, or the 6-DOF profile and live meters of a PoseHelm (see the three examples). Position and colour it through the options; target pushes parameter values into a shader or a setter every frame, camera and reset tune a track panel's buttons, and frame adds the helm frame selector. Dragging a slider never orbits the camera. Needs a canvas to mount beside (or a parent element) and the object to control.

ParameterTypeDefaultDescription
trackOrSchema PoseTrack|CameraTrack|PoseHelm|Object A track (PoseTrack / CameraTrack), a helm (PoseHelm), or a plain schema object.
opt optional Object Layout and behaviour options.
opt.camera optional p5.Camera|null Track panels only. The Camera a CameraTrack's + button captures a keyframe from; null suppresses the + button. Defaults to the track's camera for a CameraTrack. A PoseTrack's + places against the camera the frame draws with — the renderer's, whose projection the placement needs — so any value but null merely offers the button.
opt.add optional boolean true Track panels only. Set false to suppress the + button.
opt.remove optional boolean true Track panels only. Set false to suppress the − button (remove the last keyframe). A panel given camera: null — a track the sketch authors itself — has neither + nor −.
opt.reset optional boolean true Track panels only. Set false to suppress the reset button.
opt.frame optional boolean false Helm panels only. Show the EYE|WORLD|SELF frame selector.
opt.target optional Object|Function Param panels only. Where values go each frame: a Shader, a (name, value) => ... function, or an object with a set method.
opt.parent optional (HTMLElement|p5.Element) Element to place the panel in. Defaults to the canvas parent element.

Returns Object The Panel, with .el, .tick() and .dispose().

A parameter panel: sliders, a checkbox and a colour driving scene state through target
A transport panel for a PoseTrack: play, seek, rate and loop, plus + to add a keyframe
A helm panel: the 6-DOF profile edited live, its meters reading a scripted probe