# Trails with background Transparency

**URL:** <https://discourse.processing.org/t/trails-with-background-transparency/17139>\
**Category:** Coding Questions\
**Created:** [January 17, 2020, 2:16pm UTC](https://discourse.processing.org/t/trails-with-background-transparency/17139 "2020-01-17T14:16:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [January 17, 2020, 2:16pm UTC](https://discourse.processing.org/t/trails-with-background-transparency/17139/1 "2020-01-17T14:16:01Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cd3b79094af7df64c090b9550c479a050c3d64e3.gif)

The code:

```auto
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);
  //}
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 18, 2020, 4:28am UTC](https://discourse.processing.org/t/trails-with-background-transparency/17139/2 "2020-01-18T04:28:46Z")

</div>

even if different system, point might be same:

> [@Repeated alpha not reaching full opacity](https://discourse.processing.org/t/repeated-alpha-not-reaching-full-opacity/16890):
>
> Hello, I’m using a rectangle filled with white and a certain alpha value at the beginning of draw, and I would think that if done enough times that eventually the first thing drawn in setup would eventually be totally white. I’ve tested and it only becomes totally white if the alpha value is 128 or above. For example, see if with this code the red circle ever becomes fully white: float x0, y0; float angle0, angleC; float radius = 5; int bg = 255; int alph = 10; // try up to 127 void setup(…

```auto
background(0,alpha);

```

is NOT adding up as expected…

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [January 18, 2020, 12:22pm UTC](https://discourse.processing.org/t/trails-with-background-transparency/17139/3 "2020-01-18T12:22:17Z")

</div>

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](https://discourse.processing.org/t/repeated-alpha-not-reaching-full-opacity/16890/7)

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** :

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d6c2a8e5b7af159de87f20861c3e4d206e8bfa6b.gif)

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0f643b9f7cc10ee27e2354b181e5ae03c14d2e11.gif)

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

 ![gifP5White](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/81d7bb277e4dda1f347af1805ac82bb0305b40c6.gif)

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

 ![gifP5Black](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/013462037ce6037a551a29aa97fe8d359038cdbf.gif)

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](https://p5js.org/reference/#/p5/blendMode)

Working **Processing** code:

```auto
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:

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

```