# Setting transparency with pixels\[\]

**URL:** <https://discourse.processing.org/t/setting-transparency-with-pixels/501>\
**Category:** Coding Questions\
**Created:** [May 29, 2018, 5:48pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501 "2018-05-29T17:48:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 29, 2018, 5:48pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/1 "2018-05-29T17:48:54Z")

</div>

Hello,

i have a sketch where i’m trying to set a certain color of an image to zero transparency color(0,0).

It works in the first part of the sketch but for some reason doesn’t work in the second part.

See image for reference.

[\> Image \<](https://i.imgur.com/BH7HtQT.jpg)

Here’s the whole code:

```auto
import org.openkinect.processing.*;

// Kinect Library object
Kinect2 kinect2;

float minThresh = 1000;
float maxThresh = 2700;
PImage img, img1, img3;
int counter;
boolean img3Draw = false;
PImage hintergrund;
int timer = 0;
boolean firstClick = true;

void setup() {
  frameRate(30);
  background(0);
  hintergrund = loadImage("hintergrund3.png");

  size(1920, 1080);
  kinect2 = new Kinect2(this);
  kinect2.initDepth();
  kinect2.initDevice();
  img = createImage(kinect2.depthWidth, kinect2.depthHeight, ARGB);
  img3 = createImage(kinect2.depthWidth, kinect2.depthHeight, ARGB);
}

void draw() {
  image(hintergrund, 0, 0);

  img.loadPixels();

  int[] depth = kinect2.getRawDepth();

  float totalPixels = 0;

  for (int x = 0; x < kinect2.depthWidth; x++) {
    for (int y = 0; y < kinect2.depthHeight; y++) {
      int offset = x + y * kinect2.depthWidth;
      int d = depth[offset];

      if (d > minThresh && d < maxThresh && x > 100) {
        img.set(x, y, color(map(depth[offset], 4500, 500, 0, 255)));

        totalPixels++;
      } else {
        img.pixels[offset] = color(0,0);
      }
    }
  }

  counter++;
  if (counter == 5) {
    pushStyle();
    tint(255, 3);
    image(img, 100, 500);
    popStyle();
    counter = 0;
  }

  
  timer++;
  if (timer == 100) {
  }

  println(img3Draw);

  if (img3Draw == true) { 

    image(img3, 400, 100, kinect2.depthWidth, kinect2.depthHeight);
  }
}

void mouseClicked() {

  img3 = get(100, 500, 512, 424);
  img3.loadPixels();

  for (int x=0; x< img3.pixels.length; x++) {
    if (img3.pixels[x] == color(0)) {
      img3.pixels[x] = color(0, 0);
    }
  }
  img3.updatePixels();
  img3Draw = true;
}

```

I can set the pixels to a different color like this:

```auto
  for (int x=0; x< img3.pixels.length; x++) {
    if (img3.pixels[x] == color(0)) {
      img3.pixels[x] = color(0, 255, 0);
    }
  }

```

But when i try to set them to transparent with color(0,0); the black pixels seem to stay black.

Thank you in advance!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 29, 2018, 6:01pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/2 "2018-05-29T18:01:45Z")

</div>

Maybe it’s caused by :

`if (img3.pixels[x] == color(0))`

Is the `img3` pixels are black?

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 29, 2018, 6:06pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/3 "2018-05-29T18:06:25Z")

</div>

The img3 does contain a lot of black pixels, and i can change them if i change them to a differen color like this:

```auto
for (int x=0; x< img3.pixels.length; x++) {
    if (img3.pixels[x] == color(0)) {
      img3.pixels[x] = color(0, 255, 0);
    }
  }

```

In this example i tried to set the new colors to green, which works in the sketch, so the code itself does work.

Only when i try to use color(0,0) it does not work anymore, and the pixels simply seem to stay black:

```auto
for (int x=0; x< img3.pixels.length; x++) {
    if (img3.pixels[x] == color(0)) {
      img3.pixels[x] = color(0, 0);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 29, 2018, 6:34pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/4 "2018-05-29T18:34:45Z")

</div>

Could you just post a screenshot of the window?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 30, 2018, 1:04am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/5 "2018-05-30T01:04:22Z")

</div>

> [@What am i missing? (createImage)](https://discourse.processing.org/t/what-am-i-missing-createimage/470/3):
>
> BtW, Arrays::fill(): [https://Docs.Oracle.com/javase/10/docs/api/java/util/Arrays.html#fill(int[],int)](https://Docs.Oracle.com/javase/10/docs/api/java/util/Arrays.html#fill(int%5B%5D,int)) Over the PImage::pixels[]: [https://Processing.org/reference/PImage\_pixels.html](https://Processing.org/reference/PImage_pixels.html) Is much faster than any loop! muscle

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 30, 2018, 9:41am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/6 "2018-05-30T09:41:31Z")

</div>

@josephh

[[Album] Imgur ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/fb1edf1ab885fe87913762e757153a29415d44e5.jpg "Imgur") ](https://imgur.com/a/oL2fWlU)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 30, 2018, 9:51am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/7 "2018-05-30T09:51:41Z")

</div>

But the pixels behind the `img3` image are black aren’t they? So if you change the opacity of black pixels of `img3` to 0, you should see black pixels behind.

Tell me if I’m wrong

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 30, 2018, 9:58am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/8 "2018-05-30T09:58:45Z")

</div>

@josephh

```auto
  img3.loadPixels();

  for (int x=0; x< img3.pixels.length; x++) {
    if (img3.pixels[x] == color(0)) {
      img3.pixels[x] = color(0, 0);
    }
  }
  img3.updatePixels();

