p5.tree/gizmos

Drawing axes, grids, frustums and paths.

Helpers that draw the scaffolding of a 3D scene at the current drawing position: axes() and grid() for a coordinate frame and a ground plane; cross() and bullsEye() for screen-space markers that keep their size as the camera moves; pane() for a textured quad; viewFrustum() to show what another camera sees; hermite() for a single curve segment; and trackPath() to draw a PoseTrack or CameraTrack with its keyframes.

Reach for them while building or debugging a scene, teaching camera geometry, or showing an animation path.

p5

axes([opts])

Draw a 3D coordinate frame — the X, Y and Z axes with their labels — at the current model origin. Choose the half-axes and labels with bits, the length with size, and per-axis colours or the ambient stroke with semantic (see the split-calls example). Needs a WEBGL canvas.

ParameterTypeDefaultDescription
opts optional { size?: number, semantic?: boolean, bits?: number }
opts.size optional number 100 Axis length.
opts.semantic optional boolean true Semantic per-axis colours.
opts.bits optional number LABELS | X | Y | Z Which half-axes and labels to draw.

Returns p5 this

Default at the origin; a sized X | Y | -Z triad on an object
Split calls: one stroke per axis with semantic: false

grid([opts])

Draw a grid in the XY plane at the current model origin: subdivisions cells per side spanning ±size, at the ambient stroke.

ParameterTypeDefaultDescription
opts optional { size?: number, subdivisions?: number }
opts.size optional number 100 Half-extent.
opts.subdivisions optional number 10 Cells per side.

Returns p5 this

A ground plane: the grid lives in XY, so tilt it flat

cross([opts])

Draw a screen-space crosshair centred on the current model origin, or at explicit screen coordinates x, y. Set its extent with size — world units at the origin's depth, or pixels when screen coordinates are given (see both examples). Needs a WEBGL canvas.

ParameterTypeDefaultDescription
opts optional { x?: number, y?: number, size?: number, mat4Model?: Float32Array | ArrayLike | p5.Matrix, mat4Eye?: Float32Array | ArrayLike | p5.Matrix, mat4Proj?: Float32Array | ArrayLike | p5.Matrix, mat4View?: Float32Array | ArrayLike | p5.Matrix, mat4PV?: Float32Array | ArrayLike | p5.Matrix, }
opts.size optional number 50

Returns p5 this

Centred on the model origin: size in world units at that depth
Explicit screen coordinates: size in pixels

bullsEye([opts])

Draw a screen-space bulls-eye — a circle or a cornered square plus a central cross — centred on the current model origin, or at explicit screen coordinates x, y. Pick the outline with shape (CIRCLE or SQUARE) and its extent with size: world units at the origin's depth, or pixels when screen coordinates are given (see both examples). Needs a WEBGL canvas.

ParameterTypeDefaultDescription
opts optional { x?: number, y?: number, size?: number, shape?: number, mat4Model?: Float32Array | ArrayLike | p5.Matrix, mat4Eye?: Float32Array | ArrayLike | p5.Matrix, mat4Proj?: Float32Array | ArrayLike | p5.Matrix, mat4View?: Float32Array | ArrayLike | p5.Matrix, mat4PV?: Float32Array | ArrayLike | p5.Matrix, }
opts.size optional number 50
opts.shape optional number CIRCLE CIRCLE or SQUARE.

Returns p5 this

Centred on two model origins: CIRCLE and SQUARE
Explicit screen coordinates: size in pixels

pane(p0, p1, p2, p3, [opts])

Draw a quad from four 3D corner points, filled with the ambient fill or textured with texture — an image, a graphics buffer, or a framebuffer's colour attachment (see the three examples). Custom texture coordinates go in uvs. Needs a WEBGL canvas.

ParameterTypeDefaultDescription
p0 number[] Corner position (CCW when viewed from the front).
p1 number[] Corner position.
p2 number[] Corner position.
p3 number[] Corner position.
opts optional { texture?:*, uvs?:number[][] }

Returns p5 this

Untextured: the ambient fill and stroke
A p5.Graphics texture, drawn procedurally
A framebuffer's colour attachment: V-flipped by default, so it reads right-side-up

viewFrustum([opts])

Draw a second camera's frustum in the scene: its near and far planes, the body, and optionally the apex lines, selected with bits. The camera can be a Camera, a CameraTrack that follows playback, or a plain pose spec (see the pose-specs example), and textures can be mapped on the near and far planes (see the textured example). Needs a WEBGL canvas and a second camera or pose.

ParameterTypeDefaultDescription
opts optional { camera?: p5.Camera | CameraTrack | { eye:number[], center?:number[], up?:number[], fov?:number, halfHeight?:number, near?:number, far?:number }, mat4Eye?: Float32Array | ArrayLike | p5.Matrix, mat4Proj?: Float32Array | ArrayLike | p5.Matrix, mat4View?: Float32Array | ArrayLike | p5.Matrix, bits?: number, viewer?: Function, nearTexture?: p5.Image | p5.Graphics | p5.Texture, farTexture?: p5.Image | p5.Graphics | p5.Texture, }
opts.bits optional number NEAR | FAR | BODY

Returns p5 this

A second camera's frustum
Pose specs: a perspective (fov) and an orthographic (halfHeight) one-off
bits: the cone without its near outline; viewer: your own marker at the eye
The near plane textured with what the camera sees
A CameraTrack: the frustum follows playback

hermite(p0, m0, p1, m1, [opts])

Draw one cubic Hermite curve segment between two endpoints with explicit tangents, as a polyline of samples segments at the ambient stroke. Needs a WEBGL canvas.

ParameterTypeDefaultDescription
p0 number[] Segment start — [x,y,z].
m0 number[] Outgoing tangent at p0.
p1 number[] Segment end — [x,y,z].
m1 number[] Incoming tangent at p1.
opts optional { samples?: number }
opts.samples optional number 32 Line segments along the curve.

Returns p5 this

One segment; the outgoing and incoming tangents drawn as spokes

trackPath(track, [opts])

Visualise a PoseTrack or CameraTrack in the scene: the sampled path, its control polygon, tangent arrows, a marker at each keyframe, and for camera tracks the gaze rays from eye to center. Select the layers with bits, the eye or center path with target, and the per-keyframe drawing with marker or your own callback (see the custom-marker and HANDLES examples). Needs a WEBGL canvas and a track.

ParameterTypeDefaultDescription
track PoseTrack|CameraTrack
opts optional { bits?: number, samples?: number, target?: 'eye' | 'center', marker?: Function | null, }
opts.bits optional number PATH
opts.samples optional number 32 Line segments per path segment.
opts.target optional string 'eye'

Returns p5 this

A PoseTrack: the sampled path plus the default per-keyframe axes marker
Layers by bit, one stroke each: path, control polygon, tangents
A CameraTrack: eye path with mini-camera markers, gaze rays, and the center path
A custom marker: a box oriented by each keyframe's pose
HANDLES: drag the keyframes of a track created with the handles opt