P5.js：手动计算带像素的加法混合模式[]

问题描述

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

function setup() {
     colorMode(RGB,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 显示。由于点的数量相当大，它会大大减慢模拟速度。我尝试使用如下所示的像素方法调整此代码以加快速度：

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

提前致谢

解决方法

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

这是一个演示代码片段：

function setup() {
  createCanvas(400,400);

 background(color(0,255,0));
}

function draw() {
}

function mouseClicked() {
  let blendColor = color(128,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）的两种颜色，则不会出现任何堆栈溢出，因此您可以多次单击不怕撞车。

希望有帮助。玩得开心！

blending pixel processing processing processing