Flare 1

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

• SDF Shape FunctionsSigned Distance Functions (SDFs) for 2D and 3D shapes. Essential primitives for shader programming and raymarching.

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

• Cosine PaletteGenerate procedural color palettes with cosine functions. Create smooth, vibrant gradients mathematically.

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

• Grain Texture EffectFilm grain shader effect for analog texture and vintage aesthetics. Add cinematic character to digital compositions.

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 = grainTextureEffect(uv0).mul(0.1)
finalColor.addAssign(g)