Bump: Smooth Falloff Functions

Mathematical Foundation

The bump function generates smooth falloff curves that transition from maximum value at center to zero at boundaries. Built on polynomial mathematics, these functions create natural-looking gradients without harsh edges.

The bump functions are defined as follows:

Standard Bump Function: $\text{bump}(x, k) = \max\left(0, (1 - x^2) - k\right) = \text{saturate}\left((1 - x^2) - k\right)$

Simple Bump Function: $\text{bumpSimple}(x) = \max(1 - x^2, 0)$

Where:

• $x$ is the input distance value (typically normalized to [0,1])
• $k$ is the threshold parameter controlling falloff steepness
• $\text{saturate}(v) = \text{clamp}(v, 0, 1)$ ensures output stays in valid range

The parabolic curve $1 - x^2$ creates smooth transitions, while the threshold $k$ shifts the cutoff point, allowing precise control over the falloff characteristics.

Two Curve Styles

Standard Bump accepts both input value and threshold control, enabling precise curve shaping for complex visual effects.

Simple Bump provides immediate results with built-in threshold, perfect for rapid prototyping and basic falloff needs.

Live Editor

const fragment = () => {
      const d = uv.sub(0.5).length()
      const falloff = bump(d, 0.2)
      return vec4(falloff, falloff.mul(0.5), falloff.mul(0.8), 1)
}

Radial Light Halos

Live Editor

const fragment = () => {
      const center1 = vec2(0.3, 0.6)
      const center2 = vec2(0.7, 0.4)
      const d1 = uv.sub(center1).length().mul(3)
      const d2 = uv.sub(center2).length().mul(2)
      const light1 = bumpSimple(d1).mul(vec3(1, 0.3, 0.1))
      const light2 = bumpSimple(d2).mul(vec3(0.1, 0.8, 1))
      return vec4(light1.add(light2), 1)
}

Control Parameters

Function	Input	Threshold	Purpose
bump(x, k)	Distance value	Adjustable cutoff	Precise curve control
bumpSimple(x)	Distance value	Fixed at 0	Quick falloff generation

Distance values work best between 0-1 range. Threshold values below 0.5 create wider falloffs, above 0.5 create tighter curves.