Renders shading as a regular two-tone dither — a Bayer (or white-noise)
threshold matrix that trades smooth gradients for a retro, print-like stipple
of two colors, crisp by default or softened via softness.
Declarative element:
<sk-ordered-dither-color-map>
Global: available as sk.OrderedDitherColorMap inside a scene <script>.
This is an ordered-dither member of the ColorMap family: like every
color-map it turns a driver value into a color, but it quantizes the value into
a few levels and dithers between two colors using a fixed threshold pattern, so
mid-tones read as a stable, tileable dot grid rather than a smooth gradient.
Key attributes. low-color and high-color are the two tones (dark and
light). pattern selects the threshold matrix — bayer2/bayer4/bayer8/
bayer16 give increasingly fine ordered grids, white-noise a random one.
levels is how many quantization bands the tone is split into (2 = pure
two-tone; higher softens the banding). scale is the screen-space pixel size
of one dither cell, so larger values give a chunkier, more visible pattern.
shape and softness are the same pair sk-halftone-dither-color-map
exposes: shape (default circle) is the dot silhouette — circle draws round
dots, square the plain pixel-block grid, diamond a rotated square — and
softness ([0, 1], default 0) anti-aliases the dot edge, from crisp at 0
to feathered, most visibly at scale > 1 (at scale = 1 a cell is one pixel, so
there is nothing to feather). It emits only the raw dither color — the consuming
sk-tonemap applies its field and base-color compositing once.
Related. Its two-tone siblings are sk-blue-noise-dither-color-map
(organic, grid-free grain) and sk-halftone-dither-color-map
(rotated dot screen). For a smooth gradient instead of a dither, use
sk-ramp-color-map. It is driven by a sk-tonemap and can be a
layer of a sk-composite-color-map.
constructor(config?: { pattern?: DitherPattern; levels?: number; scale?: number; softness?: number; shape?: DitherDotShape; remapCurve?: RemapCurveInput; lowColor?: ColorInput; highColor?: ColorInput; screenAnchor?: ScreenAnchorNode | null })Inherited from: TwoColorDitherColorMap, ColorMap, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
patternanimatable |
DitherPattern |
"bayer4" |
Threshold pattern (structural). Default 'bayer4'. |
OrderedDitherColorMap |
levelsanimatable |
number |
2 |
Number of quantization levels (>= 2). Default 2. |
OrderedDitherColorMap |
scaleanimatable |
number |
1 |
Screen-space pixel scale of the dither cell (>= 1). Default 1. |
OrderedDitherColorMap |
softnessanimatable |
number |
0 |
Anti-aliases the quantization decision, [0, 1]. Default 0 (hard). |
OrderedDitherColorMap |
shapeanimatable |
DitherDotShape |
"circle" |
Dot shape (structural). Default circle. |
OrderedDitherColorMap |
remapCurveanimatable |
RemapCurveInput |
— | Optional tone-response remap curve, mirroring the field family's | ColorMap |
lowColoranimatable |
ColorInput |
— | Color for low-value (dark / shadow / dot) bins. Animatable. Default: opaque black. | TwoColorDitherColorMap |
highColoranimatable |
ColorInput |
— | Color for high-value (bright / lit / background) bins. Animatable. Default: opaque white. | TwoColorDitherColorMap |
screenAnchor |
ScreenAnchorNode | null |
— | The node whose PROJECTED SCREEN POSITION re-origins the dither | TwoColorDitherColorMap |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
baseShaperead-only |
DitherDotShape |
— | — | OrderedDitherColorMap |
baseLevelsread-only |
number |
— | — | OrderedDitherColorMap |
baseScaleread-only |
number |
— | — | OrderedDitherColorMap |
baseSoftnessread-only |
number |
— | — | OrderedDitherColorMap |
baseLowColorread-only |
ColorBase |
— | — | TwoColorDitherColorMap |
baseHighColorread-only |
ColorBase |
— | — | TwoColorDitherColorMap |
fieldanimatable |
Field | null |
— | Gets the optional field that modulates this color-map's weight | ColorMap |
remapCurveSourceread-only |
string | null |
— | The descriptor the curve was authored from, or null (imperative/none). |
ColorMap |
remapPhaseanimatable |
number |
0 |
Horizontal remap phase — an animatable scalar that translates the tone | ColorMap |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |