如何从 x,y 坐标到唯一的 RGB 值？

Question

我正在尝试为屏幕上的每个 x,y 坐标生成唯一的 RGB 值（我在 JS 中这样做）。

每个 RGB 值至少出现一次并不重要，但重要的是每个确实出现的 RGB 值都是唯一的（并非所有颜色都需要出现，但不能有重复的颜色） .

我看到很多人建议使用 HSL/HSV 来确保使用所有颜色，但是因为在我的情况下这不是必需的，所以我想知道是否有更简单的方法。

我想出的方法如下：

var x = event.pageX/window.screen.width;
var y = event.pageY/window.screen.height;
var z = 1-x-y;

var r = parseInt(x*255);
var g = parseInt(y*255);
var b = parseInt(z*255);

我将 x 和 y 坐标转换为 0 到 1 之间的值，从这两个坐标中得到 z，然后乘以 255 得到 0-1 到 1-255 之间的值。

虽然这是功能性的，但在 x~0.5 和 y~0.5 周围有重复的颜色，它遗漏了相当大一部分 RGB 色谱。

有谁知道在保持相对简单的情况下执行此操作的更好方法吗？

Answer 1

假设 x 和 y 适合 12 位，您将得到 24 位，正好是三种 8 位颜色的正确数字。因此，这将为高达 4096x4096 的屏幕的每个像素生成独特的颜色。

function xy_to_rgb(x,y) {
  var t = x&0xFFF | (y<<12)&0xFFF;

  return {
    r: t&0xFF,
    g: (t>>8)&0xFF,
    b: (t>>16)&0xFF
  };

}

如何从 x,y 坐标到唯一的 RGB 值？

How to go from x,y coordinates to unique RGB value?

javascript

rgb