Skip to content

ui/build/dot-field

ui/build/dot-field

Type Aliases

DotFieldOptions

type DotFieldOptions<Seed, State> = object;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:90

Type Parameters

Type Parameter
Seed
State extends string

Properties

Property Modifier Type Description Defined in
geometry readonly DotGeometry<Seed, State> - apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:91
radius readonly number The drawn mark's radius as a fraction of the box. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:94
readState readonly (root) => State Reads the live state; the runner must not snapshot it. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:96
size readonly number - apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:92
transitionMs readonly number How long a state change takes to travel, in ms. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:98

DotGeometry

type DotGeometry<Seed, State> = object;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:59

Type Parameters

Type Parameter
Seed
State extends string

Properties

Property Modifier Type Defined in
states readonly readonly State[] apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:60

Methods

faces()?
optional faces(seeds, state): readonly readonly [number, number, number, number][];

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:68

Quads of seed indices — [a, b, c, d] with a→b and d→c running along the surface — that tile the mark as a ribbon. A geometry that provides this is drawn as a ribbon below RIBBON_BELOW, where its dots could not resolve.

Parameters
Parameter Type
seeds Seed[]
state State
Returns

readonly readonly [number, number, number, number][]

layout()
layout(size): Seed[];

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:61

Parameters
Parameter Type
size number
Returns

Seed[]

point()
point(
   state,
   seed,
   index,
   time): DotPoint;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:62

Parameters
Parameter Type
state State
seed Seed
index number
time number
Returns

DotPoint

DotPoint

type DotPoint = object;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:45

One placed particle, in shape units, before seating.

Properties

Property Type Description Defined in
accent number Brand-ink mix, in [0, 1]. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:53
boost number Extra radius in px, e.g. a band's edge rows. Ignored at icon size. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:55
light number How squarely the surface faces the viewer, in [0, 1]; dims an edge-on surface. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:51
vis number Visibility in [0, 1]; a dot at 0 is neither drawn nor measured. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:57
x number - apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:46
y number - apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:47
z number Depth in roughly [-1, 1]; sizes and inks the dot, and orders the draw. apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:49

ShapeFit

type ShapeFit = object;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:78

Where a shape sits in the unit box and what it takes to seat it there.

Properties

Property Type Defined in
cx number apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:79
cy number apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:80
scale number apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:81

Variables

dotFar

const dotFar: (size) => number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:36

Radius of a dot at the back. At icon size it matches the front, so depth is carried by ink.

Parameters

Parameter Type
size number

Returns

number

dotNear

const dotNear: (size) => number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:34

Radius of a dot at the front.

Parameters

Parameter Type
size number

Returns

number

INK_FLOOR

const INK_FLOOR: 0.26 = 0.26;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:38

Ink strength of a dot at the back, as a fraction of full ink.

markRadius

const markRadius: (size) => number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:43

The drawn mark's radius as a fraction of its box: a full 46% at icon size, where it has to hold its own beside 16px glyphs, easing to 36% where it has room to sit like a stroke icon does.

Parameters

Parameter Type
size number

Returns

number

pitchAcross

const pitchAcross: (size) => number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:30

Dot pitch across a band's width.

Parameters

Parameter Type
size number

Returns

number

pitchAlong

const pitchAlong: (size) => number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:32

Dot pitch along a band's length: tighter, so rows fuse into rails at icon size.

Parameters

Parameter Type
size number

Returns

number

RIBBON_BELOW

const RIBBON_BELOW: 32 = 32;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:76

Below this box size a dot is under a pixel and a field of them reads as a smudge, so a geometry that can be drawn as a surface is: each patch filled with ink by depth and by how squarely it faces the viewer, its edges outlined. A Möbius band's twist then reads as the shading turning over, the way a solid icon of one does.

TAU

const TAU: number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:14

The dot-field engine shared by NorbiusStrip and AccretionDisc.

A mark is a set of seeds and a function that places each seed at a time, in a state. This module owns everything else: how dots are sized and inked (the thinking-orbs vocabulary — matte, opaque, monochrome dots, near ones larger and full ink, far ones smaller and faint, z-sorted so the near lattice sits on top), how a shape is seated in its box, and the frame loop that draws it.

Scale is one rule, continuous in size so a ladder has no steps in it: a dot never grows past ~1.2px, and a bigger box gets more dots on a fixed pixel pitch. Below ~32px the pitch along the band is tighter than the pitch across it, so rows fuse into contour rails and the mark reads as a surface; the two pitches meet past 128px, where it is an open lattice.

Functions

angleDistance()

function angleDistance(a, b): number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:20

Returns the shortest signed angular distance between two radians.

Parameters

Parameter Type
a number
b number

Returns

number

attachDotField()

function attachDotField<Seed, State>(
   root,
   canvas,
   accentSwatch,
   options): () => void;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:108

Draws a geometry into a canvas until the returned cleanup runs.

Handles DPR, theme colours (ink from the canvas's color, accent from the swatch's, ground from the nearest painted ancestor), state transitions, visibility and reduced motion. The caller's attach closure passes size in and reads state through readState, so a state change does not re-run the attachment and restart the transition.

Type Parameters

Type Parameter
Seed
State extends string

Parameters

Parameter Type
root HTMLElement
canvas HTMLCanvasElement
accentSwatch HTMLElement
options DotFieldOptions<Seed, State>

Returns

() => void

clamp()

function clamp(
   value,
   min?,
   max?): number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:16

Clamps a numeric value to the inclusive range between min and max.

Parameters

Parameter Type
value number
min? number
max? number

Returns

number

measureFit()

function measureFit<Seed, State>(
   geometry,
   seeds,
   state): ShapeFit;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:89

Measures one shape over a whole cycle of its own motion: where it sits, and how far it reaches.

Sampled once per size rather than per frame on purpose. A per-frame fit would rescale the mark as it turned, and the orb would breathe against the icons beside it.

Type Parameters

Type Parameter
Seed
State extends string

Parameters

Parameter Type
geometry DotGeometry<Seed, State>
seeds Seed[]
state State

Returns

ShapeFit

noise()

function noise(index, salt): number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:22

Deterministic scatter in [-1, 1]; a seed set has to be stable across frames.

Parameters

Parameter Type
index number
salt number

Returns

number

rotate()

function rotate(
   x,
   y,
   z,
   tilt,
   yaw): object;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:24

Applies yaw about y then tilt about x.

Parameters

Parameter Type
x number
y number
z number
tilt number
yaw number

Returns

object

x
x: number;
y
y: number;
z
z: number;

smooth()

function smooth(value): number;

Defined in: apps/website/.api-docs-entry/ui/build/dot-field/index.d.ts:18

Hermite ease of a value clamped to [0, 1].

Parameters

Parameter Type
value number

Returns

number