vgrad

Procedural color gradient generator combining Perlin noise with harmonic music interval ratios.

How It Works

1. Extract a palette from a source image — 15-21 colors ordered dark to light
2. Choose a harmonic interval (chord, scale, or series) from just intonation ratios
3. Normalize the frequency ratios to [0, 1] thresholds: position = (ratio - min) / (max - min)
4. Render a Perlin noise field and map noise values to palette colors via those thresholds
5. Interpolate between adjacent palette colors for smooth blending

The musical structure determines where colors transition; the noise determines the shape of those transitions.

Quick Start

Perlin Noise Gradients (generate_15.py)

Generates 15 standalone HTML files using different harmonic intervals:

python3 generate_15.py
# Output: gradients/*.html — open in any browser

Each gradient uses a different musical interval (octave, perfect fifth, major/minor triads, 7th chords, pentatonic scales, etc.) to partition the noise field.

NURBS Radial Gradients (nurbs_gradient.py)

A separate tool for NURBS-based radial color gradients with an interactive editor:

# Simple gradient
python3 nurbs_gradient.py "red@0.0" "blue@1.0" --origin 256,256

# Per-origin gradients
python3 nurbs_gradient.py --gradient "100,100|red@0.0|blue@1.0" \
                          --gradient "400,300|green@0.0|yellow@1.0"

# With custom blend curves
python3 nurbs_gradient.py --gradient "100,100|red@0.0|blue@1.0" \
                          --blend "1@0,1@0.3,0@0.7,0@1"

# From exported JSON config
python3 nurbs_gradient.py --config gradient.json

No external dependencies — Python stdlib only.

Harmonic Intervals Reference

Interval	Ratios	Normalized Positions
Octave	1, 2	0.0, 1.0
Perfect Fifth	1, 3/2, 2	0.0, 0.5, 1.0
Major Triad	4, 5, 6	0.0, 0.5, 1.0
Minor Triad	10, 12, 15	0.0, 0.4, 1.0
Major 7th	8, 10, 12, 15	0.0, 0.286, 0.571, 1.0
Dominant 7th	4, 5, 6, 7	0.0, 0.333, 0.667, 1.0
Minor 7th	10, 12, 15, 18	0.0, 0.25, 0.625, 1.0
Diminished 7th	Equal-tempered	Equal spacing
Augmented	Equal-tempered	Equal spacing
Sus4	6, 8, 9	0.0, 0.667, 1.0
Major Pentatonic	1, 9/8, 5/4, 3/2, 5/3, 2	0.0, 0.125, 0.25, 0.5, 0.667, 1.0
Minor Pentatonic	1, 6/5, 4/3, 3/2, 9/5, 2	0.0, 0.2, 0.333, 0.5, 0.8, 1.0
Whole Tone	2^(i/6), i=0..6	Equal spacing
Harmonic Series	1, 2, 3, ..., N	Clusters toward low end
Overtone Scale	1, 9/8, 5/4, 11/8, 3/2, 13/8, 7/4, 2	Non-uniform

Noise Modes

Mode	Character	Best For
fbm	Smooth, gradient-like	Soft fields, horizons
warp	Organic, flowing	Marble, lava, clouds
ridge	Sharp peaks, veins	Mountains, cracks
turbulence	Billowy, cellular	Storms, plasma
terraced	Flat plateaus	Strata, contour maps

Tuning Parameters

• octaves: 1 = ultra smooth, 2 = soft, 4+ = detailed
• scale: lower = broader features, higher = finer
• gain: lower = smoother falloff between octaves
• gamma: 1.0 = linear, <0.7 = high contrast, >1.2 = washed
• vBias: 0.3-0.7 adds vertical gradient (horizon effect)

Architecture

generate_15.py — Defines the palette, harmonic intervals, and noise config per gradient. Embeds a self-contained HTML template with Perlin noise implementation (perlin, fbm, warp, ridge, turbulence). Outputs standalone HTML files.

nurbs_gradient.py + template.html — NURBS-based radial gradient system. Python CLI reads the template, injects a JSON config at the /*__CONFIG__*/ placeholder, and writes a standalone HTML file with an interactive editor.

NURBS math is implemented in both:

• Python: knot vector generation only
• JavaScript (template.html): full NURBS evaluation (Cox-de Boor recursive basis, 3D RGB curves, scalar blend curves)