# Transparent images

**URL:** <https://discourse.processing.org/t/transparent-images/3337>\
**Category:** Processing\
**Created:** [September 7, 2018, 12:36am UTC](https://discourse.processing.org/t/transparent-images/3337 "2018-09-07T00:36:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ShowStopper](https://avatars.discourse-cdn.com/v4/letter/s/9de0a6/32.png) [@ShowStopper](https://discourse.processing.org/u/ShowStopper)\
**Post date:** [September 7, 2018, 12:36am UTC](https://discourse.processing.org/t/transparent-images/3337/1 "2018-09-07T00:36:07Z")

</div>

Wondering if theres any good way to use transparent images (images that do not have a rectangular border) in processing. I remember being able to do this once before but every time I try it now the image always has a white background in the unfilled regions.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 7, 2018, 12:57am UTC](https://discourse.processing.org/t/transparent-images/3337/2 "2018-09-07T00:57:13Z")

</div>

Can I see your code that loads the image and draws it?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 7, 2018, 5:17am UTC](https://discourse.processing.org/t/transparent-images/3337/3 "2018-09-07T05:17:59Z")

</div>

Hi Showstopper

Are you sure it is not just the background showing up?

Try adding `background(255, 0, 0)` just before drawing the image. If now the back is red then it is working.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 8, 2018, 9:57pm UTC](https://discourse.processing.org/t/transparent-images/3337/4 "2018-09-08T21:57:19Z")

</div>

@ShowStopper:

Here is an image with transparency:

> **[File:Processing 3 logo.png](https://commons.wikimedia.org/wiki/File:Processing_3_logo.png)**

…and here is a simple sketch that loads it on top of a red rectangle.

```auto
PImage img;
void setup(){
  size(240, 240);
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Processing_3_logo.png/240px-Processing_3_logo.png");
  fill(255,0,0);
  rect(30,30,180,180);
  image(img, 0, 0);
}

```

![11%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/ba5a6268346cdfc43691e6ab48e335d910a40386.png)

---

<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:** [October 10, 2019, 9:57am UTC](https://discourse.processing.org/t/transparent-images/3337/5 "2019-10-10T09:57:01Z")

</div>

Hi, I know this topic is old, but I’m having the same problem of @ShowStopper

The fact is that when you load an image in 3D (P3D), and want to make it transparent  
`tint (255,222);`  
It displays a background no transparent ( black in this case)

![transparencyError](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/31f1aad1be61c14c5493911d76879e0e954b226b.png)

There appears a colored rectangle (black) (and the worst is that the rectangle doesn’t have transparency)

---

<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:** [October 10, 2019, 11:20am UTC](https://discourse.processing.org/t/transparent-images/3337/6 "2019-10-10T11:20:38Z")

</div>

can you try this mod from  
PDE / Examples / Topics / Textures / TextureCube

```auto
/**
 * Texture Cube
 * by Dave Bollinger.
 * 
 * Drag mouse to rotate cube. Demonstrates use of u/v coords in 
 * vertex() and effect on texture(). The textures get distorted using
 * the P3D renderer as you can see, but they look great using OPENGL.
*/

PImage tex;
float rotx = PI/4;
float roty = PI/4;

void setup() {
  size(640, 360, P3D);
  tex = loadImage("berlin-1.jpg");
  textureMode(NORMAL);
  //fill(255);
  //stroke(color(44,48,32));
  println("use: key [t] enable tint");
}

void draw() {
  background(200,200,0);
  noStroke();
  translate(width/2.0, height/2.0, -100);
  rotateX(rotx);
  rotateY(roty);
  scale(90);
  TexturedCube(tex);
  if ( dotint ) tint(0,200,200,100); // cyan / half transparent
  else noTint();
}

void TexturedCube(PImage tex) {
  beginShape(QUADS);
  texture(tex);

  // Given one texture and six faces, we can easily set up the uv coordinates
  // such that four of the faces tile "perfectly" along either u or v, but the other
  // two faces cannot be so aligned. This code tiles "along" u, "around" the X/Z faces
  // and fudges the Y faces - the Y faces are arbitrarily aligned such that a
  // rotation along the X axis will put the "top" of either texture at the "top"
  // of the screen, but is not otherwised aligned with the X/Z faces. (This
  // just affects what type of symmetry is required if you need seamless
  // tiling all the way around the cube)
  
  // +Z "front" face
  vertex(-1, -1, 1, 0, 0);
  vertex( 1, -1, 1, 1, 0);
  vertex( 1, 1, 1, 1, 1);
  vertex(-1, 1, 1, 0, 1);

  // -Z "back" face
  vertex( 1, -1, -1, 0, 0);
  vertex(-1, -1, -1, 1, 0);
  vertex(-1, 1, -1, 1, 1);
  vertex( 1, 1, -1, 0, 1);

  // +Y "bottom" face
  vertex(-1, 1, 1, 0, 0);
  vertex( 1, 1, 1, 1, 0);
  vertex( 1, 1, -1, 1, 1);
  vertex(-1, 1, -1, 0, 1);

  // -Y "top" face
  vertex(-1, -1, -1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1, -1, 1, 1, 1);
  vertex(-1, -1, 1, 0, 1);

  // +X "right" face
  vertex( 1, -1, 1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1, 1, -1, 1, 1);
  vertex( 1, 1, 1, 0, 1);

  // -X "left" face
  vertex(-1, -1, -1, 0, 0);
  vertex(-1, -1, 1, 1, 0);
  vertex(-1, 1, 1, 1, 1);
  vertex(-1, 1, -1, 0, 1);

  endShape();
}

void mouseDragged() {
  float rate = 0.01;
  rotx += (pmouseY-mouseY) * rate;
  roty += (mouseX-pmouseX) * rate;
}

boolean dotint=true;

void keyPressed() {
  if ( key == 't' ) {
    dotint = ! dotint;
    println(" tint: "+dotint);
  }
}

```

 ![texture_tint](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c02792a867520bf18db22916db3ddb259c25d5f4.png)  
so i not think it is a P3D problem you have

> **[tint() / Reference](https://processing.org/reference/tint_.html)**
>
> Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value. To apply transparency to an image without affecting its …

> The **tint()** function is also used to control the coloring of textures in 3D.

---

<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:** [October 10, 2019, 1:45pm UTC](https://discourse.processing.org/t/transparent-images/3337/7 "2019-10-10T13:45:52Z")

</div>

Thanks for answer 🤗

Mmmm the problem appears when using a not rect image

Like this one:

> **[Download Snowflake In A Cloud Svg Png Icon Free Download - Icono De...](https://www.pngfind.com/download/oioomw_snowflake-in-a-cloud-svg-png-icon-free/)**
>
> Download hd Snowflake In A Cloud Svg Png Icon Free Download - Icono De Descargas, Transparent Png and upload and share your own design.

> **Example code**
>
> ```auto
> float rotx = PI/4;
> float roty = PI/4;
> 
> void setup() {
> size(displayWidth, displayHeight, P3D);
> tex = loadImage("cloud.png");
> imageMode(CENTER);
> }
> 
> void draw() {
> background(200,200,0);
> strokeWeight(5);
> for(int i = 0; i < width; i += 50){
> line(i,0,i,height);
>   
> }
> translate(width/2.0, height/2.0, 100);
> rotateX(rotx);
> rotateY(roty);
>   
> if ( dotint ) tint(0,200,200,100);
> else noTint();
>   
> image(tex,0/2,0/2);
> }
> 
> void mouseDragged() {
> float rate = 0.01;
> rotx += (pmouseY-mouseY) * rate;
> roty += (mouseX-pmouseX) * rate;
> }
> 
> boolean dotint=false;
> 
> void mousePressed() {
> dotint = ! dotint;
> println(" tint: "+dotint);
> }
> 
> ```

 ![Screenshot_20191010-153358](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a25b111669351889bdcd5feac95668905b2262fa.png)  
And have just realized that is not about the tint (In my other app, when I not use the tint, it works well, but the image doesn’t rotate, maybe it depends on the deepness)

---

<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:** [October 10, 2019, 2:19pm UTC](https://discourse.processing.org/t/transparent-images/3337/8 "2019-10-10T14:19:31Z")

</div>

can you try

```auto
void setup() {
  size(displayWidth, displayHeight, P3D);
  tex = loadImage("cloud.png");
  imageMode(CENTER);
  hint(DISABLE_DEPTH_TEST);
  hint(DISABLE_DEPTH_SORT);
  hint(DISABLE_DEPTH_MASK);
}

```

and you see the lines always, not need tint?  
is that what you want see?

* * *

[https://processing.org/reference/hint\_.html](https://processing.org/reference/hint_.html)  
not sure what are the defaults and can disable with //  
or need to use ENABLE !

---

<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:** [October 10, 2019, 2:30pm UTC](https://discourse.processing.org/t/transparent-images/3337/9 "2019-10-10T14:30:34Z")

</div>

OOhhh, yeah @kll thanks 😀😊😊 !!!

I have lost other features that I wanted, but knowing this methods now I can fix the rest I hope.