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

【问题标题】：How to go from x,y coordinates to unique RGB value?如何从 x,y 坐标到唯一的 RGB 值？
【发布时间】：2020-05-16 04:07:22
【问题描述】：

我正在尝试为屏幕上的每个 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 色谱的相当大一部分。

有没有人知道一种更好的方法来做到这一点，同时仍然保持相对简单？

【问题讨论】：

var z = x; 可以工作。

标签： javascript rgb

【解决方案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
  };

}

【讨论】：