Generating a color spectrum for an image
2 days ago
- #image-processing
- #data-visualization
- #color-spectrum
- Started with median cut quantization: splits colors into equally sized buckets, good for compression but not for visualizing distribution as it ignores color frequency.
- Switched to hue histogram: uses hue bins that reflect frequency and follow ROYGBIV order, but averaging within coarse bins leads to muddied colors and loss of nuance.
- Implemented pixel-level sorting by hue: attempts to render many small chunks for smoothness, but results in striping artifacts due to variance in lightness within hue groups.
- Tried band sorting with lightness: sorts pixels dark to light within hue bands to control order, but still causes striping and periodic discontinuities.
- Refined to continuous hue with degree-level sorting: groups by integer hue and sorts by lightness within each degree, yet striping persists with resets between degrees.
- Moved to canvas rendering with smoothing: averages colors over neighboring columns to reduce banding, but artifacts remain due to one-dimensional ordering of multi-dimensional data.
- Breakthrough with two-dimensional visualization: uses hue on x-axis and lightness on y-axis, with column height showing frequency, allowing display of tints, shades, and abundance for each hue.
- Special handling for black and white images: switches x-axis to lightness when image is mostly achromatic, maintaining frequency-based column heights to show tonal character.
- Process details: image is downscaled to 300px on longest side, pixels converted to HSL, achromatic pixels separated, hue binned into 2-degree slices, sorted by lightness, and averaged into shades, pure colors, and tints using 20% slices for robustness.
- Rendering: canvas draws columns with linear gradients from tint to shade, heights proportional to pixel count, all processed client-side quickly without external dependencies.