NakedNous

Zero-GPU hit testing with mouseHit. Ten waypoint nodes around a soft loop — each one tested every frame against the cursor by projecting its origin to screen space and comparing against a configurable radius. The hit zone is drawn explicitly with bullsEye, which takes the same size and shape parameters as mouseHit — the gizmo is the hit zone, no guessing where the click registers. Use the panel to tune the radius and switch between circular and square hit shapes. ...

Pixel-perfect mouse picking with mousePick. Fifty mixed primitives — boxes, spheres, torii, cones, cylinders — drawn at random positions and tagged with a unique integer id encoded as a CSS hex colour by tag. Each frame the scene renders twice: once into a 1×1 framebuffer with each shape filled by its id, then gl.readPixels returns whichever id sits under the cursor; the visible pass renders normally and lights up the hit. Cost is one extra geometry submission per frame regardless of object count, and the answer is exactly the rendered pixel — through the hole of a torus, behind a partially-occluding box, anywhere a real fragment landed. ...

Lookat-camera keyframe animation with createCameraTrack. A bound animCam plays a four-keyframe track; a separate viewCam orbits around the abstraction — eye polyline, gaze rays, per-keyframe mini-camera markers. A live frustum follows playback, and an FBO inset shows what animCam actually sees. Toggle TEX and that inset slides onto the live frustum’s near plane — the frustum becomes a window. Two createPanel instances drive the whole thing: one binds checkboxes to UI state, one binds transport controls to the track. ...

TRS keyframe animation with createPoseTrack. Four { pos, rot } keyframes, cubic Hermite interpolation of position with auto-Catmull-Rom tangents, and slerp on rotations. A transport panel scrubs the track; a second panel toggles the trackPath overlay bits — PATH, CONTROLS, TANGENTS_IN, TANGENTS_OUT — and switches interpolation modes live. Unlike createCameraTrack, which applies its result to a camera automatically, PoseTrack produces an interpolated pose you fold into the transform stack yourself with applyPose(track.eval(out)). Four keyframes, one object createPoseTrack returns a PoseTrack — a renderer-agnostic state machine for { pos, rot, scl } keyframes. track.add(spec) appends one; adjacent duplicates are skipped by default: ...

A depth-of-field blur effect where the focal plane is driven by a live world-space position. The scene is rendered into a p5.Framebuffer, then a p5.strands DOF pass is applied via pipe(). The magenta sphere is the focal target — its screen-space z is recomputed every frame with mapLocation() and fed directly into the shader, so the blur follows the sphere continuously. A first-person directional light tracks the viewer using mapDirection(). The shader as a strands callback The DOF pass is authored as a p5.strands callback on baseFilterShader().modify(). There is no raw GLSL string — the algorithm is expressed in JavaScript using the strands DSL, which compiles it to WebGL2 under the hood. ...

Multi-pass post-processing with p5.strands and pipe(). Three filter passes — depth-of-field blur, value-noise warp, and pixelation — are chained over a scene framebuffer. Each pass is a baseFilterShader().modify() callback; createPanel wires their uniforms automatically. Press 1, 2, or 3 to rotate the pass ordering at runtime. Shader passes as strands callbacks Each post-processing pass is a baseFilterShader().modify() callback — a plain JavaScript function using the p5.strands DSL. The framework compiles each callback to WebGL2 at startup; no raw GLSL strings are needed. ...

Toon shading, or cel shading, gives 3D geometry a flat, cartoon-like look by quantizing diffuse reflection into a finite number of discrete shades. In this p5.js v2 version the shader is written as a baseMaterialShader().modify() hook using the p5.strands DSL — no raw GLSL strings, no hand-written vertex shader. createPanel wires the color and shades controls to the shader automatically each frame. Toon shader The combineColors hook in baseMaterialShader().modify() receives the eye-space vNormal varying directly — no vertex shader boilerplate required. Diffuse intensity is the dot product of the surface normal and the (normalized) light direction; it is then snapped into discrete bands to produce the cel-shading look. ...

A 3D brush painting sketch that uses depth control for VR-style experiences. mapLocation() converts screen-space mouse coordinates and a depth slider value directly into world-space positions, so each brush stroke is placed precisely in 3D. Press r to toggle recording, c to clear, f to re-focus the camera on the world origin. Screen-to-world mapping with mapLocation The core of the brush is a single mapLocation call that lifts the 2D mouse position — together with a depth value from the slider — into 3D world space each frame: ...

Perspective projection is a fundamental concept in 3D graphics. The transformation maps a view frustum — a truncated pyramid — into a cube of Normalized Device Coordinates (NDC), producing the foreshortening effect that makes 3D scenes look convincing. The sketch below morphs a set of cajas (boxes) continuously from world space into NDC space, rendered from a third-person camera that also displays the frustum being transformed. Shaders The morph lives in a single GLSL hook injected into p5’s base shaders through buildColorShader and buildStrokeShader — no shader files needed. ...

p5.tree is a render pipeline layer for p5.js v2 — pose and camera interpolation, coordinate-space conversions between WORLD / EYE / SCREEN / NDC, frustum visibility, HUD, multi-pass post-processing, picking, and declarative control panels. The demo below exercises all of it at once. Under the hood it’s three independent packages: a renderer-agnostic numeric core (@nakednous/tree — math, spaces, keyframes, visibility), a lightweight DOM layer (@nakednous/ui — sliders, transport), and a p5.js v2 bridge that wires them to the canvas. The dependency direction is strict and one-way — the core knows nothing about p5 or the DOM — which is what lets the same keyframe interpolation that drives a camera path also animate any object, and lets the whole stack run headless or in a future renderer without touching the math. ...