blog

Streamlining Minesweeper Revisited

Mon, 18 May 2026 11:20:13 -0500

In object-oriented programming (OOP), maximizing API use streamlines development, leading to simpler and more concise code. This clarity not only improves readability but also eases debugging. Leveraging an API effectively in OOP thus ensures a blend of simplicity, efficiency and maintainability in software development.

This demo (partially) implements the minesweeper video game using p5-v2 and the Quadrille API with a four-layer strategy. Each layer is one quadrille with a single responsibility:

mines — the bombs.
counts — the numbers next to bombs.
cover — a two-tone internal layer (red over filled cells, green over empty cells) that distinguishes the two click zones and drives flood fill.
mask — the uniformly magenta layer the player actually sees, derived from cover.

As gameplay progresses, clicking on cells uncovers them by clearing either individual or connected cells from cover; mask is re-derived from cover after each click.

Streamlining Minesweeper

Wed, 13 May 2026 16:43:48 -0500

ℹ️ See also

A four-layer refinement of this design — splitting board into single-purpose mines and counts quadrilles, then using Quadrille.or to merge them into the two-tone cover in two lines — appears in Streamlining Minesweeper, revisited. Same game, each variable with one fixed meaning throughout.

Visibility testing

Sat, 25 Apr 2026 15:00:00 -0500

Per-object frustum culling with visibility. Sixty mixed primitives drift around in a wide volume; each frame their bounds — AABBs for boxes, spheres for spheres — are tested against a fixed test camera’s frustum, with the six frustum planes pre-computed once per frame via bounds({ mat4Eye }). Three return states drive the render: solid lit material for VISIBLE, amber wireframe for SEMIVISIBLE (the bounds straddle a plane), faint grey for INVISIBLE. Toggle the test camera’s projection between perspective and orthographic with the gold checkbox; drag to orbit the observer and watch the cyan wireframe stay put while objects drift through it.

CPU proximity picking

Sat, 25 Apr 2026 14:30:00 -0500

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.

GPU color-ID picking

Sat, 25 Apr 2026 14:00:00 -0500

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.

Camera interpolation

Sun, 19 Apr 2026 12:00:00 -0500

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.

Pose interpolation

Sun, 19 Apr 2026 10:00:00 -0500

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:

Depth-of-field blur with focal target

Thu, 09 Apr 2026 15:52:34 -0500

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.

Post-effects pipeline

Thu, 09 Apr 2026 15:52:34 -0500

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

Thu, 09 Apr 2026 15:52:34 -0500

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.

3D Brush Painting in VR

Thu, 09 Apr 2026 12:00:00 -0500

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:

Visualizing Perspective Transformation to NDC

Tue, 24 Mar 2026 10:28:01 -0500

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

Tue, 17 Feb 2026 16:07:46 -0500

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.

nub: Advancing Visual Computing on the Web

Tue, 01 Apr 2025 14:05:28 -0500

Tree-like affine transformation hierarchies are at the core of many tasks in rendering, interaction, and computer vision—from view frustum & occlusion culling and collision detection to motion retargeting and post-WIMP interfaces. Our recent publication, nub: A Rendering and Interaction Library for Visual Computing in Processing, introduces a functional and declarative API, built around a dataflow-based architecture that integrates rendering and event-driven interaction through a simple yet powerful scene graph model.

Built on top of Processing’s 2D/3D environment, nub offers a lightweight and expressive foundation for education, research, and experimentation in visual computing. It supports hierarchical rendering, multi-view scenes, view-based interaction, and extensible workflows for interactive content.

Platonic Cells

Wed, 05 Jun 2024 20:08:45 -0500

This demo illustrates new capabilities of the WebGL mode in the next major upcoming version of p5.quadrille.js, currently under development. It showcases how Platonic solids can be stored in quadrille cells and rendered using either immediate or retained mode with the p5.platonic library.

Platonic Cells

