Here's another bloody color picker
It's not done yet. I'm just experimenting with the canvas at this point.
| Currently moused-over color |
|
| Currently selected color |
|
This is an optimized version of the color picker. It's not quite as fast as it could be, but it's a lot faster than the original version. This version was built using gpt-5.3-codex with the focus on optimizing the code for performance.
The original version is here, and was written back in 2013 back when I thought I had optimized it as far as I could. Turns out I was wrong! the original version had a number of issues:
Optimization Summary
This demo uses an optimized rendering path for the original canvas-based color wheel.
The goal was to keep behavior the same while reducing wheel generation time and improving UI responsiveness.
What Was Slow In The Original
- Heavy per-pixel math in hot loops (`sqrt`, `atan2`, HSL conversion).
- Rendering split across many tiny
setTimeout(..., 0) calls.
- Progress UI repainting too often during wheel generation.
- Full-canvas redraw work happening during mouse hover updates.
What Changed In This Optimized Version
- Precomputed geometry cache (pixel offsets, hue, luminance) reused across saturation levels.
- Single-pass wheel generation per saturation cache miss.
- Normalized saturation cache keys to fixed integer buckets (
0..100).
- Direct pixel writes with a hot-path converter to reduce allocations.
- Overlay canvas for hover/selection markers so mouse movement avoids wheel redraws.
Expected Result
- Faster first-time generation of each saturation level.
- Smoother interaction when moving across the wheel.
- Better scaling as the number of cached saturation states increases.
Original project: github.com/gaberankin/color-picker