By name: harmonic-perlin-gradients description: Use when generating color gradients, landscapes, or textures that combine Perlin noise with music-theory-derived color proportions. Use when asked to create gradients from an image palette, map harmonic intervals to visual output, or generate procedural art with musical structure.
Harmonic Perlin Gradients
Overview
Generate procedural color fields by mapping Perlin noise values to a color palette through thresholds derived from harmonic music interval ratios (just intonation). The musical structure determines where colors transition; the noise determines the shape of those transitions.
When to Use
- Generating gradients from a sampled image palette
- Creating procedural textures/landscapes with musical proportions
- Batch-generating themed color fields with systematic variation
- Any "color + noise + music theory" combination
Core Pattern
1. Extract palette from source image (dark → light, 15-21 colors)
2. Choose harmonic interval (chord, scale, series)
3. Normalize frequency ratios to [0,1] thresholds
4. Render Perlin noise field, map noise values to palette via thresholds
5. Interpolate between adjacent palette colors for smooth blending
Quick Reference: Harmonic Intervals → Positions
| 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 | 2^(0/12), 2^(3/12), 2^(6/12), 2^(9/12) | Equal spacing |
| Augmented | 2^(0/12), 2^(4/12), 2^(8/12) | 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) for 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 |
Normalization formula: position = (ratio - min) / (max - min)
Noise Modes and Their Character
| Mode | Character | Best for | Key params |
|---|---|---|---|
fbm |
Smooth, gradient-like | Soft fields, horizons | scale 1.0-2.0, octaves 1-2 |
warp |
Organic, flowing | Marble, lava, clouds | warpAmt 1.0-3.0 |
ridge |
Sharp peaks, veins | Mountains, cracks | gain 0.5-0.65, high octaves |
turbulence |
Billowy, cellular | Storms, plasma | high octaves, abs(fbm) |
terraced |
Flat plateaus, topo map | Strata, contour maps | terraceSteps 5-12 |
Tuning Parameters
Smoothness (gradient-like → textured):
octaves: 1 = ultra smooth, 2 = soft, 4+ = detailedscale: lower = broader features, higher = finergain: lower = smoother falloff between octaves
Contrast (matte → dramatic):
gamma: 1.0 = linear, <0.7 = high contrast, >1.2 = washed- Palette index spacing: adjacent indices = subtle, wide jumps = dramatic
Directionality:
vBias: 0.3-0.7 adds vertical gradient (horizon effect)- Negative vBias inverts (bright top, dark bottom)
Palette Extraction Guidelines
Sample 15-21 colors from source image ordered dark to light. Include:
- 3-4 darkest tones (shadows/background)
- 8-10 midtones (dominant color range)
- 3-4 highlights (brightest areas)
Space colors perceptually even. Adjacent palette entries should look distinct but not jarring.
Color Index Selection Per Gradient
Match palette range to musical mood:
| Mood | Palette indices | Example interval |
|---|---|---|
| Bright, open | Mid-to-high (8-20) | Major triad, pentatonic |
| Warm, muted | Mid-range (5-17) | Dominant 7th, sus4 |
| Deep, moody | Low-to-mid (2-14) | Minor triad, minor 7th |
| Full range | Spanning (0-20) | Harmonic series, overtone |
| Soft, pastel | High only (10-20) | Augmented, whole tone |
Implementation Structure
The generator produces self-contained HTML files with inline JS:
- Python script (
generate_15.py): defines palette, intervals, noise config per gradient - HTML template: contains Perlin noise implementation, fbm/warp/ridge functions, rendering loop
- Output: standalone HTML files, one per gradient
Key JS functions in template: perlin(x,y), fbm(x,y,...), warp(x,y,...), ridge(x,y,...)
Common Mistakes
| Mistake | Fix |
|---|---|
| All gradients look the same | Vary octaves, scale, vBias, and palette range per gradient |
| Too dark / no highlights | Ensure palette indices reach into the light end (16+) |
| Too washed out / no contrast | Use wider palette index jumps or lower gamma |
| Smoky / liquidy appearance | Use plain fbm with octaves 1-2 instead of warp |
| Sharp banding between colors | Ensure smooth interpolation between adjacent threshold colors |
| Noise too fine / busy | Lower scale (1.0-2.0) and octaves (1-2) |