Phase / Matter

The same form can be read as a structure or experienced as a material.

Nine continuous fields. Each has two interpretations: a monochrome structural reading and a colored, dimensional surface. They share their geometry, seed, camera and clock. The difference is a way of looking.

KAMAU BAAQI / SOFTWARE-ART STUDY / 2026 / P5.JS + GLSL

One interlocking surface shown simultaneously as a graphic structure and a warm material

One field, two materials. Select either image for a synchronized live diptych.

A visual language with rules

ReductionThe retained graphic studies sit beside new monochrome objects. Reflections, occlusion and cast shadows reveal their depth.
MaterialPolished metal, colored enamel and approximate translucency make the same structure feel soft, dense, porous or precious.
DurationUnequal oscillator rates change the fields continuously. A slow camera breath gives the images time to be read.

Nine conditions

The system, in plain terms

A function measures how far a point in space is from a surface. The renderer walks a ray through that field until it finds the surface. Neighboring samples estimate its orientation.

The structural readings combine retained graphic marks with new polished monochrome surfaces. The dimensional materials use them for reflections, light, occlusion, cast shadows and approximate translucency. Both are views of one procedural object, not separate video loops.

// A sphere, described as a distance field.
float sphere(vec3 p, vec3 center, float radius) {
  return length(p - center) - radius;
}

// Repeated evaluation turns a rule into a surface.
// Change the field in source/field.glsl.
// Change its readings in source/render.glsl.

Inspect the shared geometry · Inspect the materials · Download the runnable project

The material is an optical approximation, not a physical lava or fluid simulation. Fixed seed/time links without audio reproduce a held frame; moving feedback also depends on prior frames.

Proposed presentation

Enter the scaled 3D room proposal · Read the room and equipment specification · Open the six-minute program · View the previous studies

Graphic reading in a proposed paired displayWarm reading beside the graphic view in a proposed paired display

Display proposal, not documentation of an installed exhibition.

CONTEXTFORMWHAT IT REVEALS
Gallery / black boxOne synchronized diptych on a wide projection, or aligned adjacent screens.Two perceptions of one moving body.
Audiovisual performanceA clean full-screen output with invisible keyboard control and optional local audio.Time, scale and material change as performance decisions.
Creative-coding talkOne field, its source, a fixed frame, then the paired live view.How a small set of rules creates a family of images.
Print seriesSeeded graphic/material pairs exported at selected moments.Serial difference inside a consistent formal language.

Playback and reproducibility

The output has no visible interface. Click the artwork or press F for fullscreen. The two index swatches select the graphic and warm collections.

1–9 / ← → — choose a condition
X — switch material
D — synchronized diptych
Space — hold / resume
R — new seed and phase
C — cycle warm palettes
S — save PNG
Q — render quality
A / drop audio — local file
M — audio play / pause
G — index · I — these notes

Open a reproducible paired frame

A six-minute automatic program presents four works for 90 seconds each, with three-second fades. Manual selection exits the automatic program. 1920-pixel render width by default; Q cycles native (up to 4096), then 1280, then 1920. Actual frame rate depends on the GPU. Reduced-motion preferences start held. Audio is local and optional, with a subtle bass-to-brightness mapping; no microphone is used. Projector playback and full browser audio operation require on-site testing.

Reference inquiry

The Designers Republic’s work with Autechre provides a precedent for serial geometric reduction, negative space, and imperfect technical order. The aim here is to build a consistent relationship between rule and image. No sleeve artwork is used as an asset.

Ian Anderson on Oversteps · Grid Pattern’s Autechre sleeve case study

Processing Foundation showcase · p5.js contribution and community guidance

Graphic Thought Facility: Homer packaging and identity — a material reference for enamel, metal and industrial color contrast.