blendColor: HSV Color Channel Blending

HSV Color Space Manipulation

Color blending operates in HSV color space to achieve natural color mixing behavior. This mode transfers hue and saturation from the blend layer while preserving the value (brightness) of the base layer.

The mathematical process involves:

$$\begin{align} HSV_{base} &= \text{rgb2hsv}(C_{base}) \\ HSV_{blend} &= \text{rgb2hsv}(C_{blend}) \\ HSV_{result} &= (H_{blend}, S_{blend}, V_{base}) \\ C_{result} &= \text{hsv2rgb}(HSV_{result}) \end{align}$$

This approach maintains the original brightness distribution while applying new color characteristics.

Color Component Behavior

Component	Source	Effect	Mathematical Role
Hue	Blend layer	Color identity	$H_{result} = H_{blend}$
Saturation	Blend layer	Color intensity	$S_{result} = S_{blend}$
Value	Base layer	Brightness structure	$V_{result} = V_{base}$
Alpha	Opacity control	Blending strength	Linear interpolation weight

ライブエディター

const fragment = () => {
      const grid = uv.mul(8).floor()
      const checker = grid.x.add(grid.y).mod(2)
      const basePattern = vec3(0.8).mul(checker).add(vec3(0.2))
      const colorWheel = vec3(
              uv.x.mul(6.28).sin().mul(0.5).add(0.5),
              uv.y.mul(6.28).cos().mul(0.5).add(0.5),
              uv.x.add(uv.y).mul(3.14).sin().mul(0.5).add(0.5)
      )
      const result = blendColor(basePattern, colorWheel)
      return vec4(result, 1)
}