Last week, i've a homework with processing. It make me work hard on processing, because it's not easy for newbie like me. I must creating fade in animation for four picture. For do it quickly you need great math. Because for do it need if math logic. And for a long time i don't get math lesson :D. But, i can do this homework correctly (i think). There is i want share about my homework with processing. The result like this video

Let begin how to make the fade animation in processing. Before we writting the code, i prefer you make a folder in one folder with your processing file, and the name of folder is data. Prepare four image with the same size (better) and put in into data folder. 

tint(value1,value2,value3,alpha);

Parameter for set the alpha on fourth. Max value for alpha is 255 and the minimum is 0. If you want image not appear, set the alpha to 0. We need create void setup() first before create the void draw()

• We need to declarate the image variable. I just add four image variabel using:

  PImage img;
  PImage img1;
  PImage img2;
  PImage img3;
  

• Creating transparency variable. I just create 3 transparency variable with integer data type like that

  int transparency1;
  int transparency2;
  int transparency3;
  

• Create a void setup. Set the size of canvas, image for every variable and value of transparency. The image must in data folder. My code is like that

  void setup(){
    size(640,480);
    transparency1 = 255;
    transparency2 = 0;
    transparency3 = 0;
    img = loadImage("gbr.jpg"); 
    img1 = loadImage("gambar.jpg");
    img2 = loadImage("gbr_01.jpg");
    img3 = loadImage("gbr_02.jpg");
  }
  

After set the setup, now we must set the void draw(). And this time we will play with math logical, make it FUN ;). I just try to make you understand with my math logical. If you know better than logic please give me know ;). For the first i write this script:

  tint(255,255,255,transparency1);
  image(img, 0, 0);
  if(transparency1 > 0){
    transparency1--;
  }

It means, transparency1 value take from void setup is 255. The value of transparency1 more than 0, so if logic looping for minus the transparency1 by 1 till the value is 0. When the value is 0, img not appear and replace with img1 with this script

  tint(255,255,255,255-transparency1);
  image(img1, 0, 0);

Alpha on the script is 255-transparency1, so when transparency1 have value 255, alpha on this image is 0, but when transparency decrease make alpha for img1 increase. So when trasnparency1 = 0, alpha for img1 is 255. It make this image visible.

After that i write this script

  tint(255,255,255,transparency2);
  image(img2, 0, 0);
  if((transparency1 == 0) && (transparency2 < 255)){
    transparency2++;
  }

This script means if value of transparency1 = 0 and transparency2 less than 255, transparency2 increase till the value 255. Why i set the transparency1 == 0? Because if we don't set it, the image will be appear when we start the program. It's not waiting transparency1 value to 0.

  tint(255,255,255,transparency3);
  image(img3, 0, 0);
  if((transparency2 > 0)&&(transparency2==255)){
    transparency3++;
  }

It means, when transparency2 have value 255, we increase the value of transparency3. And it will be replace the img2. I think, it's explanation from me, i hope you can enjoy it. Sorry for my bad englisht. I still learn with english :D.

Final code like this:

PImage img;
PImage img1;
PImage img2;
PImage img3;

int transparency1;
int transparency2;
int transparency3;

void setup(){
  size(640,480);
  transparency1 = 255;
  transparency2 = 0;
  transparency3 = 0;
  img = loadImage("gbr.jpg");
  img1 = loadImage("gambar.jpg");
  img2 = loadImage("gbr_01.jpg");
  img3 = loadImage("gbr_02.jpg");
}

void draw(){
  background(255);
  tint(255,255,255,transparency1);
  image(img, 0, 0);
  if(transparency1 > 0){
    transparency1--;
  }
  tint(255,255,255,255-transparency1);
  image(img1, 0, 0);
  
  tint(255,255,255,transparency2);
  image(img2, 0, 0);
  if((transparency1 == 0) && (transparency2 < 255)){
    transparency2++;
  }
  
  tint(255,255,255,transparency3);
  image(img3, 0, 0);
  if((transparency2 > 0)&&(transparency2==255)){
    transparency3++;
  }

}

Happy programming ;)