P5.js:手动计算带像素的additive blendmode[]

Question

我目前正在编写一个P5.js程序，其中我绘制了一些随机生成的模式，如下所示:

function setup() {
colorMode(RGB, 255, 255, 255, 255);
blendMode(ADD);
}
function draw() {
for(var i = 0; i < 20000; i++)
{
x = generateCoordinatesX();
y = generateCoordinateY();
var pointColor = generateColor(); //rgba
stroke(pointColor);
point(x, y);
}
}

当两个或两个以上的点被叠加时，它们将以添加的BlendMode显示。由于点的数量非常大，这大大降低了模拟速度。我试图用像bellow这样的像素方法来调整这段代码，以加快速度:

function draw() {
loadPixels();
for(var i = 0; i < 20000; i++)
{
x = generateCoordinatesX();
y = generateCoordinateY();
var index = (x + y * width)*4;

pixels[index+0] += ???;
pixels[index+1] += ???;
pixels[index+2] += ???;
pixels[index+3] += ???;
}
updatePixels();
}

问题是，我不知道如何生成R,G,B,A值，使它的行为与添加混合像我的第一个版本。有办法手动计算这个吗?我试着用我找到的公式，但经过一些测试，结果不同。

Thanks in advance

Answer 1

有很多非常有用的方法可以为您填写这些信息。它们分别被命名为red,green,blue和alpha，你可以用它们从已知的颜色中提取相关信息。

这里有一个代码片段来演示:

function setup() {
createCanvas(400, 400);
background(color(0, 255, 0));
}
function draw() {
}
function mouseClicked() {
let blendColor = color(128,0,0);
let density = pixelDensity();

loadPixels();
for (var i=0; i<width*height*density*4; i+=4)
{
pixels[i] += red(blendColor);
pixels[i+1] += green(blendColor);
pixels[i+2] += blue(blendColor);
pixels[i+3] += alpha(blendColor);
}
updatePixels();
}

单击画布后，它将通过将blendColor添加到像素数组来更新背景颜色。我特意选择了一种你可以混合多次的颜色，以证明如果你尝试混合两种颜色，强度应该超过8位(255)，不会有任何堆栈溢出，所以你可以多次点击而不用担心崩溃。

希望有帮助。玩得开心!