PImage with no background instructions?

edited February 2014 in Android Mode

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...


  • edited February 2014

    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.

  • edited February 2014

    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.

  • edited February 2014

    @ 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


    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?


    Greetings, Chrisir

  • edited February 2014

    @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.

  • ok, thanks a ton

    but when you have an image / puzzle like this:


    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?

  • edited February 2014

    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() {
        image(someImage, mouseX, mouseY);
    PImage clearColor(PImage image, int maskColor) {
        PImage newImage = createImage(image.width, image.height, ARGB);
        for(int n = 0; n < newImage.pixels.length; n++)
            newImage.pixels[n] = image.pixels[n] == maskColor ? 0x00000000 : image.pixels[n] | 0xff000000;
        return newImage;
Sign In or Register to comment.