Renders shading as an organic two-tone stipple — a blue-noise threshold pattern that dithers between two colors without the visible grid of an ordered matrix, for a natural, hand-stippled look.
Declarative element:
<sk-blue-noise-dither-color-map>
Global: available as sk.BlueNoiseDitherColorMap inside a scene <script>.
This is the blue-noise member of the ColorMap family: like every
color-map it turns a driver value into a color, but it quantizes the value and
dithers between two colors using a blue-noise threshold texture, so the dots
scatter evenly with no directional structure or clumping — the quality that
distinguishes it from the regular Bayer grid of
sk-ordered-dither-color-map. (The 64×64 threshold texture is tiled
across the screen, so at a large scale its repeat can become visible.)
Key attributes. low-color/high-color are the two tones. levels is the
number of quantization bands (2 = pure two-tone). scale is the screen-space
size of the noise pattern (larger = coarser stipple). 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 look, 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). shadow-dot-density and highlight-dot-density bleed a fraction of
the opposite tone's dots into the darkest / lightest regions, so pure black and
pure white keep a little texture instead of going flat. 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-ordered-dither-color-map
(regular Bayer grid) and sk-halftone-dither-color-map (rotated dot
screen). 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?: { levels?: number; scale?: number; highlightDotDensity?: number; shadowDotDensity?: 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 |
|---|---|---|---|---|
levelsanimatable |
number |
2 |
Number of quantization levels (>= 2). Default 2. |
BlueNoiseDitherColorMap |
scaleanimatable |
number |
1 |
Screen-space pattern scale (>= 1). Default 1. |
BlueNoiseDitherColorMap |
highlightDotDensityanimatable |
number |
0 |
Fraction of shadow dots persisting into highlights, [0, 0.5). Default 0. |
BlueNoiseDitherColorMap |
shadowDotDensityanimatable |
number |
0 |
Fraction of lit dots persisting into shadows, [0, 0.5). Default 0. |
BlueNoiseDitherColorMap |
softnessanimatable |
number |
0 |
Anti-aliases the quantization decision, [0, 1]. Default 0 (hard). |
BlueNoiseDitherColorMap |
shapeanimatable |
DitherDotShape |
"circle" |
Dot shape (structural). Default circle. |
BlueNoiseDitherColorMap |
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 |
|---|---|---|---|---|
baseLevelsread-only |
number |
— | — | BlueNoiseDitherColorMap |
baseScaleread-only |
number |
— | — | BlueNoiseDitherColorMap |
baseShadowDotDensityread-only |
number |
— | — | BlueNoiseDitherColorMap |
baseHighlightDotDensityread-only |
number |
— | — | BlueNoiseDitherColorMap |
baseSoftnessread-only |
number |
— | — | BlueNoiseDitherColorMap |
baseShaperead-only |
DitherDotShape |
— | — | BlueNoiseDitherColorMap |
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 |