javascript - 如何从 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
  };

}