# Agnostic Transparencies

**URL:** https://discourse.processing.org/t/agnostic-transparencies/22997
**Category:** Coding Questions
**Created:** [August 2, 2020, 4:39pm UTC](https://discourse.processing.org/t/agnostic-transparencies/22997 "2020-08-02T16:39:52Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Aleksi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/aleksi/32/11065_2.png) [@Aleksi](https://discourse.processing.org/u/Aleksi)
#### Post date: [August 2, 2020, 4:39pm UTC](https://discourse.processing.org/t/agnostic-transparencies/22997/1 "2020-08-02T16:39:53Z")

</div>

Hi there. Is there any way to draw transparent objects that allow them to stay transparent no matter which order they’re drawn?

Here’s a gif demonstrating how the order in which they’re drawn affects an object’s transparency relative to ones drawn after it:

![TransparencyTest](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fa9cfd5e14da3e5414c209cb183f58e67b54a13e.gif)

Is there any straightforward way to draw the red & blue shapes that allow both to be transparent? Since they’re both the same distance from camera we can’t use any depth sorting, nor `Comparable.compareTo()` since I won’t be able to privilege one dimension or field over another.

Here’s the code in its entirety:

```auto

// TEST SURFACE TRANSPARENCIES BASED ON CREATION ORDER //

PShape psRed, psBlu;

void setup(){
  size(300,300,P3D);
  //hint(ENABLE_DEPTH_SORT); doesn't apply
  psRed = surf(150, 100, -50, color(255, 0, 0, 80), color(255, 255, 0, 150), 5);
  psBlu = surf(150, 100, 50, color(0, 0, 255, 80), color(0, 255, 255, 150), 5);
  fill(0, 255, 0, 100); noStroke();
}

void draw(){
  background(255);
  pushMatrix(); translate(width/2, height/2);
  rotateY(frameCount*.01);
  
  // upper sphere visible because drawn first
  pushMatrix(); translate(0, -25); sphere(10); popMatrix(); 
  
  shape(psRed, 0, 0); // red obscures blue because red drawn first
  shape(psBlu, 0, 0);
  
  // lower sphere obscured because drawn last
  pushMatrix(); translate(0, 25); sphere(10); popMatrix(); 
  
  popMatrix();
}

PShape surf(float dim1, float dim2, float dist, color fcol, color scol, float sw){
  // build surface on YZ plane //
  PShape ps = createShape();
  ps.beginShape();
  ps.fill(fcol);
  ps.stroke(scol);
  ps.strokeWeight(sw);
  ps.vertex(dist , -dim1/2 , -dim2/2);
  ps.vertex(dist , dim1/2 , -dim2/2);
  ps.vertex(dist , dim1/2 , dim2/2);
  ps.vertex(dist , -dim1/2 , dim2/2);
  ps.endShape(CLOSE);
  return ps;
}

```

---

<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: [August 2, 2020, 8:08pm UTC](https://discourse.processing.org/t/agnostic-transparencies/22997/2 "2020-08-02T20:08:53Z")

</div>

Hello,

I do not have an answer to your question but I did learn a new term:

> **[Agnostic (data)](https://en.wikipedia.org/wiki/Agnostic_(data))**
>
> In computing, a device or software program is said to be agnostic or data agnostic if it does not know or does not care in what manner the data it receives was sent to it, any programming language used, the underlying operating system or protocols used to transmit it. This can mean, for example, that a device supports both USB and FireWire, and doesn't care which of these interfaces the data arrived on. 
> For a software program, the data might be read from a local file, a network port, a pipe, or...

`:)`

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [August 2, 2020, 8:17pm UTC](https://discourse.processing.org/t/agnostic-transparencies/22997/3 "2020-08-02T20:17:09Z")

</div>

Transparency does not seem to properly be applied in your example. You find a slightly improvement by adding in setup:

```auto
hint(DISABLE_DEPTH_TEST);
hint(ENABLE_DEPTH_SORT);

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b165caf48dab586a7c141622f1b8199accb9115e.png)  
Now you can see the top sphere shows transparency but the bottom sphere does not have any. I do not have an immediate solution but I would like to record the next two post for reference:

- Previously similar issue: [Draw-order based transparency issue](https://discourse.processing.org/t/draw-order-based-transparency-issue/22675)
- [Draw order in 3D](https://discourse.processing.org/t/draw-order-in-3d/4789/14)

Kf

---

<div class="post-metadata">

### Author: ![Aleksi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/aleksi/32/11065_2.png) [@Aleksi](https://discourse.processing.org/u/Aleksi)
#### Post date: [August 2, 2020, 9:06pm UTC](https://discourse.processing.org/t/agnostic-transparencies/22997/4 "2020-08-02T21:06:43Z")

</div>

Thanks, @kfrajer, most grateful! 😀

I didn’t know about the first hint, thanks for sharing it, as well as the links.

I mostly care about the `PShapes`; the spheres were used for illustration purposes. But I was interested to see if the spheres were affected by the surface’s colors.

Here’s a gif of the original with the new hint:

![TransparencyTest.2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f32cb68ca86d5802881da10764014c1c3fb1c9a4.gif)

Here’s a gif where I make both surfaces red (though they don’t seem like the same color due to the [simultaneous contrast](https://www.colorduels.com/what-is-simultaneous-contrast/) of their frames:

![TransparencyTest.3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/013a3f1682882e52da8240e098fc8ea96de201e8.gif)

Seems the spheres use a different shading strategy…

Thank you again! Life can now continue…

Adding a couple more pertinent links Kf’s links led to:

- [Program to test hint() with transparency](https://discourse.processing.org/t/program-to-test-hint-with-transparency/4361) (excellent forum post)
- [hint()](https://processing.org/reference/hint_.html) (processing ref doc)
