home/ atoms/ color-palette-cosine-rgb

Three phase-offset cosine waves generate smooth procedural color palettes

To map a scalar t to color smoothly, evaluate color = a + b·cos(2π·(c·t + d)), where a, b, c, d are vec3 parameters controlling the R, G, B channels independently. Parameter a sets the center/offset of the color range; b sets the amplitude, hence saturation and range of variation; c sets the frequency, i.e. how many color cycles occur per unit of t; and d sets the per-channel phase offset that shifts which hues appear at which t. When the three channel phases are equal the waves are in sync and produce greyscale; offsetting them by 1/3 and 2/3 of a cycle produces a full color-wheel sweep. Smaller offsets yield analogous, harmonious hues; larger offsets yield complementary contrasts. Because it is a single continuous, periodic formula, the palette is differentiable and GPU-efficient, replacing lookup tables — ideal for procedural variation in shaders. Interactive palette generators let you design the four vec3 values visually.

Examples

vec3 palette(float t){
    vec3 a=vec3(0.5), b=vec3(0.5), c=vec3(1.0), d=vec3(0.0,0.33,0.67);
    return a + b*cos(6.28318*(c*t + d));
}
vec3 col = palette(length(uv));

Assessment

For a=vec3(0.5), b=vec3(0.5), c=vec3(1.0), d=vec3(0.0), describe the colors at t=0, 0.25, 0.5, 0.75. Set all three phase offsets in d equal — what does the palette look like? Then change d.x to 0.5 (or phase-shift so red appears at t=0.5) and describe the color shift.

“three cosine waves, or same waves, which are offset from each other, by different faces, and one of the curves will write the red channel, the one the green, the one the blue”
corpus · inigo-quilez-live-coding-happy-jumping-video · chunk 20
“I will use a very nice function that you can also find on the previous website and that allows you to create infinitely various color gradients using the power of trigonometry it produces a color output based on four control parameters of type VEC 3”
corpus · kishimisu-an-introduction-to-shader-art-coding-video · chunk 2