blendDifference: Absolute Difference Contrast

Mathematical Foundation of Difference Detection

Difference blending calculates the absolute difference between base and blend colors, creating high-contrast effects that highlight variations between layers. This operation is fundamental in edge detection and creates striking inversion patterns.

The mathematical definition is:

$$C_{result} = |C_{base} - C_{blend}|$$

The absolute value ensures all results are positive, creating bright edges where colors differ significantly and dark areas where colors are similar.

Contrast Detection Properties

Property	Description	Mathematical Expression
Symmetry	Order independence	$\|A-B\| = \|B-A\|$
Zero Identity	Identical colors produce black	$\|C-C\| = 0$
Maximum Contrast	Opposite values produce white	$\|0-1\| = 1$
Edge Enhancement	Highlights color boundaries	High gradient response

Live Editor

const fragment = () => {
      const base = vec3(0.8, 0.3, 0.9)
      const circles = vec3(
              float(0.3).smoothstep(0.2, uv.sub(vec2(0.3, 0.3)).length()),
              float(0.3).smoothstep(0.2, uv.sub(vec2(0.7, 0.3)).length()),
              float(0.3).smoothstep(0.2, uv.sub(vec2(0.5, 0.7)).length())
      )
      const result = blendDifferenceVec3(base, circles)
      return vec4(result, 1)
}

Result

Loading...