# A field made of functions.

Independent article case study. Domain: website consumer / Design Engineering presentation.

A native WebGL vertex shader derives curve positions, finite-difference tangents, a cross-section frame and normals from immutable progress/angle attributes. The animated reveal changes radius rather than transparency. A stable reference-axis fallback prevents zero-length cross products for this bounded curve family; it does not promise a globally continuous frame for arbitrary curves.

## Attribution and evidence

Studied: [Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU](https://tympanus.net/codrops/2026/09/07/drawing-with-light-an-exploration-of-lit-gpu-tubes-with-tsl-and-webgpu/), Mathis Biabiany. Article SHA-256: a30040c4d3bdf7c8ff56f13c4b6e2782736ae1a7eafd91410614046372570395. Analysis SHA-256: 784ae8e9c29d0353860261969d5fd3c6fa5b11d7eb4088d1518f340c011dddca. Source revision: 40f0c44e3ac76b0a496bc57cdabcb2952b15fb8e133da23bf2e418407fa137c6. The revision hashes the article/analysis hashes, the analyst principle and code-block evidence references; it identifies studied evidence, not a claim that the original demo executes.

Original acquisition: unresolved. Original license: unverified. originalSourceAcquired: false. Linked live experiment files are cached, but no complete licensed source release or original hand/strand dataset was established. Four tube-geometry/shader fragments are present in the article.

No original article prose, code, artwork, source project or screenshot is distributed here. The authored-code MIT notice applies only to the independent implementation. Independent mathematical strands replace the original hand-derived dataset. This study uses WebGL shaders rather than the publisher’s TSL/WebGPU runtime. The fallback axis is nondegenerate but cannot guarantee globally continuous frames for every possible curve.

## Initial state and controls

A fixed grid stores only strand number, progress and radial angle. A vertex shader turns those parameters into curved, opaque tubes with real surface normals.

The page starts stationary. Play motion, where present, advances this study’s presentation until paused; text, bounce, portrait, orbit, strand and mascot motion loops, while the event composer stops at its endpoint. Scroll studies advance through ordinary document scroll or their chapter buttons. Static view stops time-based motion; manual controls still inspect values. The three scroll studies instead show every chapter in ordinary reading flow. Pointer parallax centers its decorative layers.

Initial control values:

| Control key | Value |
| --- | --- |
| reveal | 86 |
| radius | 0.016 |
| speed | 0.6 |
| sides | 10 |
| brushX | 0 |
| brushY | 0 |
| light | 35 |

## Running and editing

Open index.html directly. It contains all runtime code and visuals and needs no package install, account, network, remote asset or browser-origin storage. Edit its inline style and script to change the downloaded page. styles.css and script.js are reference copies of the inline source; changing those copies alone does not change the running page. Repository regeneration overwrites index.html and all generated copies, including any manual edits. Keep a separate copy when editing a download. The repository authoring modules in vendor/codrops-article-studies/scenes-*.mjs and runtime.mjs regenerate these copies through node scripts/build-codrops-article-studies.mjs. Repository regeneration also needs the private source evidence; downloaded-page execution does not.

## Verification boundary

This generation passed the captured article/analysis hash checks, exact ID membership, local canonical Markdown anchor/hash checks, implementation-symbol checks, JavaScript parsing, semantic main/title counts, duplicate-ID checks and runtime URL/storage exclusion. The manifest codeFiles entries identify every emitted file by SHA-256. Each code symbol is a searchable named function, not a claimed executed call trace. Proposed checks are in KNOWLEDGE.json. runtime_verified: false. SG artifact capture proves only a recorded initial render; no interactive runtime, keyboard, accessibility, comfort or performance result is claimed.

Manual Chrome interaction is blocked by extension UI in this session. No alternate browser-control route was used. Preview sizing is native responsive width. Initial-render captures are tracked separately at site/artifacts/full-import/preview-posters/index.json and site/artifacts/full-import/preview-posters/visual-review.json in the repository. No capture receipt is bundled with this download. The bounded initial-render matrix requests all 21 studies at 320 pixels and three representative studies at 1280 pixels; the separate poster surface is 640 × 420. The authored CSS also adapts at 375 and 768 pixels, without claiming those widths were captured. A width request does not mean that capture exists or passed. Motion starts on explicit playback; system reduced motion and the Static view switch stop it.

consumer_reference: consumer-reference/agent-native/registry.json