PImage with no background instructions?

bneigher

I am curious what the best strategy is for making an image have a transparent background. How would I go about doing this? Alpha masks? I've tried to get the .gif to have no background by doing the magic want layer separation in photoshop, then saving the .gif for web. This has not worked...

GoToLoop

Dunno much, sorry! I know that ".png" format is the most appropriate for alpha properties.
Anyways, if you know which is the background color value you wanna make transparent,
use method loadPixels() from that PImage object, iterate over that pixels[], checking all the time for that color.
Every time it's found it, apply an & mask to it such as this 1 -> final color MASK = 0xFFFFFF;, and reassign it back.

PhiLho

As said, better use PNG format rather than the old, outdated Gif one. PNG allows to have more colors, has better compression overall and supports several levels of transparency.

In Photoshop, you need to enable the alpha layer, and to use the eraser to remove the parts where the background must be transparent.

Note: why is this topic in the Android category? Is it on purpose? Because the question / answer are system agnostic.

Chrisir

@ gotoloop

I have a question to your answer:

You wrote:

and reassign it back.

So the pixel is transparent then? Do I say for making black transparent e.g.

if (pixel[333] = color(0) ) 
    pixel[333] = pixel[333] & MASK;

?

And I do it only once for all images, so I can do it in setup() ?

(or even write a help program to do this and just write them back to hard drive with transparency?)

Let's say I want to make a puzzle piece. Like this

http://de.freepik.com/vektoren-kostenlos/jigsaw-blue-puzzle-clip-art_385673.htm

I make all parts black that are to be transparent with program paint or so and save them separately (because I don't have photoshop).

When I loop over all pixels... how can I make sure it's not a black pixel right in the middle of the puzzle piece but a pixel that really must be transparent?

Thanks!

Greetings, Chrisir

Poersch

@Chrisir: Of course I don't know how GoToLoop would handle it, but I would do the following:

1. Load the image and make sure it has an alpha channel (ARGB mode).

2. Load it's pixels array and loop over every pixel, with the following code:

   for(int n = 0; n < someImage.pixels.lenght; n++) if(someImage.pixels[n] == maskColor) someImage.pixels[n] = 0;

maskColor is the color value that should get transparent, #ff00ff for example.

0 or 0x00000000 is not only black it's black and fully transparent.

Chrisir

ok, thanks a ton

but when you have an image / puzzle like this:

http://4.bp.blogspot.com/_wkxbqC2YoYw/TPhWgLbxYFI/AAAAAAAAAXM/EC7SkrFGfqA/s1600/nice-kids-puzzle-piece-788190.png

it seems to be a lot of work just to prepare the pieces of the puzzle, right?

and... . how can I make sure it's not a black pixel right in the middle of the puzzle piece but a pixel that really must be transparent?

Poersch

Just fill the pixels that should be transparent with some arbitrary "mask" color, dark green for example, like in this picture: http://www.rpg-maker.fr/dl/monos/article/rm2003/hero1.png

If you are not sure if your chosen mask color is already present in your image, just use an secondary greyscale image as alpha channel. Example: http://www.thebest3d.com/carrara/digarts/07-Alpha2Swap.jpg

Edit: A quick example:

PImage someImage;

void setup() {
    size(600, 600, P2D);
    someImage = clearColor(loadImage("http" + "://fc05.deviantart.net/fs70/f/2011/201/1/e/goomba_charset_rpg_maker_2k3_by_masterplayer2342-d413fep.png"), #ff00ff);
}

void draw() {
    background(#ffffff);
    image(someImage, mouseX, mouseY);
}

PImage clearColor(PImage image, int maskColor) {
    PImage newImage = createImage(image.width, image.height, ARGB);
    image.loadPixels();
    newImage.loadPixels();
    for(int n = 0; n < newImage.pixels.length; n++)
        newImage.pixels[n] = image.pixels[n] == maskColor ? 0x00000000 : image.pixels[n] | 0xff000000;
    newImage.updatePixels();
    return newImage;
}