algorithm - 画一个颜色选择器，比如 Fresh Paint

Question

我喜欢 Fresh Paint 色环的外观，并想在我即将到来的项目中克隆它。但是，我找不到圆圈的 HSV 或 RGB 分布模式。这是一个例子：

我猜右边的滑块是用于从 0 到 360 的 H 值。但我不知道如何用该 H 值制作圆圈。请给我它的公式/模式。

Answer 1

我还没有看到这一点，但看起来他们使用的是色度而不是饱和度，并且已经将亮度和色度映射到（某种）极坐标。因此色度随与中心的距离而变化，而值/亮度随 y 坐标而变化。

本质上，结果是圆的中间是明亮的、完全饱和的颜色，而边缘是灰度的。颜色从中心到边缘线性插值。

我最初认为这可能是直极坐标，但我怀疑它已被简化为仅使用 y 而不是角度。

本质上，边缘的去饱和灰度是从上到下的线性白到黑渐变（不会像极坐标那样随角度变化）。中心的颜色是用侧面的色调选择器选择的饱和颜色，然后中间的所有颜色都被线性插值。

所以在伪代码中：

let x, y be points in the circle, range -1 to 1.
let red, grn, blu be the center colour value.
let lerp(a, b, t) = (a * (1 - t) + b * t)

r = sqrt(x * x + y *y)               // calculate radial co-ordinate
                                     // reject points r > 1 (outside circle)
grey_value = (y + 1) / 2             // calculate de-saturated value, 0 to 1.
final_red = lerp(red, grey_value, r) // lerp the RGB from the center to the edge.
final_grn = lerp(grn, grey_value, r)
final_blu = lerp(blu, grey_value, r)

显然那不是特别理想，也不会画出漂亮的抗锯齿边缘。预先计算具有灰度渐变的纹理和基于 'r' 的 alpha 蒙版可能会快得多，它可以在纯色圆圈的顶部进行 alpha 混合。

Answer 2

在我看来，Y 轴是亮度，底部是黑色，顶部是白色，X 轴是饱和度，中心完全饱和，每个边缘完全去饱和。当然这给了你一个正方形，所以你需要把它映射到一个圆圈。输入数学方面的优秀人员：https ://math.stackexchange.com/questions/103660/homeomorphism-from-square-to-unit-circle