Transitions for Fading and Zooming

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

1 Like

This appears to be a duplicate topic of this thread:

2 Likes