颜色比例取决于绘制点的频率（JS Canvas）

Question

最近我创建了一个项目，涉及在画布上绘制很多点来绘制一个奇怪的吸引子。这个项目的细节并不真实，但是如果你想看到它的实际效果，请点击这里：How can I check if an attractor is strange?

我遇到的问题如下：如何在画布上绘制一个点，其颜色取决于已经存在的颜色？换句话说：我如何实现一个取决于该次数的颜色标度，一个特定的点已被着色？

我实际上找到了一种方法，但我不相信它是否是最好的。以下是它的工作原理：

ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = "rgb(50,5,1)";
ctx.fillRect(x,y,size,size);

它只是增加了已经存在的颜色。这看起来非常不错：

但使用此方法时也存在很多限制：

• 我无法将颜色从绿色变为红色，例如
• 在白色背景上使用此方法是不可能的
• 我无法创建包含超过＆＃34;固定点＆＃34;的色阶，例如red-＆gt; green-＆gt; blue

也许你知道比我更好的方法......

Answer 1

我认为您需要跟踪每个像素的点击数，以实现一个允许您更改图片颜色的功能，而不仅仅是亮度或红色。如上所述，您应该使用多维数组来跟踪每个像素的匹配。

var canvasPixels = [];
for (var y = 0; y < 1000; y++) {
    canvasPixels[y] = [];
    for (var x = 0; x < 1000; x++) {
    canvasPixels[y][x] = 0;
  }
}

如果您自己应用颜色数学，则可以执行许多操作。我在这里使用的是彩色正弦波。

function getColor(hits) {

  var frequency = 0.3;
  var r = Math.round(Math.sin(frequency*hits + 0) * 127 + 128);
  var g = Math.round(Math.sin(frequency*hits + 2) * 127 + 128);
  var b = Math.round(Math.sin(frequency*hits + 4) * 127 + 128);

  return "rgb(" + r + "," + g + "," + b + ")";
}

然后，你只需在绘制时使用此功能来循环彩虹。

canvasPixels[y][x]++;
ctx.fillStyle = getColor(canvasPixels[y][x]);
ctx.fillRect(x,y,size,size);