Shaders

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. ...

This demo visualization shows a photomosaic (& videomosaic) implemented in hardware: (press r to randomly pick another painting) ...