//Transparency. 
 
 //Move the pointer left and right across the image to change
 //its position. This program overlays one image over another 
 //by modifying the alpha value of the image with the tint() function. 
 

PImage a, b; // This is datatype for storing images. Processing can display of .gif, .jpg, .tga, and .png images.
float offset; // This is datatype for floating-point numbers, a number that has a decimal point. Floating-point numbers are often used to approximate analog and continuous values because they have greater resolution than integers.

void setup() 
{
  size(400, 400);
  a = loadImage("earth.jpg");  // Loads an image into the program 
  b = loadImage("fireball.jpg");   // Loads an image into the program 
  frameRate(60);
}

void draw() 
{ 
  image(a, 0, 0);
  float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0); // This re-maps a number from one range to another.
  offset += (offsetTarget-offset)*0.05; 
  tint(255, 153); // This sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by setting the alpha.
  image(b, offset, 20); // This displays images and cordinates the offsets 
}