createField & options

Signature

import { createField } from 'field-ui';

const field = createField(canvas, options);   // → FieldHandle

FieldOptions

Every field is optional. Defaults keep the live field unchanged until you opt in.

accent string · default palette's first stop

The travelling accent colour (a hex string).

density number · default 1

Particle-count multiplier.

waves boolean · default true

Draw the background Currents (the wave layers).

render 'dots' | 'trails' | 'links' | 'metaballs' | 'voronoi' | 'streamlines' · default 'dots'

Render mode — the same physics drawn differently.

mass boolean · default false

First-class mass: particle mass ∝ size and body forces accelerate by a = F/m.

palette string | string[] · default 'ours'

Accent template — a built-in name or custom hex stops.

attention boolean · default false

Conserved attention — one finite strength budget; engaging a body starves the others.

causality boolean · default false

Cross-boundary causality — a saturated body spills density to its neighbours.

heatmap boolean · default false

Density heatmap — a glow layer of where matter pools, sampled back to bodies as --forces-heatmap-density.

Common configurations

Every option is optional and the defaults keep the field calm. These are the combinations worth knowing — each is the whole options object. Switch tabs to compare.

// the resting field — an accent and a palette, nothing else
createField(canvas, { accent: '#4da3ff', palette: 'ours' });

// draw the force field itself as arrows — a diagnostic view
createField(canvas, { render: 'streamlines' });

// focus one thing at a time — one finite strength budget,
// so engaging a body starves the others
createField(canvas, { attention: true });

// a large or low-power surface — half the particles, no wave layer
createField(canvas, { density: 0.5, waves: false });

// first-class mass — particle mass ∝ size, bodies accelerate by a = F/m
createField(canvas, { mass: true });