Back to Node List

Distance

distance_field

Turns a mask into a grayscale distance map — the base for glows and edge gradients

Reviewed
Guide available
The node name and summary are available in English. Port, parameter, and article details are currently shown in Japanese.

Input Ports

NameTypeDescription
画像
input
Image
Required
形状の元になるマスク画像です(アルファか明るさで判定)

Output Ports

NameTypeDescription
マップ
output
Image
グレースケールの距離マップです

Parameters

NameTypeDefaultRangeDescription / Options
判定基準
source
Enum
Alpha

どの値で形状の内外を判定するかです

  • OKLCH 明度OKLCH-L
    見た目の明るさで判定します。影やハイライトなど、目で見た明暗に合わせたい時に使います。
  • OKLCH 彩度OKLCH-C
    色の鮮やかさで判定します。くすんだ色と鮮やかな色を分けたい時に使います。
  • HSV 彩度HSV-S
    HSV の鮮やかさで判定します。一般的な色相・彩度・明度の感覚で選びたい時に使います。
  • HSV 明度HSV-V
    RGB の一番明るいチャンネルを基準にします。光った色や原色の強さを見たい時に使います。
  • RGB 赤RGB-R
    赤の強さで判定します。赤みだけを抜き出したい時に使います。
  • RGB 緑RGB-G
    緑の強さで判定します。緑成分だけを抜き出したい時に使います。
  • RGB 青RGB-B
    青の強さで判定します。青成分だけを抜き出したい時に使います。
  • アルファAlpha
    透明度で判定します。不透明な形だけをマスクにしたい時に使います。
  • 輝度Luminance
    RGB から計算した明るさで判定します。OKLCH より単純な白黒変換に近い結果が欲しい時に使います。
測る範囲
region
Enum
Outside

輪郭のどちら側の距離を測るかです

  • 外側Outside
    形の中は白のまま、外へ向かって暗くなります。グロー向けです
  • 内側Inside
    形の中心ほど白く、内側の輪郭画素で正確に黒になります。内側の陰影向けです
  • 両側Both
    輪郭画素が正確に0.5、内側ほど白、外側ほど黒の符号付き距離です
最大距離
max_distance
Float
161–256 / step 1

この距離(ピクセル)でグラデーションが端まで到達します

Overview

Turns the distance in pixels from a silhouette's outline into a grayscale gradient. It is a versatile foundation for effects driven by distance from an outline, including glows, inner shading, and contour patterns.

Usage tips

  • The golden pattern for a glow is: silhouette → Distance (Outside) → gradient_map (glow colors) → layer over the original with blend (Add).
  • max_distance controls the reach of the effect. Use 4–8 for a glow, or 16 and above for a broad aura.
  • Choose region by intent: Outside for outward light or shadow, Inside for inner edge shading, and Both for contours or effects centered on the outline.
  • Shape membership uses a fixed threshold of 0.5 on the selected source. An empty shape produces an opaque black distance map in every region mode.
  • For pixel-art-like steps, reduce the number of tones downstream (with a posterize-style node) to produce a contour-like glow.

Related nodes

  • gradient_map — convert distance into color (commonly paired with this node)
  • blend — layer the result over the original image
  • region_distance — the RegionMap version of a distance map
  • morphology — expand or shrink the shape itself instead of measuring distance

Reading the output

region Inside Outline Outside
Outside White (1.0) White Darkens with distance from the boundary
Inside Brighter toward the center Black (0.0) Black
Both Above 0.5 through white 0.5 Below 0.5 through black

Technical details

  • Uses an approximate Euclidean distance calculated with a two-pass chamfer method (1 / √2 weights).
  • Boundary pixels in the measured region have distance 0. Consequently, the Inside boundary is exactly 0 and the Both boundary is exactly 0.5.
  • Inside treats the canvas edges as outside, so it still produces distances for a fully opaque tile.

Examples

  1. Glow: silhouette → Distance(Outside)Gradient Map (glow color ramp) → layer over the original with Blend(Add)
  2. Inner shading: Distance(Inside)Gradient Map to create a fill that is dark at the edge and bright at the center
  3. Contours: Distance(Both)Posterize to create stripes that follow the shape
Back to Node List
Distance — PixPipeline Node Reference