# Problem with alpha channel - editing photos and use parts to multiply

**URL:** <https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574>\
**Category:** Coding Questions\
**Created:** [November 20, 2020, 5:44pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574 "2020-11-20T17:44:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 20, 2020, 5:44pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/1 "2020-11-20T17:44:21Z")

</div>

Hi  
I am quite new and rather unexperienced with Processing. I am trying to pick out a picture of a maple leaf from a photo and create a new image without the grass background in order to multiply the leaf image in a new picture. Without overwriting problems. However, this seems to be rather tricky. (I have also tried to use masking with no success). What to do?

Code:

PImage photo, photoNew;  
void setup() {  
size(3264,2448);  
noLoop();  
photo=loadImage(“IMG\_9114.JPG”); // picture with a maple leaf on a grass bed  
}

void draw() {  
image(photo, 0,0);  
loadPixels();  
for (int y = 0; y \< height; y++) {  
for (int x = 0; x \< width; x++) {  
int loc = x + y\*width;  
float r = red(photo.pixels[loc]);  
float g = green(photo.pixels[loc]);  
float b = blue(photo.pixels[loc]);  
if ((r\>204)&&(g\<204)){ //start guess for color code of readish maple leaf  
pixels[loc] = color(r,g,b,255); }// here I am saving the real picture part of leaf and make it opaque  
else{  
pixels[loc] = color(255,255,255,0); } // here I am making the remaining part white and transparent  
}}  
updatePixels();

saveFrame(“masked.png”);//The best so far is to save it as file and upload it again - seems to complicated really!?

photoNew=loadImage(“masked.png”);  
image(photoNew, 0, 0);  
for (int y = -1; y \< 2; y++) {  
for (int x = -1; x \< 2; x++) {  
image(photoNew, x_500, y_500); //several pictures of the leave on the canvas…(but they should not overwrite each others!  
}  
}  
saveFrame(“img\_leaf.png”);  
}

 ![IMG_9114](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/14cca3c50ad2ac663ede68c9d6eb04db6c1f050b.jpeg)

---

<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:** [November 20, 2020, 5:59pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/2 "2020-11-20T17:59:07Z")

</div>

Welcome to the forums! Loving the autumn feel of this sketch 👌

First can I ask you to clarify what your issue is? Second, please format your code by highlighting it and tapping that `</>` button in the toolbar.

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 20, 2020, 6:47pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/3 "2020-11-20T18:47:25Z")

</div>

Hi Here it is again!  
Hi  
I am quite new and rather unexperienced with Processing. I am trying to pick out a picture of a maple leaf from a photo and create a new image without the grass background in order to multiply the leaf image in a new picture. Without overwriting problems. However, this seems to be rather tricky. (I have also tried to use masking with no success). What to do?

Code:

```auto
PImage photo, photoNew;
void setup() {
size(3264,2448);
noLoop();
photo=loadImage(“IMG_9114.JPG”); // picture with a maple leaf on a grass bed
}

```

void draw() {  
image(photo, 0,0);  
loadPixels();  
for (int y = 0; y \< height; y++) {  
for (int x = 0; x \< width; x++) {  
int loc = x + y\*width;  
float r = red(photo.pixels[loc]);  
float g = green(photo.pixels[loc]);  
float b = blue(photo.pixels[loc]);  
if ((r\>204)&&(g\<204)){ //start guess for color code of readish maple leaf  
pixels[loc] = color(r,g,b,255); }// here I am saving the real picture part of leaf and make it opaque  
else{  
pixels[loc] = color(255,255,255,0); } // here I am making the remaining part white and transparent  
}}  
updatePixels();

saveFrame(“masked.png”);//The best so far is to save it as file and upload it again - seems to complicated really!?

photoNew=loadImage(“masked.png”);  
image(photoNew, 0, 0);  
for (int y = -1; y \< 2; y++) {  
for (int x = -1; x \< 2; x++) {  
image(photoNew, x _500, y_ 500); //several pictures of the leave on the canvas…(but they should not overwrite each others!  
}  
}  
saveFrame(“img\_leaf.png”);  
}

```auto

```

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 20, 2020, 6:48pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/4 "2020-11-20T18:48:46Z")

</div>

```auto
PImage photo, photoNew;

void setup() {
 size(3264,2448);
 noLoop();
 photo=loadImage("IMG_9114.JPG"); // picture qith a maple leaf on grass bed
}

void draw() {
 image(photo, 0,0);
 loadPixels(); 
 for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      int loc = x + y*width;
      float r = red(photo.pixels[loc]);
      float g = green(photo.pixels[loc]);
      float b = blue(photo.pixels[loc]);
      if ((r>204)&&(g<204)){ //start guess for color code of readish maple leaf
      pixels[loc] = color(r,g,b,255); }// here I am saving the real picture part of leaf and make it opaque
            else{
      pixels[loc] = color(255,255,255,0); } // here I am making the remaining part white and transparent
    }}
    updatePixels();  

 saveFrame("masked.png");//The best so far is to save it as file and upload it again - seems to complicated really!?

 photoNew=loadImage("masked.png");
 image(photoNew, 0, 0);    
  for (int y = -1; y < 2; y++) {
  for (int x = -1; x < 2; x++) {
  image(photoNew, x*500, y*500); //several pictures of the leave on the canvas...(but they should not overwrite each others!
  }
}
  saveFrame("img_leaf.png");
}

```

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 20, 2020, 6:54pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/5 "2020-11-20T18:54:31Z")

