Trails with background Transparency

p5.js Coding Questions
1

Hey everyone,

i’m using
background(0, 10);
to get a trail effect, but i get these weird permanent trails that dont go away. Usually the screen should be black again if the background has been drawn enough times. Not sure where they come from, anyone got an idea?

Gif for reference:

trailGif

The code:

let sinAngle = 0;
let diameter = 200;

function setup() {
  createCanvas(screen.width, screen.height);
  angleMode(DEGREES);
  frameRate(80);

}

let symmetry = 6;

function draw() {
  background(0, 2);

  //console.log(frameRate());

  translate(width / 2, height / 2);

  let mx = mouseX - width / 2;
  let my = mouseY - height / 2;
  let pmx = pmouseX - width / 2;
  let pmy = pmouseY - height / 2;



  //if (mouseIsPressed) {
    stroke(255);
    let angle = 360 / symmetry;
    let rotation;

  sinAngle += 0.9;
    for (let i = 0; i < symmetry; i++) {
      //smooth();
      rotate(angle);
      let d = dist(mx, my, pmx, pmy);
      let sw = map(d, 0, 20, 1, 5);
      strokeWeight(sw);
      line(mx, my, pmx, pmy);
      //fill(0);
      push();

      let d2 = 600 + (sin(sinAngle) * 800) / 2 + 800 / 2;
      rotation = frameCount/(mouseX/100)
      rotate(rotation);



      let d1 = 15 + (sin(sinAngle) * 200) / 2 + 200 / 2;

      rect(d1, 0, 20, 20);
      pop();


      //point(mx, my);
    }
    console.log(rotation);
  //}
}
2

even if different system, point might be same:

background(0,alpha);

is NOT adding up as expected…

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