# Fade effect from an image to another

**URL:** <https://discourse.processing.org/t/fade-effect-from-an-image-to-another/12244>\
**Category:** Coding Questions\
**Created:** [June 22, 2019, 11:38pm UTC](https://discourse.processing.org/t/fade-effect-from-an-image-to-another/12244 "2019-06-22T23:38:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vickydcl](https://avatars.discourse-cdn.com/v4/letter/v/f14d63/32.png) [@Vickydcl](https://discourse.processing.org/u/Vickydcl)\
**Post date:** [June 22, 2019, 11:38pm UTC](https://discourse.processing.org/t/fade-effect-from-an-image-to-another/12244/1 "2019-06-22T23:38:27Z")

</div>

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

```auto
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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 23, 2019, 11:04am UTC](https://discourse.processing.org/t/fade-effect-from-an-image-to-another/12244/2 "2019-06-23T11:04:31Z")

</div>

One way to do it…

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

```auto
// 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:

[![](https://img.youtube.com/vi/m-HUdzNvzRs/maxresdefault.jpg "Twinkle Twinkle Little Star") ](https://www.youtube.com/watch?v=m-HUdzNvzRs)

🙂

---

<div class="post-metadata">

**Author:** ![Milchreis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/milchreis/32/7058_2.png) [@Milchreis](https://discourse.processing.org/u/Milchreis)\
**Post date:** [November 9, 2019, 11:25pm UTC](https://discourse.processing.org/t/fade-effect-from-an-image-to-another/12244/3 "2019-11-09T23:25:32Z")

</div>

Hi,

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d85bc564e087847832a627a37c28c3388e740136.png)

[https://github.com/Milchreis/processing-imageprocessing#blending-two-images](https://github.com/Milchreis/processing-imageprocessing#blending-two-images)