</div>

Trying again,  
I trying to take out the picture of the leaf and get rid of the rest. Making it possible to print the leaf several times in a new picture. I do not want anything outside the leaf to block or overwrite some thing else. That is why I am trying to fix it through the alpha channel putting the value to zero outside the leaf area.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 20, 2020, 9:16pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/6 "2020-11-20T21:16:14Z")

</div>

You were almost there. It’s not easy to precisely filter out the leaf. I will let this up to you.

```auto
PImage photo, photoNew;

void setup() {
  size(1800, 1000);
  photo=loadImage("IMG_9114.JPG");  
  photoNew = createImage(photo.width, photo.height, ARGB);
  noLoop();
}

void draw() {
  background(230);
  for (int y = 0; y < photo.height; y++) {
    for (int x = 0; x < photo.width; x++) {
      int loc = x + y * photo.width;
      float r = red(photo.pixels[loc]);
      float g = green(photo.pixels[loc]);
      float b = blue(photo.pixels[loc]);
      if (r > 200 && b > 50 && g > 50) { 
        color c = color(r, g, b);
        photoNew.pixels[loc] = c;
      } else {      
        photoNew.pixels[loc] = color(0, 0, 0, 0);
      }
    }
  }
  for(int i = 0; i < width-photoNew.width; i += 300){
    image(photoNew, i, -180);
    image(photoNew, i, 250);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 20, 2020, 10:50pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/7 "2020-11-20T22:50:00Z")

</div>

Hi  
Thanks for your effort.  
But I cannot get it to work!  
I only get gray canvas.

The lines:  
for(int i = 0; i \< width-photoNew.width; i += 300){  
image(photoNew, i, -180);  
image(photoNew, i, 250);  
did not produce any picture!?

So I tried save the middle result by:  
image(photoNew, 0,0);  
saveFrame(“masked.png”);  
To check that the leaf was filtered out correctly (I can see your addition to the pixel filter) but with poor result. However, with part of the leaf there and some residues of the grass (which is OK)

I changed to the original full size picture:  
size(3264,2448) instead of size(1800, 1000); but it did not help.

What has went wrong?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 20, 2020, 11:58pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/8 "2020-11-20T23:58:54Z")

</div>

> [@Kylle](#):
>
> But I cannot get it to work!

How so?

https://www.openprocessing.org/sketch/1023616

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 21, 2020, 7:17am UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/9 "2020-11-21T07:17:02Z")

</div>

Hi

Yes it looks reaaly fine. Thanks!!  
I can also run your code and get the picture through the online platform (link through email notification). But not on my computer. Do I need to do something special. I am running the Processing 3 newly downloaded?

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 21, 2020, 8:39am UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/10 "2020-11-21T08:39:10Z")

</div>

It is a bit strange. This code works however:

```auto
PImage photo, photoNew;

void setup() {
  ///size(1800, 1000);
  size(3264,2448);
  photo=loadImage("IMG_9114.JPG");  
  photoNew = createImage(photo.width, photo.height, ARGB);
  noLoop();
}

void draw() {

  background(230);
  for (int y = 0; y < photo.height; y++) {
    for (int x = 0; x < photo.width; x++) {
      int loc = x + y * photo.width;
      float r = red(photo.pixels[loc]);
      float g = green(photo.pixels[loc]);
      float b = blue(photo.pixels[loc]);
      if (r > 200 && b > 50 && g > 50) { 
        color c = color(r, g, b);
        photoNew.pixels[loc] = c;
      } else {      
        photoNew.pixels[loc] = color(0, 0, 0, 0);
      }
    }
    }
    image(photoNew, 0,0);
    saveFrame("mask.png");
  for (int y = -1; y < 2; y++) {
  for (int x = -1; x < 2; x++) {
    image(photoNew, x*1000, y*700-300); //several pictures of the leave on the canvas...(but they should not overwrite each others!
  }
}
   saveFrame("img_leaf.png");
}

```

It seems as the last loop in your code is never processed?

Thanks!  
Checked your work - looks marvelous!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 21, 2020, 8:58am UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/11 "2020-11-21T08:58:22Z")

</div>

Are there any given errors, or only a gray window? Does the (1800,1000) size also fail or only the (3264,2448}? What happens if you place other common images in that loop?

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [November 21, 2020, 12:25pm UTC](https://discourse.processing.org/t/problem-with-alpha-channel-editing-photos-and-use-parts-to-multiply/25574/12 "2020-11-21T12:25:45Z")

</div>

No given errors. Yes also failing with the (1800,1000) image.  
If I add:

```auto
void draw() {
  background(230);
  fill(200,100,100);
  rect(10,10,2002,200);

```

The rectangle will show up on the gray canvas.