# Transitions for Fading and Zooming

**URL:** <https://discourse.processing.org/t/transitions-for-fading-and-zooming/40927>\
**Category:** Coding Questions\
**Created:** [February 14, 2023, 9:56pm UTC](https://discourse.processing.org/t/transitions-for-fading-and-zooming/40927 "2023-02-14T21:56:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajaynischal1](https://avatars.discourse-cdn.com/v4/letter/a/8edcca/32.png) [@ajaynischal1](https://discourse.processing.org/u/ajaynischal1)\
**Post date:** [February 14, 2023, 9:56pm UTC](https://discourse.processing.org/t/transitions-for-fading-and-zooming/40927/1 "2023-02-14T21:56:57Z")

</div>

```auto
ArrayList<PImage> images;
int lastImageIndex = -1;
int nextImageIndex = 0;
float alphaValue = 0;
float alphaShift = 0.004; // adjust speed, smaller = slower
//Parabolic Zoom

void setup() {
  fullScreen(P2D); 
  images = new ArrayList<PImage>();
  String[] lines = loadStrings("images.txt");
  for (String line : lines) {
    PImage img = loadImage(line);
    images.add(img);
  }  
  imageMode(CENTER);
}

void draw() {
  background(0);
  // as index is zero based, zoom in image on index 1,3,5,.. means second, fourth sixth,... image else just blend
  fade(lastImageIndex,nextImageIndex,alphaValue, nextImageIndex % 2 != 0);  
  if (alphaValue >= 1.0) {
    lastImageIndex = nextImageIndex;
    nextImageIndex = (lastImageIndex+1) % images.size();
    alphaValue = 0;
  }
  alphaValue += alphaShift;    
}

void fade(int l,int n, float a, boolean zi) {    
  if (l >= 0) {
    float invAlpha = 1.0-a;
    tint(255, invAlpha * 255);
    PImage limg=images.get(l);
    // only fade out no zooming
    image(limg, width/2, height/2, width, height); 
    PImage nimg=images.get(n);
    image(nimg, width/2, height/2, width, height);
  }
  tint(255, a * 255);
  PImage nimg=images.get(n);
  // if zi zoom in and blend in else only blend in
  image(nimg, width/2, height/2, zi ? width*a*10 : width, zi ? height*a*10 : height);
}

```

Hi I have this code and I want it to fade from image 1 then into image 2 and then zoom into image 2 if someone can help me that would be amazing thank you! The images are inserted using images.txt which just have 4 image names for now and could increase

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 15, 2023, 5:57pm UTC](https://discourse.processing.org/t/transitions-for-fading-and-zooming/40927/2 "2023-02-15T17:57:54Z")

</div>

This appears to be a duplicate topic of this thread:

> [@Fading and Zoom (image slideshow)](https://discourse.processing.org/t/fading-and-zoom-image-slideshow/40812):
>
> Hi I have a txt file that contains image names. I am trying to take the first image and fade slowly into the second image. I then want to start zooming into the second image to about 500x. I tried to do it but for some reason it starts with the second image being zoomed and then further zooms in. I want the pattern to repeat therefore image 1 fades to image 2 and then zoom in on image 2 and then fade to image 3 and fade to image 4 and zoom and so on. Please can someone help me figure out what I …