```

The pixels behind img3 are black. I’m trying to set the opacity of the black pixels to 0 with color(0,0), but it is not working as well.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 30, 2018, 10:10am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/9 "2018-05-30T10:10:50Z")

</div>

Well it seems that you can’t make a pixel of a PImage transparent :

```auto
PImage img;

void setup() {
  size (640, 480);
  
  img = createImage(width/2,height/2,RGB);
  
  img.loadPixels();
  for(int i=0;i<img.pixels.length;i++){
    img.pixels[i] = color(0,0);
    println(alpha(img.pixels[i]));
  }
}

void draw() {
  background(0,255,0);
  image(img,0,0);
}

```

The result :

 ![Capturenn](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/30bca8e08a23b9e2f83bcb069fe9a563c05f42b5.PNG)

It’s strange because the alpha value of each pixel is 0.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [May 30, 2018, 10:15am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/10 "2018-05-30T10:15:16Z")

</div>

> [@josephh](#):
>
> img = createImage(width/2,height/2,RGB);

Make that `ARGB` and works fine here! `RGB` makes it ignore the alpha value.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 30, 2018, 10:16am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/11 "2018-05-30T10:16:54Z")

</div>

My bad, thanks for the answer ! 🙂

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 30, 2018, 10:43am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/12 "2018-05-30T10:43:16Z")

</div>

I did use ARGB when setting up the createImage() in the setup(). 😕

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 30, 2018, 10:43am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/13 "2018-05-30T10:43:37Z")

</div>

> [@Skranker](#):
>
> The pixels behind img3 are black. I’m trying to set the opacity of the black pixels to 0 with color(0,0), but it is not working as well.

Finally I don’t understand your problem because you wrote :

`img3 = createImage(kinect2.depthWidth, kinect2.depthHeight, ARGB);` with “ARGB”

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 30, 2018, 11:20am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/14 "2018-05-30T11:20:59Z")

</div>

Maybe

```auto
img3 = get(100, 500, 512, 424);

```

saves the frame as a normal RGB image somehow even though i created the image as ARGB?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [May 30, 2018, 11:36am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/15 "2018-05-30T11:36:38Z")

</div>

I think that’s your problem - `get()` returns a new `PImage` which in this case will be `RGB` like the primary surface.

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 30, 2018, 11:40am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/16 "2018-05-30T11:40:58Z")

</div>

Is it possible to have get() return an ARGB image?

Or what would this line

```auto
img3 = get(100, 500, 512, 424);

```

look like if i tried to use a double for() and pixels?

Something like this?

```auto
 for (int x = 100; x < 500; x++) {
    for (int y = 580; y < 1080; y++) {
      loadPixels();
      for (int p=0; p < pixels.length; x++) {
      img3.set(x, y, pixels[]);
      }
    }
  }

```

At the moment i would like to focus on getting the sketch to run, so i can worry about performance later. 😃

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 30, 2018, 11:56am UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/17 "2018-05-30T11:56:18Z")

</div>

> [@Skranker](#):
>
> Is it possible to have **get()** return an ARGB image?

Class PImage got a `public` field called _format_, in which we can assign constant ARGB to it: 🤖

> <https://github.com/processing/processing/blob/master/core/src/processing/core/PImage.java#L69>

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 30, 2018, 12:30pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/18 "2018-05-30T12:30:45Z")

</div>

How do i change this? The PImage.java is not included in the processing download by default? Do i need to create a new folder?

And just change it like this?

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/3cd1170d728fe47de5afbc6c88f870c24f7c9db5.png)

(I pasted the code into processing for better formatting)

---

<div class="post-metadata">

**Author:** ![colouredmirrorball](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colouredmirrorball/32/234_2.png) [@colouredmirrorball](https://discourse.processing.org/u/colouredmirrorball)\
**Post date:** [May 30, 2018, 12:41pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/19 "2018-05-30T12:41:50Z")

</div>

No, like this: `img3.format = ARGB` in your original Processing sketch.

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [May 30, 2018, 1:47pm UTC](https://discourse.processing.org/t/setting-transparency-with-pixels/501/20 "2018-05-30T13:47:51Z")

</div>

Thank you everyone, that fixed it!