# Successive draws of a transparent object don't end up fully opaque?

**URL:** <https://discourse.processing.org/t/successive-draws-of-a-transparent-object-dont-end-up-fully-opaque/23715>\
**Category:** Coding Questions\
**Created:** [September 6, 2020, 9:09pm UTC](https://discourse.processing.org/t/successive-draws-of-a-transparent-object-dont-end-up-fully-opaque/23715 "2020-09-06T21:09:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pablohotsauce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pablohotsauce/32/10113_2.png) [@pablohotsauce](https://discourse.processing.org/u/pablohotsauce)\
**Post date:** [September 6, 2020, 9:09pm UTC](https://discourse.processing.org/t/successive-draws-of-a-transparent-object-dont-end-up-fully-opaque/23715/1 "2020-09-06T21:09:38Z")

</div>

In this example, I draw a semi-transparent black rectangle to cover the canvas on every run-through of draw(), to gradually cover up and darken the results of the stuff I’d drawn in all previous draw() runs. Shouldn’t the previously-drawn elements (lines and ellipses) eventually turn fully black? Instead, they just turn a dark gray, and stay that way forever. I tried out different draw modes (P2D, P3D), no change. Searched, didn’t find an answer.

Example screenshot, code below:  
 ![p_walker_01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5abc8f3295d14045b67473c22a3a82afed708e0f.jpeg)

```auto
float x1, y1, x2, y2; 
int pad = 20;
int roam = 100;
int radiusE = 8;

void setup() {
  size(600, 400);
  background(0);
  frameRate(30);
  
  x1 = random(0 + pad, width - pad);
  y1 = random(0 + pad, height - pad);
}

void draw() {
  rectMode(CORNERS);
  fill(0, 5); // transparent black
  rect(-2, -2, width + 2, height + 2); // draw transparent rect
  
  x2 = random(x1 - roam, x1 + roam);
  y2 = random(y1 - roam, y1 + roam);
  x2 = constrain(x2, 0 + pad, width - pad);
  y2 = constrain(y2, 0 + pad, height - pad);
  
  color color1 = color(random(64, 128), random(64, 128), random(192, 255));
  
  fill(color1);
  strokeWeight(2);
  stroke(color1);
  
  // draw horiz line
  line(x1, y1, x2, y1);
  ellipse(x2, y1, radiusE, radiusE);
  
  // draw vertical line
  line(x2, y1, x2, y2);
  ellipse(x2, y2, radiusE, radiusE);
  
  x1 = x2;
  y1 = y2;
}

```

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 7, 2020, 1:05am UTC](https://discourse.processing.org/t/successive-draws-of-a-transparent-object-dont-end-up-fully-opaque/23715/2 "2020-09-07T01:05:34Z")

</div>

Works with white background. I had this many times before…  
It seems to be an issue with black… For me it starts working at about fill(0,16);  
But you cannot control how long it takes to fade.

The same goes for using a PGraphics…

Although I imagine you could use a number of PGraphics and put them on top of each other, drawing into them one after another each frame. When you reached the topmost PGraphics, clear the one in the back, push it up to the front and draw into it…

So you can clear the backlist one being 100% sure nothing is shown.

Seems completely overkill to me.  
Maybe someone else knows better 🙂

OR: Use two PGraphics.  
Draw into the first. -\> copy that into the second and use tint to fade it  
First on top on the second.  
Clear the first completely, draw into it, copy to second, fade.  
maybe that works. As complicated…

---

<div class="post-metadata">

**Author:** ![pablohotsauce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pablohotsauce/32/10113_2.png) [@pablohotsauce](https://discourse.processing.org/u/pablohotsauce)\
**Post date:** [September 7, 2020, 4:03am UTC](https://discourse.processing.org/t/successive-draws-of-a-transparent-object-dont-end-up-fully-opaque/23715/3 "2020-09-07T04:03:41Z")

</div>

Yeah, maybe it’s a quirk of however the compositing happens, I dunno. I just tried setting the blend mode of the rect’s fill to something like `blendMode(DARKEST)`, and that happens to fix the problem in this particular case, but it’s not what you’d always want.

I hadn’t heard of `PGraphics` or `tint()` before this, so I looked them up, spent time trying to rig up a shifting array of tinted frame buffers, trying different combinations of things, and … still didn’t work lol. The buffers composited weirdly too. Oh well, at least I learned some new stuff.

---

<div class="post-metadata">

**Author:** ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)\
**Post date:** [September 8, 2020, 6:55pm UTC](https://discourse.processing.org/t/successive-draws-of-a-transparent-object-dont-end-up-fully-opaque/23715/4 "2020-09-08T18:55:56Z")

</div>

You can achieve it going to total black by using the blendMode() to SUBTRACT then filling with near black, then setting the blendMode() back to BLEND (or ADD, or whatever):

```auto
  blendMode(SUBTRACT);
  rectMode(CORNERS);
  fill(1); // almost black – no need for alpha
  rect(-2, -2, width + 2, height + 2); // draw transparent rect
  blendMode(BLEND);

```

Hope this helps.