We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › overlay image - transparent
Page Index Toggle Pages: 1
overlay image - transparent (Read 3066 times)
overlay image - transparent
Apr 14th, 2009, 3:32pm
 
I am relatively new to Processing. I am attempting to overlay an image1 over an image2, treating white as transparent. I would like it to be done efficiently.

I thought that the"mask()" function would do this but could not get the example to work. I also tried someone's example which loaded the top image and set the white pixels fully transparent. I could not get even his example to work.

Ideas would be appreciated.
Re: overlay image - transparent
Reply #1 - Apr 14th, 2009, 6:32pm
 
OpenGL blending functions come to mind...
Take a look at this thread
http://processing.org/discourse/yabb2/?num=1207671111
Re: overlay image - transparent
Reply #2 - Apr 14th, 2009, 10:45pm
 
Does white have to be the transparent color?
if not, create a PNG in photoshop, leave the background transparent and save it... just use this png as img and youve got all the transparency you need. I would say thats the best way to do that.
Re: overlay image - transparent
Reply #3 - Apr 14th, 2009, 11:06pm
 
Perhaps by applying a threshold with filter() before using mask().
But that's at least two iterations. A faster way is probably to loadPixels() of the image, iterate on them, replacing white color (or close, if needed) by transparency.
Re: overlay image - transparent
Reply #4 - Apr 18th, 2009, 4:47pm
 
you could try using the method MULTIPLY of the blend() function, that makes white transparent.

check the reference session of processing's site and look for it.

you should use this kind of statement blend(img, 0, 0, width, height, 0, 0, width, height, MULTIPLY); and place it after image() is called [or after you update the pixels]. on this example 'img' is the top image you want to merge with a bottom layer.
Re: overlay image - transparent
Reply #5 - Apr 19th, 2009, 2:43am
 
Interesting, I didn't know MULTIPLY could do that.
I tried with this code:
Code:
size(500, 500);
PImage b = loadImage("D:/Documents/Images/References/parelss3.jpg");
stroke(#0055FF);
strokeWeight(4);
for (int x = 0; x < width; x += 20)
line(x, 0, x, height);
image(b, 10, 10, 200, 200);
blend(b, 0, 0, b.width, b.height, 200, 200, 200, 200, MULTIPLY);

Problem: it doesn't stop on white, but it processes all shades of gray (image was mostly B&W), making the whole image partially transparent. Might not be what is wanted.
Re: overlay image - transparent
Reply #6 - Apr 19th, 2009, 12:14pm
 
well, there is another idea to make only the white transparent.

you can read the pixels[] of the image you want to have the transparency looking for white pixels [or defining a threshold for pixels lighter than x]. you can read the array using a for iteration and at the same time use a boolean[] defining false for pixels that should be opaque, for example, and true for the ones that should be transparent [use if statement comparing value of pixel with threshold if statement]. this boolean array should have the same length of the image's pixels array [image width * image height].

after analyzing each individual pixel and defining which ones should be transparent you can print the background image to the screen with image() and output the upper layer [the one with transparent whites] using the pixels[] and an if structure based on the boolean array that states which frames should and which should not be transparent (for this you should remember to call loadPixels() before working with the pixels[] and updatePixels() to update them on the screen ).
Re: overlay image - transparent
Reply #7 - Apr 19th, 2009, 3:47pm
 
Hi
It can be done like...

Code:
void setWhiteTransparent(PImage img)
{
 int[]  maskArray=new int[img.width*img.height];
 img.loadPixels();
 for (int i=0;i<img.width*img.height;i++)
 {
   if((img.pixels[i] & 0x00FFFFFF) == 0x00FFFFFF)
   {
     maskArray[i]=0;      
   }
   else
   {
     maskArray[i]=img.pixels[i] >>> 24;
   }
 }

 img.updatePixels();
 img.mask(maskArray);  
}


Probably not optimal, but works..

Bye
Dusan Licer
Re: overlay image - transparent
Reply #8 - Apr 20th, 2009, 4:02am
 
pedro veneroso, Dusan Licer, I suggested something like that in my first answer (although in a very terse way), but I suggested to alter the pixels right away, without using a secondary array. No need for mask, then.

Not sure if the OP is still interested by the topic... Smiley
Re: overlay image - transparent
Reply #9 - Apr 20th, 2009, 6:47am
 
Yes PhilLho it's true... The reason i used mask that it always works for me. If I do it like
Code:
  img.loadPixels();    
for (int i=0; i< img.width*img.height; i++)
{
if((img.pixels[i] & 0x00FFFFFF)==0x00FFFFFF)
{
img.pixels[i]= (img.pixels[i] & 0xFFFFFF);
}
}

img.updatePixels();


it doesnt work, but I don't know why...

Bye
Dusan Licer
Re: overlay image - transparent
Reply #10 - Apr 20th, 2009, 9:37am
 
You are right.
I checked the source, and indeed the problem is when we load an image without transparency, the image is in RGB format, without opacity info.
I found out that forcing the format to be ARGB works... Smiley
Code:
size(500, 500);
PImage img = loadImage("E:/Documents/Images/References/parelss3.jpg");
stroke(#0055FF);
strokeWeight(4);
for (int x = 0; x < width; x += 20)
line(x, 0, x, height);

image(img, 10, 10, 200, 200);
// Not necessary for a PImage
// img.loadPixels();
for (int i = 0; i < img.width * img.height; i++)
{
if ((img.pixels[i] & 0x00FFFFFF) == 0x00FFFFFF)
{
img.pixels[i] = 0;
}
}
img.format = ARGB;
img.updatePixels();
image(img, 200, 200, 200, 200);
Re: overlay image - transparent
Reply #11 - Apr 20th, 2009, 10:37am
 
Thank you very much. This is very helpfull to me. I always forced mask to avoid the problem, but with img.format is much easier and more effective.

Have a nice day

Dusan Licer
Page Index Toggle Pages: 1