Making part of a PImage transparent

Processing Coding Questions
1

I would like to map an image to a sphere and have part of it transparent, but I can’t figure out how to make the image transparent. Is this possible? If not what would be the best way to do something like this. Thanks.

1 Like
2

Does the image itself contain transparent pixels?

3

That’s the idea, but when I do that those pixels just end up at full alpha when they’re mapped to the sphere.

4

Okay. I did a bit of testing and the only way to do this is create the sphere as a PShape and then call setTexture()

PImage img;
PShape sphere;
void setup(){
size(400,400,P3D);
img=loadImage("treeBranches.png");
sphere = createShape(SPHERE, 90);
sphere.setTexture(img);
sphere.setStroke(color(0,0));
}
void draw(){
  background(0);
  translate(width/2.0,height/2.0,-150);
  shape(sphere); 
}
1 Like
5

I tried using this but its still not transparent.

6

could you post the part of the code where you’re rendering the sphere?

7

Something like this

PImage image;
PShape sphere;

void setup(){
  size(1080,720,P3D);
  sphere = createShape(SPHERE,200);
  image = new PImage(200,100);
  for(int i = 0; i < 200; i++){
    for(int j = 0; j < 100; j++){
      image.set(i,j,color(i,10));
    }
  }
  sphere.setTexture(image);
}

void draw(){
  background(0);  
  translate(540,360,-250);
  rotateY(frameCount*.01);
  shape(sphere); 
}
8

i try play with background color and fill transparency
and it works with ARGB,
but not like you see the stroke of the sphere through…

PImage imaget;
PShape sphere;

void setup(){
  size(500,500,P3D);
  sphere = createShape(SPHERE,100);
  imaget = createImage(200,100,ARGB);
  for(int i = 0; i < 200; i++){
    for(int j = 0; j < 100; j++){
      imaget.set(i,j,color(0,100,0,50));
    }
  }
  sphere.setTexture(imaget);
  println("use: mouseX for background color, mouseY for transparency");
}

void draw(){
  background(map(mouseX,0,width,0,255),0,255-map(mouseX,0,width,0,255));  
  translate(width/2,height/2,-100);
  rotateY(frameCount*.01);
  shape(sphere); 
}

void mouseMoved() {
  imaget = createImage(200,100,ARGB);
  for(int i = 0; i < 200; i++){
    for(int j = 0; j < 100; j++){
      imaget.set(i,j,color(0,100,0,map(mouseY,0,height,0,255)));
    }
  }
  sphere.setTexture(imaget);
}
1 Like
9

You can remove the lines on the sphere, using kll’s demo.

Kf

PImage imaget;
PShape sphere;

int spAlpha;

void setup() {
  size(500, 500, P3D);
  colorMode(RGB,256,256,256,256);

  spAlpha = 255;

  sphere = createShape(SPHERE, 100);
  setSphere();
 // sphere.setTexture(imaget);
  println("use: mouseX for background color, mouseY for transparency");
}

void draw() {
  
  background(map(mouseX, 0, width, 0, 255), 0, 255-map(mouseX, 0, width, 0, 255));  
  translate(width/2, height/2, -100);
  rotateY(frameCount*.01);
  
  setSphere();  
  shape(sphere);
}

void mouseMoved() {
  spAlpha=int(map(mouseY, 0, height, 0, 255));
}

void setSphere() {  
  sphere.setStroke( color(0, 100, 0, spAlpha)); //For no lines, set alpha to 0
  imaget = createImage(200, 100, ARGB);
  for (int i = 0; i < imaget.width; i++) {
    for (int j = 0; j < imaget.height; j++) {
      imaget.set(i, j, color(0, 100, 0, spAlpha));
    }
  }
  sphere.setTexture(imaget);
}
1 Like
10

Thank you that worked.