Trails with background Transparency

p5.js Coding Questions
3

Thanks for this link, yeah that seems to be the same problem

On the other topics it is suggested to use blendMode(ADD) to fix this, and it seemed to work for mortap:
https://discourse.processing.org/t/repeated-alpha-not-reaching-full-opacity/16890/7?u=skranker

However, the solution with blendMode(ADD); seems to behave very differently depending on where you use it, i did some experimentation, as it didn’t seem to be working in my sketch:

This is the way that mortap used it, with a white background and black trail:

void setup() {
  size(400, 400);
}

void draw() {
  
  blendMode(ADD);
  fill(0, 3);
  rect(0,0,width,height);
  blendMode(BLEND);

  stroke(255);
  strokeWeight(5);
  point(mouseX, mouseY);
}

It looks like this and seems to be working fine with no permanent trails:

gifProcessingWhite
gifProcessingWhite701×311 350 KB

If i do this with reversed colors, a black background and a white trail, it doesnt seem to work at all.
The background only gets to color(205, 205, 205), and there is no transparency applied:

gifProcessingBlack
gifProcessingBlack701×311 167 KB

in p5, it also works perfectly with the white background:

gifP5White
gifP5White995×321 185 KB

But with the black background, there is no transarency, even though the background here is not (205, 205, 205) but black.

gifP5Black
gifP5Black995×321 128 KB

Not sure what i’m missing here, would really like to keep the workflow with background transparency and not go with an array for the trails.

UPDATE:

So we got this solution with blendMode(SUBTRACT) from the processing thread, i cant seem to get this working with p5 though, as the subtract blend mode appears to only work with webGL.

https://p5js.org/reference/#/p5/blendMode

Working Processing code:

void setup() {
  size(400, 400);
  stroke(255);
  strokeWeight(5);
  background(0);
}

void draw() {
  blendMode(SUBTRACT);
  fill(255, 3);
  rect(0, 0, width, height);
  blendMode(BLEND);
  point(mouseX, mouseY);
}

This does not seem to be the answer:

p5js code NOT working:

function setup() {
  createCanvas(400, 400, WEBGL);
  stroke(255);
  strokeWeight(5);
  background(0);
}

function draw() {
  blendMode(SUBTRACT);
  fill(255, 3);
  rect(0, 0, width, height);
  blendMode(BLEND);
  point(mouseX, mouseY);
}
1 Like