[Solved] How to change PNG color ?

blyk

Hi, Here is the example of a png image. I want to change only black colored part of png and transparent part should remain untouched. I have tried so many things but I was unsuccessful.

Please download the image for trying

Here is the code that I have tried

    PImage img;
    color c;
    void setup() {
      size(500, 500);
      img = loadImage("handOpen.png");
    }

    void draw() {
      background(-1);
      img.loadPixels();
      for (int x = 0; x < img.width; x++) {
        for (int y = 0; y < img.width; y++) {
          int i =  x+ y*img.width;
          if (img.get(x, y)==0) {
            img.pixels[i] = c;
          }
        }
      }
      img.updatePixels();
      image(img, width/2, height/2);
    }


    void mousePressed()
    {
      c = (color) random(#000000);
    }

quark

The code below should work

PImage img;
color c;
void setup() {
  size(500, 500);
  img = loadImage("handOpen.png");
}

void draw() {
  background(-1);
  img.loadPixels();
  for (int x = 0; x < img.width; x++) {
    for (int y = 0; y < img.width; y++) {
      int i =  x+ y*img.width;
      if (img.get(x, y)== #000000) {
        img.pixels[i] = c;
      }
    }
  }
  img.updatePixels();
  image(img, width/2, height/2);
}

void mousePressed()
{
  c = (0xFF000000 + (color)random(0xFFFFFF));
}

blyk

Thanks quark! but it is not working though I am able to see the outline of the hand which is in black color and rest of the pixels are white inside the outline.

What I wanted is that initially image should show the original image (black hand) and as I click it should change the color.

koogs

I am able to see the outline of the hand which is in black color

anti-aliasing means that these pixels aren't dead black or wholy opaque, the above code doesn't handle that.

also, no need to change the pixels in every draw loop when the colour only changes in the mousePressed()

and one of your img.width should be a .height.

blyk

@koog thank you ! but still no luck. I have this code where I put all the image color change in mousePressed event. Also color only change once not every mouse click even if I put img.updatePixel(); Any suggestion.

    PImage img;
    color c;
    void setup() {
      size(500, 500);
      img = loadImage("1.png");
    }

    void draw() {
      background(-1);
      img.updatePixels();
      image(img, width/2, height/2);
    }

    void mousePressed()
    {
      c = (0xFF000000 + (color)random(0xFFFFFF));
      img.loadPixels();
      for (int x = 0; x < img.width; x++) {
        for (int y = 0; y < img.height; y++) {
          int i =  x+ y*img.width;
          if (img.get(x, y)== #000000) {
            img.pixels[i] = c;
          }
        }
      }
    }

koogs

Also color only change once not every mouse click even if I put img.updatePixel();

the next time through the pixels aren't black, they are whatever colour you changed them to last. so the == #000000 won't work.

perhaps easiest would be to make the hand white on transparent, then use tint(). see the reference.

blyk

I have almost scrap the idea of using PNG it may seems difficult to use so I have decided to use SVG files but still no luck .I have converted this image into svg using Illustator CS3 and whenever I call svg shape in processing I got this error

Ignoring < clipPath > tag.

It shows nothing but a black rectangle I have no idea where I am getting it wrong.

blyk

I have solved this problem .. but I have one question about performance.

Question : So can you tell me if using image is fast or PShapes svg files? In both cases I have re-sized their size almost 1/8 of original of size.

koogs

this works with a white hand:

color c;
PImage img;

void setup() {
  size(400, 400);
  c = color((int)random(255), (int)random(255), (int)random(255));
  img = loadImage("hand.png");
}

void draw() {
  background(255, 0, 0);
  tint(c);
  image(img, mouseX, mouseY);
}

void mousePressed() {
  c = color((int)random(255), (int)random(255), (int)random(255));
}

blyk

Thanks a lot koogs ! It Worked.

Can you also tell me what would be better to use as performance wise, an Image or SVG ?

PhiLho

blyk, you posted a number of messages, this one was still in the wrong section, it might be time to get a look at the Categories descriptions, no?

blyk

Sorry PhiLho but I didn't see it as wrong section because I have posted my sample code and I am asking to fix it (as mention in the categories section)

PhiLho

It is in the Question about Code because I moved it! It was in the default category, Using Processing, which about usage of the PDE. If that's just distraction on only this topic, please ignore my remark and be more attentive. ;-)

blyk

thanks you so much PhiLho :)