Hello everyone! I’ve been learning Processing for a while now, and have struck a brick wall:
What I want to do;
Load an image of a circular object (like an eye or a bubble etc.) and “retain it’s transparency”. I heard about this concept and have tried to find as much information about it as I could, with no success.
What I think I know:
If you get an image of type PNG it will have an alpha channel in addition to the regular RGB channels. By doing something (?) you can then display only specific parts of the image, instead of just displaying all of it as a rectangle.
I have read about PImages, PGraphics etc but I really think I have missed something because I can’t seem to find an explanation of how to do it.
Is there any sort of a tutorial about this?
Very thankful for all the help I can get, have a nice day!
Did you try loading the image and displaying it? Show some code and if transparency is not being honored, let us know. See if you can get an online image so everybody gets access to the same resources for the testing.
As I grabbed more and more “png images” from the web I noticed that you can look up whether they have an alfa channel or not, in the file info. This is actually the only image I found with an alpha channel.
This is basically the effect that I am looking for, (but in the following code I use a jpg and play around with the blend() method:
PImage bg;
PImage img;
void setup() {
size(600, 600);
img = loadImage("eye.jpg");
//here set all pixels in the PImage "bg" to be color(200)
bg = createImage(width, height, ARGB);
for (int x = 0; x < bg.width; x++) {
for (int y = 0; y < bg.height; y++) {
bg.pixels[x + y * width] = color(200);
}
}
}
void draw() {
background(bg);
//here I display the original image of the eye in the corner of the window
image(img, 0, 0);
//here i blend() the eye image so that only the darkest colors come through
//meaning that the white background for instance is not shown.
//I display the image at the position of the mouse
blend(img, 0, 0, img.width, img.height, mouseX, mouseY, img.width, img.height, DARKEST);
}
Hi,
usually when you load a image with alpha channel it will display automatically as such. There should be no need to blend or anything.
If it doesn’t work with your image, try to load it with a image editor that is able to display the alpha channel correctly (paint.net or gimp, not windows paint). There delete the background so that a grayish pattern of rectangles is shown. That part will be transparent. Then export it and save as .png. Load it in your program (as PImage) and it should work fine.
Works every time for me.
Good luck, I hope this will help.
Max
PS: paint.net is not a link but a name. don’t click it, just google it.
Hi Max!
Thank you for the tip! It seems to me there is no version of either gimp or paint.net for mac. Is there any alternative for OS X that you know of or any other way to do it?
you should be able to use preview to do some basic editing. open the annotations toolbar and then use the lasso to make your selections, hit delete or press the crop button to make that area transparent.
