p5.tree/picking

Finding what is under the pointer.

Two ways to ask which object sits under the pointer. colorPick() and mousePick() draw the scene once more off-screen with every object filled by its tag() colour, then return the id found under that pixel — exact for any shape. pointerHit() and mouseHit() are cheaper: they test whether the pointer is within a zone around the current object's origin, with no extra drawing.

Reach for the colour pick when shapes must be hit precisely, and for the hit tests when a hover zone per object is enough.

p5

tag(id)

Encode an integer id as a CSS hex color string for use with fill(). id 0 is reserved — decodes as background / miss.

ParameterTypeDefaultDescription
id number Integer in [1, 16_777_215].

Returns string CSS hex string, e.g. '#010000' for id 1.

What the pick buffer sees: ids as near-black fills

colorPick(px, py, drawFn)

Pick the object under the pointer: drawFn renders the scene off-screen with each object filled by its tag colour, and the id found at that pixel is returned — 0 when nothing is there (see the example). Needs a WEBGL canvas; lights, strokes and shaders are switched off for the pick pass.

ParameterTypeDefaultDescription
px number X coordinate in canvas CSS pixels.
py number Y coordinate in canvas CSS pixels.
drawFn function Scene draw callback — tag objects with fill(tag(id)).

Returns number Decoded id (0 = background / miss).

Pick at the canvas centre; orbit to bring an object under the cross

mousePick(drawFn)

Shorthand for colorPick(mouseX, mouseY, drawFn).

ParameterTypeDefaultDescription
drawFn function Scene draw callback — tag objects with fill(tag(id)).

Returns number Decoded id (0 = background / miss).

Hover to highlight

pointerHit([pointerX], [pointerY], [opts])

Test whether the pointer is over the current model's origin, within a hit zone size wide in world units at that depth — a cheap proximity test that needs no extra drawing (see the hover example). With explicit x, y in the options the test is made in screen space and the size is in logical pixels (see the sweeping-point example). Needs a WEBGL canvas; call it inside push()/pop() for each pickable object.

ParameterTypeDefaultDescription
pointerX optional number Defaults to mouseX.
pointerY optional number Defaults to mouseY.
opts optional { mat4Model?: Float32Array | ArrayLike | p5.Matrix, x?, y?, size?: number, shape?: number, mat4Eye?: Float32Array | ArrayLike | p5.Matrix, mat4Proj?: Float32Array | ArrayLike | p5.Matrix, mat4View?: Float32Array | ArrayLike | p5.Matrix, mat4PV?: Float32Array | ArrayLike | p5.Matrix, }

Returns boolean

Proximity test at an explicit, sweeping screen point

mouseHit([opts])

Shorthand for pointerHit(mouseX, mouseY, opts).

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

Returns boolean

Hover test per object; the hit zone drawn as a bulls-eye