javascript - 颜色比例取决于绘制点的频率(JS Canvas)

Question

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

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

我确实找到了一种方法，但我不确定它是否是最好的。这是它的工作原理:

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

它只是添加到已经存在的颜色上。这看起来已经很不错了:

但是使用这种方式也有很多限制:

• 例如，我无法将颜色从绿色变为红色
• 在白色背景上使用此方法是不可能的
• 我无法创建包含超过“固定点”的色阶，例如红色->绿色->蓝色

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

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);