# Phase / Matter

Nine continuous fields, each with two readings: a reduced graphic plate and a warm material.
The paired views use the **same geometry, seed, clock, camera and audio signal**. D toggles a
synchronized diptych, and X changes the material without restarting the field.

## Run and edit

No dependency installation is required. p5.js 1.11.11 is bundled locally.

    python3 -m http.server 8000 --directory dist

Open http://localhost:8000. Use warm.html for the material studies and process.html for the case study.

- Edit `src/field.glsl` to change the shapes. `map(p)` estimates distance to a moving surface.
- Edit `src/render.glsl` to change either material interpretation.
- Run `node build.mjs` after a GLSL edit to regenerate `dist/system.frag`.
- `dist/engine.js` manages the p5 canvas, optional audio and feedback framebuffers.
- `dist/screen.vert` draws a clip-space quad; all surface work happens in the fragment shader.

The ray marcher advances by a fraction of the distance estimate. Some displaced fields are
not exact signed-distance functions, so conservative stepping reduces overshoot. Finite
surface differences provide normals. The warm material approximates environmental light,
specular response, occlusion and translucency; it is **not a physical fluid simulation**.
Graphic materials use contours, grid intersections, discrete tones and surface cuts.

## Reproducible frames

    live.html?work=3&seed=8321&time=20&still=1
    live.html?work=12&seed=8321&time=20&still=1
    live.html?work=3&seed=8321&time=20&still=1&pair=1

Works 1–9 are structure; 10–18 are the corresponding matter views. With no audio loaded,
`still=1` disables animation and feedback for repeatable frame comparison. Feedback makes
moving outputs history-dependent. The URL records time when selecting, holding or varying a
work, rather than changing the address on every animation frame.

## Invisible controls

1–9 / arrows: select within a set. X: other material. D: synchronized diptych.
F / click: fullscreen. Space: hold. R: vary seed/phase. C: warm palette.
S: PNG. B: blackout. Q: 1920 → native up to 4096 → 1280 render width.
A / drop audio: local file. M: audio playback. G: image index. I: process notes.

Audio is decoded in the browser and is never uploaded. Bass gently modulates warm-material
brightness; mid/high bands are sampled and reserved for further development. There is no
microphone capture, network audio sync, MIDI, OSC or beat detection.

## Presentation

The image indexes and outputs carry no visible text. The separate process page explains
rules and display proposals. The native quality setting is GPU-dependent; test on the target
projector before exhibition. Reduced-motion preferences default to a held frame.

## Reference inquiry

Ian Anderson / The Designers Republic's work with Autechre informed the inquiry into simple
geometry, variation, negative space, seriality and imperfect technical order. This project
uses original procedural fields rather than reproducing sleeve graphics. References:
https://200-percent.com/ian-anderson-part-1/
https://www.gridpattern.co.uk/work/ae/

## Dependencies

p5.js 1.11.11 is included unmodified in dist/vendor/p5.min.js. Its LGPL license is supplied in
dist/vendor/p5-license.txt; see https://github.com/processing/p5.js. This source package is an
editable working study. It is not an announced exhibition or an endorsement by Processing.
