# Png loses alpha when use rotate function,

**URL:** <https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450>\
**Category:** Processing\
**Created:** [November 13, 2019, 7:00am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450 "2019-11-13T07:00:03Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 7:00am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/1 "2019-11-13T07:00:03Z")

</div>

How come the png alpha doesn’t work when rotating in P3D?  
.png files included below

```auto
PImage img1, img2;
int x = 1;

void setup() {
  size(900, 600, P3D);

  img1 = loadImage("circle.png");
  img2 =loadImage("square.png");
}

void draw() {
  background(255);
  translate(width/2, height/2);
  pushMatrix();
  image(img1, 0, 0, 300, 300);
  rotateX(radians(x));
  image(img2, -150, 0, 300, 300);
  popMatrix();

  x++;
}
```

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 7:01am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/2 "2019-11-13T07:01:02Z")

</div>

![square](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/df68273320716b8b3ace714d314fcd22a456cf1d.png)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 7:01am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/3 "2019-11-13T07:01:36Z")

</div>

![circle](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9f476b107e7b4f951137ee9f8ed99db1f0d4906e.png)

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 13, 2019, 7:46am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/4 "2019-11-13T07:46:41Z")

</div>

It’s working, but I think `square.png` is causing the confusion. The image is 300x300 pixels, of which the edges are fully transparent. If these weren’t, the circle would vanish every now and then. The centre of the squared image is opaque though.

Try using this image instead, where the entire image is transparent:

![square2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/79310d6a65c035b766b9144c767e8a824d31a381.png)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 7:53am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/5 "2019-11-13T07:53:59Z")

</div>

no it’s not… using your file the square is still blocked by the circle png where it should be transparent…

 ![07%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/591519c6bb8011aef82f104f8bb4e5657f0bfc97.jpeg)

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 13, 2019, 7:58am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/6 "2019-11-13T07:58:57Z")

</div>

That’s odd, I don’t have that.

 ![screenshotAlpha](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f5319a2a098beba855ab82a7f70167d97a166e53.png)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 8:05am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/7 "2019-11-13T08:05:05Z")

</div>

wow… this is odd… maybe a bug for specific version? I am using Processing 3.4 and OSX High Sierra 10.13…

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 8:10am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/8 "2019-11-13T08:10:39Z")

</div>

I notice in this picture, your square is already in front of the circle.png. when it’s in the back, it’s not blocked by the alpha of the circle.png?

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 8:11am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/9 "2019-11-13T08:11:20Z")

</div>

downloaded 3.5.3, still the same…

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 13, 2019, 8:12am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/10 "2019-11-13T08:12:46Z")

</div>

You’re right, the moment it gets behind the circle it gets blocked as well. Similar to the screenshot you’ve send. And the circle image _is_ transparent, so that can’t be it

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 13, 2019, 8:17am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/11 "2019-11-13T08:17:45Z")

</div>

Ah, figured out how to fix it. Add the following code in `void setup()`:

```auto
hint(ENABLE_DEPTH_SORT);

```

more info on [https://github.com/processing/processing/wiki/Troubleshooting](https://github.com/processing/processing/wiki/Troubleshooting) (search for _Objects with alpha_)

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [November 13, 2019, 8:24am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/12 "2019-11-13T08:24:15Z")

</div>

Something similar to [this?](https://discourse.processing.org/t/transparent-images/3337/7)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 8:30am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/13 "2019-11-13T08:30:30Z")

</div>

Thanks Tiemen, `hint(ENABLE_DEPTH_SORT);` works on the sketch above, but doesn’t work on my other messier sketch which has 150+ img doing rotating, but Waboqueox’s suggestion does work! when added

```auto
hint(DISABLE_DEPTH_TEST);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_DEPTH_MASK);

```

Thank you Tiemen and Waboqueox

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 8:34am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/14 "2019-11-13T08:34:14Z")

</div>

just try to understand a bit more, I added

```auto
hint(DISABLE_DEPTH_TEST);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_DEPTH_MASK);

```

on the sketch above, it works too.  
but one suggest `hint(DISABLE_DEPTH_SORT);`  
the other is `hint(ENABLE_DEPTH_SORT);`  
how come they both work…?

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [November 13, 2019, 8:44am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/15 "2019-11-13T08:44:53Z")

</div>

[https://processing.org/reference/hint\_.html](https://processing.org/reference/hint_.html) 😅😅 checked it a time ago but don’t remember…

If later you don’t need it in your code, don’t forget to add:

```auto
hint(ENABLE_DEPTH_TEST);
hint(ENABLE_DEPTH_SORT);
hint(ENABLE_DEPTH_MASK);

```

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 8:51am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/16 "2019-11-13T08:51:04Z")

</div>

Will give it read, thanks Waboqueox!

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 13, 2019, 8:54am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/17 "2019-11-13T08:54:45Z")

</div>

> [@Program to test hint() with transparency](https://discourse.processing.org/t/program-to-test-hint-with-transparency/4361):
>
> A small Processing program to test the effect on transparency of enabling and disabling these settings: hint(DISABLE\_DEPTH\_TEST); // or ENABLE\_ hint(DISABLE\_DEPTH\_SORT); // or ENABLE\_ hint(DISABLE\_DEPTH\_MASK); // or ENABLE\_ boolean b[] = new boolean[3]; void setup() { size(800, 600, P3D); hint(DISABLE\_DEPTH\_TEST); hint(DISABLE\_DEPTH\_SORT); hint(DISABLE\_DEPTH\_MASK); } void draw() { background(255); fill(0); text("DEPTH\_TEST " + b[0]…

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [November 13, 2019, 8:59am UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/18 "2019-11-13T08:59:30Z")

</div>

This is very clear visually, thank you hamoid!

---

<div class="post-metadata">

**Author:** ![neari](https://avatars.discourse-cdn.com/v4/letter/n/ac91a4/32.png) [@neari](https://discourse.processing.org/u/neari)\
**Post date:** [November 13, 2019, 4:37pm UTC](https://discourse.processing.org/t/png-loses-alpha-when-use-rotate-function/15450/19 "2019-11-13T16:37:53Z")

</div>

Have you tried doing a resetMatrix [https://processing.org/reference/resetMatrix\_.html](https://processing.org/reference/resetMatrix_.html)  
Since the result isn’t clearly in displaying alpha. And you might want to use .svg instead of .png, I don’t know if .png is alpha processed with or without, while .svg is define for alpha masking. Hope this helps.