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

Kylle · November 20, 2020, 5:44pm

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, x500, y500); //several pictures of the leave on the canvas…(but they should not overwrite each others!
}
}
saveFrame(“img_leaf.png”);
}

tony · November 20, 2020, 5:59pm

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.

Kylle · November 20, 2020, 6:47pm

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:

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”);
}

Kylle · November 20, 2020, 6:48pm

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");
}

Kylle · November 20, 2020, 6:54pm

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.

noel · November 20, 2020, 9:16pm

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

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);
  }
}

Kylle · November 20, 2020, 10:50pm

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?

noel · November 20, 2020, 11:58pm

How so?

Kylle · November 21, 2020, 7:17am

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?

Kylle · November 21, 2020, 8:39am

It is a bit strange. This code works however:

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!

noel · November 21, 2020, 8:58am

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?

Kylle · November 21, 2020, 12:25pm

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

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

The rectangle will show up on the gray canvas.

Topic		Replies	Views
Pixel Processing: Grabbing the Canvas, and Where's the Alpha? Coding Questions	14	1421	January 5, 2019
Help with some loops and image processing Coding Questions	2	528	January 17, 2019
PImage alpha color problems P2D Processing	3	393	January 3, 2020
Pixels and images Coding Questions	1	354	April 16, 2020
DALLE 2 - Transparent background and load image Beginners	4	977	July 15, 2022

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

Related topics