Manually calculate additive blendmode with pixels[]

p5.js Coding Questions
1

Hi,

I’m currently coding a program in which I draw some random generated patterns like this :

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

When two ore more points get supperposed, they are displayed with additive BlendMode.
As the number of point is quite big, it slows down the simulation a lot. I tried to adapt this code with the pixels method like bellow to speed up things :

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

The issue is that i dont know how to generate the R,G,B,A value so that it behave with additive Blending like my first version.
Is there a way to manually calculate this ? I tried with formulas i found but after some tests, the results are different.

Thanks in advance

2

What did you try? Do you have sketches you made? It would be helpful to post complete sketches (not meaning functional but the whole sketch not a snippet) for others to debug!

Additive blending is literally adding r, g, b channels independently (assuming alpha is opaque).