Platonic cells are cell functions (cellFn) that implement the filling of Platonic solid cells in a quadrille game.

Retained Mode

(mouse click to clear/add Platonic solids, drag to navigate; press s (or c) to save)
" >

Platonic Solids

Fri, 17 May 2024 15:32:05 -0500

Platonic solids, named after the philosopher Plato, are highly symmetrical, three-dimensional shapes. Each face of a Platonic solid is the same regular polygon, and the same number of polygons meet at each vertex. This sketch demonstrates the rendering of Platonic solids using the p5.platonic library, showcasing both the immediate mode and retained mode rendering of the shapes. Check out the platonic cells example, which fills quadrille cells with the Platonic solids introduced here.

Image convolution visualizer

Thu, 23 Nov 2023 15:45:17 -0500

In the field of image processing, the application of convolution matrices to images stands as a cornerstone technique. This post focuses on illustrating this process through an interactive visualization, utilizing the Quadrille filter method alongside custom display functions. The visualization aims to clarify how various masks affect individual pixels in a source image, making the intricate process of image convolution more comprehensible. By offering an interactive experience, it sheds light on the significant impact these matrices have on digital images, providing a deeper insight into a key image manipulation method.

Chess Pattern Recognition

Tue, 10 Oct 2023 16:57:33 -0500

Harnessing the art of chess pattern recognition—emphasized by experts, among them Grandmaster Jonathan Rowson in “The Seven Deadly Chess Sins”—the demonstration below utilizes the powerful quadrille search method to identify key tactical patterns on the provided board, given in FEN notation. These patterns, which encompass maneuvers like knight forks where a piece simultaneously threatens multiple opponent pieces, can decisively influence the game’s dynamics. The p5.quadrille.js library aids players in detecting and adeptly deploying these patterns, thereby refining gameplay and strategic decision-making on the chessboard.

Game of Life Texturing

Sun, 08 Oct 2023 15:46:53 -0500

Before diving into development, thoroughly reading the Quadrille API documentation is key to efficient coding, preventing mistakes, and ensuring optimal performance. By acquainting yourself with the API’s nuances, you set the stage for informed decision-making, seamless collaboration, and a smoother development journey.

The following demo illustrates the game of life using a pentadecathlon pattern as its initial seed, rendered as a surface texture on p5 3D shapes in WEBGL mode:

(mouse drag to navigate; [1..7] keys change shape, other keys reset)
" >

Phyllotaxis

Thu, 14 Sep 2023 10:33:04 -0500

La disposición de las hojas en el tallo de una planta, conocida como phyllotaxis, se puede modelar a partir del ángulo de oro, número mágico íntimamente relacionado con la secuencia de Fibonacci que rige diversas formas de la naturaleza: desde una flor de girasol, el brócoli o el romanesco, e incluso los brazos de las galaxias.

La siguiente visualización ilustra la disposición de los pétalos del girasol obediciendo al modelo propuesto por H. Vogel hacia 1979¹.

GPU-based Photomosaic

Sat, 02 Sep 2023 15:07:24 -0500

This demo visualization shows a photomosaic (& videomosaic) implemented in hardware:

(press r to randomly pick another painting)
" >

blog

Streamlining Minesweeper Revisited

Streamlining Minesweeper

Visibility testing

CPU proximity picking

GPU color-ID picking

Camera interpolation

Pose interpolation

Four keyframes, one object

Depth-of-field blur with focal target

The shader as a strands callback

Post-effects pipeline

Shader passes as strands callbacks

Toon shading

Toon shader

3D Brush Painting in VR

Screen-to-world mapping with mapLocation

Visualizing Perspective Transformation to NDC

Shaders

p5.tree.js

nub: Advancing Visual Computing on the Web

Platonic Cells

Platonic Cells

Retained Mode

Platonic Solids

Image convolution visualizer

Chess Pattern Recognition

Game of Life Texturing

Phyllotaxis

GPU-based Photomosaic

Screen-to-world mapping with `mapLocation`