processing - P5.js : manually calculate additive blendmode with pixels[]

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

当假设有两个或多个点时，它们会以附加混合模式显示。由于点数很大，它会大大减慢模拟速度。我尝试使用像下面这样的像素方法来调整此代码以加快速度:

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 值，以便它像我的第一个版本一样使用加法混合。有没有办法手动计算这个？我尝试使用找到的公式，但经过一些测试后，结果有所不同。

提前致谢

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

单击 Canvas 后，它会通过将 blendColor 添加到像素数组来更新背景颜色。我特意选择了一种您可以多次混合的颜色，以证明如果您尝试混合两种强度应该超过 8 位 (255) 的颜色，则不会出现任何堆栈溢出，因此您可以多次单击不用担心撞车。

希望对您有所帮助。玩得开心!