Tint and Fade
use the tint() function to set a color tint for drawing images. You can give it a Red, Green, and Blue value to set the tint. You can also give it an Alpha value to set the transparency.
// draw with 50% transparency tint(255,255,255,128); image(water,0,0,600,400); // tint red tint (255,0,0); image(water,0,0,600,400);In this example, move the mouse to the right to make the image fade in. Note the scaling code to convert the X coordinate (a range of 0 to 600) into an alpha value (a range of 0 to 255).
// create variables for the Images
PImage water;
void setup ()
{
// load the images
water = loadImage("water.jpg");
size(600,400);
}
void draw ()
{
background(0,0,0);
float scaling = 600/255;
int opacity = int (mouseX/scaling);
// tint (r,g,b,alpha);
tint (255,255,255,opacity);
image(water,0,0,600,400);
}
This next example crossfades two images. The opacities should be opposite; when the first image is transparent, the other is totally opaque, and vice versa: opacity2 = 255 - opacity1
PImage fire;
PImage water;
void setup ()
{
fire = loadImage("fire.jpg");
water = loadImage("water.jpg");
size(600,400);
}
void draw ()
{
background(0,0,0);
float scaling = 600/255;
int opacity1 = int(mouseX/scaling);
int opacity2 = 255 - opacity1;
tint (255,255,255,opacity1);
image(water,0,0,600,400);
tint (255,255,255,opacity2);
image(fire,0,0,600,400);
}