# Png image question

**URL:** <https://discourse.processing.org/t/png-image-question/1243>\
**Category:** Processing\
**Created:** [June 25, 2018, 12:38pm UTC](https://discourse.processing.org/t/png-image-question/1243 "2018-06-25T12:38:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nano](https://avatars.discourse-cdn.com/v4/letter/n/dec6dc/32.png) [@Nano](https://discourse.processing.org/u/Nano)\
**Post date:** [June 25, 2018, 12:38pm UTC](https://discourse.processing.org/t/png-image-question/1243/1 "2018-06-25T12:38:53Z")

</div>

How to read the position of the opaque area on the ‘png’ image?  
the alpha() function?

void mkey() {  
for (int i = 0; i\<img.width; i++) {  
for (int j = 0; j\<img.height; j++) {  
int index = i+j\*img.width;  
color col = img.pixels[index];  
float alp = alpha(col);  
//float alp = brightness(col);  
if (alp\>1) {  
??? //  
}  
}  
}  
img.updatePixels();  
}

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [June 25, 2018, 12:51pm UTC](https://discourse.processing.org/t/png-image-question/1243/2 "2018-06-25T12:51:03Z")

</div>

It depends a bit on the renderer you are using. But it makes sense to use `get(x, y)` instead of the pixels array. Working with the `alpha()` function is the right way to go. Here is an example on how to recolor the alpha values of an image with green color.

Be aware that the _alpha_ value range is between **0-255**! So here I only replace everything that is lower then `200`. And this kind of pixel manipulation is really slow and should not be used for 60 fps applications.

```java
PImage img;

void setup()
{
  size(500, 500);
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
  noLoop();
}

void draw()
{
  for (int y = 0; y < img.height; y++)
  {
    for (int x = 0; x < img.width; x++)
    {
      if (alpha(img.get(x, y)) < 200)
        img.set(x, y, color(0, 255, 0, 255));
    }
  }

  image(img, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)\
**Post date:** [June 26, 2018, 5:51am UTC](https://discourse.processing.org/t/png-image-question/1243/3 "2018-06-26T05:51:31Z")

</div>

Useing pixels[] is faster than get(). However you will have to call loadPixels() before looking at them and updatePixels() after you made a change.