Fade effect from an image to another

Processing Coding Questions
1

I have this code but when I press the mouse I want an image fade transition, any help? Thanks!

void setup() {
  size(600, 600);
  estaciones = new PImage[2];
   estaciones[0]=loadImage("test.png");
   estaciones[1]=loadImage("test2.png");
  background(0);
}
 
void draw() {
  background(0);

  // desplazo imagenes
  image(estaciones[index], x, 0);
  image(estaciones[index], x+estaciones[index].width, 0);
  x=x-framer;
  if (x<-estaciones[index].width) {
    x=0;}

}
void mousePressed() {
  siguiente();
}

void siguiente() {
  index += 1;
  if (index >= estaciones.length) {
    index = 0;
  }
}
1 Like
2

One way to do it…

I changed the alpha over time for the fade effect at the bottom of the screen.

// Image of West Hamilton    
  tint(255, 255-alpha);  // Apply transparency without changing color
  image(img, 0, 0);  

// Blackout bottom of screen 
  fill(0, alpha);
  rect(0, sHeight, width, height);

Example of effect:

:slight_smile:

1 Like
3

Hi,

I wrote a library with image processing algorithms for Processing. There is a function included to blend two images easly together.

image
image554×606 429 KB

https://github.com/Milchreis/processing-imageprocessing#blending-two-images

2 Likes