# Very weird stuff going on with colors and transparency with the P2D renderer

**URL:** <https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924>\
**Category:** Coding Questions\
**Created:** [February 14, 2023, 8:01pm UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924 "2023-02-14T20:01:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![PianoMastR64](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pianomastr64/32/19124_2.png) [@PianoMastR64](https://discourse.processing.org/u/PianoMastR64)\
**Post date:** [February 14, 2023, 8:01pm UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/1 "2023-02-14T20:01:24Z")

</div>

```java
PGraphics pg;

void setup() {
  size(800, 800, P2D);

  pg = createGraphics(width, height, P2D);

  pg.beginDraw();

  pg.noStroke();

  pg.clear();

  pg.fill(255, 127);
  pg.rect(0, 0, 195, height);
  printColor(pg.get(10, 10));

  pg.endDraw();

  background(0);
  image(pg, 0, 0);
}

void draw() {
  pg.beginDraw();
  //pg.clear();

  pg.fill(255, 127);
  switch(frameCount) {
  case 1 :
    pg.rect(200, 0, 195, height);
    printColor(pg.get(210, 10));
    break;
  case 2 :
    pg.rect(400, 0, 195, height);
    printColor(pg.get(410, 10));
    break;
  case 3 :
    pg.rect(600, 0, 195, height);
    printColor(pg.get(610, 10));
    break;
  }

  pg.endDraw();

  background(0);
  image(pg, 0, 0);
}

void printColor(int c) {
  println("color RBGA: (" +
    red(c) + ", " +
    green(c) + ", " +
    blue(c) + ", " +
    alpha(c) + ")");
}

```

This is my attempt to figure out why my images are darker than they’re supposed to be sometimes, and I admit that I’m completely lost. It’s seriously messing up a project I’m trying to work on. Colors below are in RGBA format.

The 4 rectangles are supposed to be `255, 255, 255, 127` as I’ve set in the `fill()` methods. In the above code, the colors of the four rectangles are apparently `127, 127, 127, 127`. If you comment out `pg.clear();` in `setup()`, then the color of the fist rectangle is `229, 229, 229, 127` for some reason. Uncommenting `pg.clear();` in `draw()` doesn’t seem to make a difference (besides making it so you can’t see anything which is expected). When I analyze the colors using an image editor, then they’re `63, 63, 63` when they should be `127, 127, 127` because it’s drawn onto the primary `PGraphics` set to ` 0, 0, 0, 255`. In any case, I can’t get the first rectangle to even show up on screen.

Furthermore, If I change just the primary to the default renderer, it crashes. (I think this is supposed to be unsurprising, but makes the next result confusing.) If I instead change just `pg` to the default renderer _or_ I change both to the default renderer, then all the colors in all situations described above are correct. The first rectangle even shows up. Unfortunately I kind of need `P2D` because it’s way faster, and I’m doing something that requires a lot of computation.

I can’t make sense of any of this. All I want to do is draw a translucent shape onto a transparent `PGraphics` then draw that onto the primary without having all of these strange color anomalies.

I originally posted on the GitHub, but they directed me here. Am I just doing it wrong, or is this truly a bug?

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [February 16, 2023, 3:37am UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/2 "2023-02-16T03:37:04Z")

</div>

Hi, been experimenting for about an hour and yeah, cant seem to make sense of it either, I changed the renderer to JAVA2D instead of P2D for both the pg layer and the main and it helped on my end, maybe try that? Its got me stumped that even the first rect isn’t showing, its done in setup but you’re not clearing the pg at all so it should stay, when things break in P2D or P3D I generally try other renderers

---

<div class="post-metadata">

**Author:** ![PianoMastR64](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pianomastr64/32/19124_2.png) [@PianoMastR64](https://discourse.processing.org/u/PianoMastR64)\
**Post date:** [February 16, 2023, 5:33am UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/3 "2023-02-16T05:33:42Z")

</div>

Thanks for trying.

Btw, when I say “default renderer”, I’m referring to JAVA2D. (Or at least I’m pretty sure that’s correct. It’s weirdly difficult to find a definitive answer on that.) My goal here is to find out if this is a bug that needs to be fixed, or if I’m just ignorant on whatever the correct way is to do what I’m trying to do. If we find that it’s a bug, then I’ll have to ask for my GitHub issue to be reopened. It would also be nice to find out exactly what’s wrong, but I can only endure so much headache at a time

P2D is just so much faster and actually looks a little better for my specific use case

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [February 16, 2023, 5:46am UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/4 "2023-02-16T05:46:51Z")

</div>

Thats fair enough, did you actually use size(800,800,JAVA2D) or just size(800,800) ?  
Im not sure if java2d is the default or not but I have found sometimes using it like that works when I have issues, best of luck

---

<div class="post-metadata">

**Author:** ![PianoMastR64](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pianomastr64/32/19124_2.png) [@PianoMastR64](https://discourse.processing.org/u/PianoMastR64)\
**Post date:** [February 16, 2023, 5:50am UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/5 "2023-02-16T05:50:30Z")

</div>

I just verified that JAVA2D is the default renderer with this line:

```java
println("Renderer: " + g.getClass().getName());

```

I used `size(800,800)`

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [February 16, 2023, 5:56am UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/6 "2023-02-16T05:56:41Z")

</div>

Ok then, wasn’t sure about that either, sorry I couldn’t help then, must be an issue with P2D

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [February 16, 2023, 10:15am UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/7 "2023-02-16T10:15:58Z")

</div>

Check out [Add support for pre-multiplied alpha · Issue #3391 · processing/processing · GitHub](https://github.com/processing/processing/issues/3391)

Processing doesn’t use premultiplied alpha, and unlike the Java2D back-end, the OpenGL back-end doesn’t (and can’t easily) correct for this.

This is one difference when using the Processing nodes in [PraxisLIVE](https://www.praxislive.org/) as it uses premultiplied alpha throughout, which leads to correct behaviour.

---

<div class="post-metadata">

**Author:** ![PianoMastR64](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pianomastr64/32/19124_2.png) [@PianoMastR64](https://discourse.processing.org/u/PianoMastR64)\
**Post date:** [February 16, 2023, 4:49pm UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/8 "2023-02-16T16:49:26Z")

</div>

How willing are you to explain exactly what’s going on with my code and possibly how to fix it? This seems like quite a deep rabbit hole to plunge into alone.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 24, 2023, 3:20pm UTC](https://discourse.processing.org/t/very-weird-stuff-going-on-with-colors-and-transparency-with-the-p2d-renderer/40924/9 "2023-02-24T15:20:16Z")

</div>

Hello @PianoMastR64,

When using PGraphics I have always had a setup frame first; I may have encountered this issue in the past and in the habit of doing this now.  
This will get around that first frame behavior.

This code has the PG setup frame and will toggle between PGraphics renderers (P2D and JAVA2D):

```auto
PGraphics pg;

boolean toggle;

void setup() 
  {
  size(800, 800, P2D);

  if (toggle)
    {
    pg = createGraphics(width, height, JAVA2D);
    println("PG P2D");
    println("Renderer: " + g.getClass().getName());
    println("Renderer: " + pg.getClass().getName());
    }
  else
    {
    pg = createGraphics(width, height, P2D);
    //println("PG JAVA2D");
    println("Renderer: " + g.getClass().getName());
    println("Renderer: " + pg.getClass().getName());
    }

  //Setup frame workaround
  pg.beginDraw();
  //pg.clear();
  pg.endDraw();

  pg.beginDraw();
  pg.noStroke();
  //pg.clear();
  pg.fill(255, 127);
  pg.rect(0, 0, 195, height);
  println(hex(pg.get(10, 10)));
  pg.endDraw();

  background(0);
  image(pg, 0, 0);
  }

void draw() 
  {
  pg.beginDraw();
  //pg.clear();

  pg.fill(255, 127);
  switch(frameCount) {
  case 1 :
    pg.rect(200, 0, 195, height);
    println(hex(pg.get(210, 10)));
    break;
  case 2 :
    pg.rect(400, 0, 195, height);
    println(hex(pg.get(410, 10)));
    break;
  case 3 :
    pg.rect(600, 0, 195, height);
    println(hex(pg.get(610, 10)));
    break;
    }

  pg.endDraw();

  background(0);
  image(pg, 0, 0);
  }

void keyPressed()
  {
  toggle = !toggle;
  frameCount = -1; // See https://discourse.processing.org/t/about-restarting/22557/3
  }

```

That still leaves the color mixing issues/behavior mentioned previously.

Reference:  
[https://discourse.processing.org/t/about-restarting/22557/3](https://discourse.processing.org/t/about-restarting/22557/3)

`:)`