Renders shading as a classic print halftone — a rotated screen of dots that grow and shrink with the light, reproducing a tone with just two colors the way newsprint and comics do.
Declarative element:
<sk-halftone-dither-color-map>
Global: available as sk.HalftoneDitherColorMap inside a scene <script>.
This is the halftone member of the ColorMap family: like every
color-map it turns a driver value into a color, but it lays down a rotated grid
of dots whose size tracks the tone, dithering between two colors into the
unmistakable look of screen-printed ink.
Key attributes. low-color is the dot fill and high-color the
background. dot-spacing sets the cell size in pixels (larger = coarser
screen); angle rotates the dot grid (the classic screen angle); shape
chooses the dot form (circle, line, …); softness feathers the dot edge.
The grain controls (size-jitter, wavy, seed) add organic, hand-printed
irregularity. It emits only the raw halftone color — the consuming
sk-tonemap applies its field and base-color compositing once.
Driving value is LIGHTNESS, not ink coverage. This is the opposite of the
intuition the attribute names invite, so it is worth stating plainly:
- t = 0 (darkest) → the LARGEST dots, growing until they merge and close the
cell entirely, leaving no background.
- t = 1 (lightest) → dots shrink to minDot (nothing, by default).
So dot coverage tracks ink (1 - t) for the area-metric shapes, and a mid-grey
renders as roughly half-covered cells. 'line' is the deliberate exception —
see HalftoneDotShape.
Related. Its two-tone siblings are sk-ordered-dither-color-map
(regular Bayer grid) and sk-blue-noise-dither-color-map (organic
stipple). For a smooth gradient, 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?: { dotSpacing?: number; angle?: number; softness?: number; minDot?: number; maxDot?: number; shape?: HalftoneDotShape; sizeJitter?: number; sizeJitterScale?: number; wavy?: number; wavyScale?: number; seed?: number; seedPeriod?: number; 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 |
|---|---|---|---|---|
dotSpacinganimatable |
number |
8 |
Spacing between dot cells in pixels (>= 1). Default 8. |
HalftoneDitherColorMap |
angleanimatable |
number |
0.785 |
Screen rotation of the dot grid, radians. Default 0.785. |
HalftoneDitherColorMap |
softnessanimatable |
number |
0 |
Edge softness [0, 1]. Default 0. |
HalftoneDitherColorMap |
minDotanimatable |
number |
0 |
Minimum dot radius fraction [0, 1]. Default 0. |
HalftoneDitherColorMap |
maxDotanimatable |
number |
1 |
Coverage ceiling at the darkest tone, as a fraction of cell closure [0, 1]. Default 1. |
HalftoneDitherColorMap |
shapeanimatable |
HalftoneDotShape |
"circle" |
Dot shape (structural). Default 'circle'. |
HalftoneDitherColorMap |
sizeJitteranimatable |
number |
0 |
Organic variation in dot size, as a fraction of the cell [0, 1]. Default 0. |
HalftoneDitherColorMap |
sizeJitterScaleanimatable |
number |
8 |
Cell size of the dot-size variation noise, in pixels (>= 1). Default 8. |
HalftoneDitherColorMap |
wavyanimatable |
number |
0 |
Organic waver of the dot grid [0, 1]. Default 0. |
HalftoneDitherColorMap |
wavyScaleanimatable |
number |
16 |
Cell size of the waver noise, in pixels (>= 1). Default 16. |
HalftoneDitherColorMap |
seedanimatable |
number |
0 |
Position on the seed circle selecting which grain field is drawn (>= 0). Default 0. |
HalftoneDitherColorMap |
seedPeriodanimatable |
number |
— | Seed advance that returns the identical grain field, i.e. the loop length (> 0). Default 16. |
HalftoneDitherColorMap |
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 |
|---|---|---|---|---|
baseDotSpacingread-only |
number |
— | — | HalftoneDitherColorMap |
baseAngleread-only |
number |
— | — | HalftoneDitherColorMap |
baseSoftnessread-only |
number |
— | — | HalftoneDitherColorMap |
baseMinDotread-only |
number |
— | — | HalftoneDitherColorMap |
baseMaxDotread-only |
number |
— | — | HalftoneDitherColorMap |
baseSizeJitterread-only |
number |
— | — | HalftoneDitherColorMap |
baseSizeJitterScaleread-only |
number |
— | — | HalftoneDitherColorMap |
baseWavyread-only |
number |
— | — | HalftoneDitherColorMap |
baseWavyScaleread-only |
number |
— | — | HalftoneDitherColorMap |
baseSeedread-only |
number |
— | — | HalftoneDitherColorMap |
baseSeedPeriodread-only |
number |
— | — | HalftoneDitherColorMap |
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 |