Crossfade

Criar uma aplicação que realiza o crossfade entre 3 imagens de acordo com a posição vertical do mouse.

Imagens Usadas:

         


Código:

PImage img1;
PImage img2;
PImage img3;

float controle = 0.0;

void setup() {
  size(461, 539);
  img1 = loadImage("sora1.jpg");
  img2 = loadImage("sora2.jpg");
  img3 = loadImage("sora3.jpg");
}

void draw() {
  background(255);

  // controle varia de 1 ate 4
  controle = 3 * (mouseY/(float)height) + 1;

  float alpha;

  // controle entre 1.0 e 2.5 define o alpha da img1
  if (controle < 2.5) {
    alpha = (controle - 1.0)/1.5;
    alpha = 1.0 - alpha;
  } else {
    alpha = 0.0;
  }

  tint(255, alpha * 255);
  image(img1, 0, 0);

  // controle entre 1 e 4 define o alpha da img2
  alpha = abs(controle - 2.5)/1.5;
  alpha = 1.0 - alpha;

  tint(255, alpha * 255);
  image(img2, 0, 0);


  // controle entre 2.5 e 4 define o alpha da img3
  if (controle > 2.5) {
    alpha = (controle - 2.5)/1.5;
  } else {
    alpha = 0.0;
  }
   
  tint(255, alpha * 255);
  image(img3, 0, 0);

}

Resuldado: