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.
Can I see your code that loads the image and draws it?
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.
1 Like
Here is an image with transparency:
…and here is a simple sketch that loads it on top of a red rectangle.
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);
}
2 Likes
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)
There appears a colored rectangle (black) (and the worst is that the rectangle doesn’t have transparency)
2 Likes
can you try this mod from
PDE / Examples / Topics / Textures / TextureCube
/**
* 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);
}
}
so i not think it is a P3D problem you have
The tint() function is also used to control the coloring of textures in 3D.
2 Likes
Thanks for answer 
Mmmm the problem appears when using a not rect image
Like this one:
Example code
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);
}
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)
can you try
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
not sure what are the defaults and can disable with //
or need to use ENABLE !
4 Likes
OOhhh, yeah @kll thanks 
!!!
I have lost other features that I wanted, but knowing this methods now I can fix the rest I hope.
1 Like