Implementation
The Flare series of sketches came from experimentation with Procedural Color Palettes and Geometric Shapes. For the longest time, I've had what could be described as an obsession with soft, supple, ethereal gradient effects.
This series is based on simple forms and gradients with gentle patterns and textures.
Breakdown
This shader creates soft, ethereal gradient effects using banded patterns and compound radial gradients. It features a loop-based rendering system that creates multiple overlapping bands with sine wave modulation. There are 5 key components:
Banded Pattern System
This shader uses a banded pattern system with vertical repetition:
// Get aspect-corrected UVs for the screen
const _uv = screenAspectUV(screenSize)
const uv0 = uv().toVar()
// Y-repeated pattern for banding
const repetitions = 12
const uvR = floor(_uv.y.mul(repetitions))Sine Wave Modulation
A sine wave creates vertical offset variation for organic movement:
// Sine wave for vertical offset
const s = sin(uv0.y.mul(PI))Rendering Loop
The main rendering system loops over multiple bands to create layered effects:
// Loop over bands
// @ts-ignore
Loop({ start: 0, end: repetitions }, ({ i: _i }) => {
const f = mul(uvR.mul(_i), 0.005)
const offsetUv = vec2(_uv.x, _uv.y.add(f).add(mul(s, 0.05)))Compound Radial Gradient
A compound radial gradient creates the soft, ethereal shape:
// Compound radial gradient
const r = oneMinus(abs(offsetUv.x.mul(1.5))).add(abs(offsetUv.y.mul(1.5)))Color Palette
This shader uses a warm gradient palette with vertical modulation:
// Palette setup
const a = vec3(0.5, 0.5, 0.5)
const b = vec3(0.5, 0.5, 0.5)
const c = vec3(2.0, 1.0, 0.0)
const d = vec3(0.5, 0.2, 0.25)
// Palette-based color
const col = cosinePalette(uv0.y.mul(0.25), a, b, c, d)
finalColor.assign(col.mul(r))Texture
As with many sketches, grain is added for texture:
// Use normalized UVs for domain warping
const uv0 = uv().toVar()
// Add grain for texture
const g = grainTexturePattern(uv0).mul(0.1)
finalColor.addAssign(g)
