Fading and Zoom (image slideshow)

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 am doing wrong as I am new to processing

ArrayList<PImage> images;
int currentImage = 0;
float alpha = 0;

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

void draw() {
  background(0);
  if (currentImage >= images.size()) {
    currentImage = 0;
  }
  PImage img1 = images.get(currentImage);
  PImage img2 = images.get((currentImage + 1) % images.size());

  if (currentImage % 2 == 0) {
    // Zoom in
    int zoom = 1;
    alpha += 0.01;
    if (alpha >= 1) {
      alpha = 0;
      currentImage++;
    }
    int newWidth = (int)(img2.width * zoom * alpha + img1.width * (1 - alpha));
    int newHeight = (int)(img2.height * zoom * alpha + img1.height * (1 - alpha));

    image(img1, (width - newWidth) / 2, (height - newHeight) / 2, newWidth, newHeight);
    tint(255, alpha * 255);
    image(img2, (width - newWidth) / 2, (height - newHeight) / 2, newWidth, newHeight);
  } else {
    // Fade to next image
    alpha += 0.01;
    if (alpha >= 1) {
      alpha = 0;
      currentImage++;
    }
    image(img1, 0, 0, width, height);
    tint(255, alpha * 255);
    image(img2, 0, 0, width, height);
  }
}

2 Likes

Hello @ajaynischal98 :slightly_smiling_face:

We cannot test-run your code without access to the images…

:nerd_face:

1 Like

Hi @ajaynischal98,

if I understand you requirement correct, you could try s.th like this …

Cheers
— mnse

ArrayList<PImage> images;
int   lastImageIndex = -1;
int   nextImageIndex =  0;
float alphaValue     =  0;

void setup() {
  size(512,512,P2D); // adjust to your needs (ie. 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);
  fade(lastImageIndex,nextImageIndex,alphaValue);  
  if (alphaValue >= 1.0) {
    lastImageIndex = nextImageIndex;
    nextImageIndex = (lastImageIndex+1) % images.size();
    alphaValue = 0;
  }
  alphaValue += 0.01;  
}

void fade(int l,int n, float a) {    
  if (l >= 0) {
    float invAlpha = 1.0-a;
    tint(255, invAlpha * 255);
    PImage limg=images.get(l); 
    // if you want to scale it on fullscreen, change to width and height 
    // instead of img.width and img.height for the third and fouth parameter
    // if the image not already fits in
    image(limg, width/2, height/2, limg.width*invAlpha, limg.height*invAlpha);    
  }
  tint(255, a * 255);
  PImage nimg=images.get(n);
  // if you want to scale it on fullscreen, change to width and height 
  // instead of img.width and img.height for the third and fouth parameter
  // if the image not already fits in
  image(nimg, width/2, height/2, nimg.width*a, nimg.height*a);      
}

dummy

2 Likes

Thank you so much! yes that similar to what I wanted I just wanted every second image to zoom but I think that is an easy fix. I needed the second, fourth and sixth image to zoom but this is. so helpful.

I just had one more question I get a runtime exception with this saying → RuntimeException: Image width and height cannot be larger than 16384 with this graphics card. would you know how to fix that as well as how would you slow down the zoom and fade to maybe take slightly longer?

Hi @ajaynischal98,

Code adjusted. Just play a bit around to figure out yourself and adjust to your needs.

How large are your images ?!
I would say scale down size to fix it. In case it would not be possible you need another approach.
You could split the image into parts and display it like a grid which combined shows the whole image, but you would need to implement that by yourself …

ie:
dummy_grid

Cheers
— mnse

ArrayList<PImage> images;
int   lastImageIndex = -1;
int   nextImageIndex =  0;
float alphaValue     =  0;
float alphaShift     =  0.005; // adjust speed, smaller = slower

void setup() {
  fullScreen(P2D); // adjust to your needs (ie fullscreen)
  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);   
  }
  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 : width, zi ? height*a : height);      
}

ezgif.com-gif-maker (1)

Thanks so much for all the help. I cannot make the image fade to the 2nd and 4th images before zooming into that image. I am trying to go in this order Fade image 1 into image 2 and the zoom into image 2. But I cannot seem to get that to work

Still not sure what you want to achieve

Fading is between all images?

And zooming only for 2nd, 4th, 6th only?

My idea

If I were you, I would work with a state variable.

State can either be load, fadeToNext or zoom

The 3 states can be int constants like :

final int load        = 0;
final int fadeToNext = 1;
final int zoom        = 2;

int state = load; // current state 

Then you can use (in draw()):


switch(state) { 
case load: 
loadImage(.... 
state=fadeToNext; 
break;

case fadeToNext:
....
if(fadeIsOver) {
fadeIsOver=false; 
if(counter %2==0)
state = zoom; 
else state = load;
}
break;

case zoom;
....
state = load;
break; 

}

1 Like

Yes Fading between all images is what i want to achieve but I want to zoom in on the 2nd, 4th and 6th. after zooming it should fade to the next image. Thanks for the information I will try to incorporate that into the code

1 Like

Hi @ajaynischal98

But that’s what the example do.

  • Fade in 1
  • Fade out 1 and Zoom in 2
  • Fade out 2 and Fade in 3
  • Fade out 3 and Zoom in 4
  • etc

I think you should study the examples again and try to adjust to your needs. Maybe split the alpha handling from zoom by adding another parameter to the fade function to be able to be separated.
The rest is only to put in the required img indexes for your requirements.

Cheers
— mnse

1 Like

not quite sure

I think:

  • Fade in 1
  • Fade out 1 and Fade in 2 THEN Zoom in
  • Fade out 2 and Fade in 3
  • Fade out 3 and Fade in 4 THEN Zoom in
1 Like

ezgif.com-gif-maker (1)

2 Likes

What’s wrong with the solution by mnse?

Can you please show this

here is my version

instead of using a text list, we just take all files from the data directory (see setup())


//

ArrayList<PImage> images = new ArrayList<PImage>();
int   lastImageIndex =  0;
int   nextImageIndex =  1;

float alphaValue     =  0;
float alphaShift     =  0.019; //  0.004; // adjust speed, smaller = slower

float zoomFactor = 0.1;

//Parabolic Zoom

// --------------------------------------------------------------------------------------------

void setup() {
  //fullScreen(P2D);
  size(800, 800);

  // String[] lines = loadStrings("images.txt");
  String[] lines;

  File file = new File(dataPath(""));
  if (file.isDirectory()) {
    lines = file.list();
  } else {
    lines = null;
  }

  if (lines == null) {
    println("NO");
    exit();
    return;
  }

  //  printArray(lines);

  for (String line : lines) {
    PImage img = loadImage(line);
    //img.resize(width, 0); // The 0 means "keep aspect ratio" (assuming ladscape format)
    images.add(img);
  }//for

  imageMode(CENTER);
  //
  println ("end of setup()");
}

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
  // 3 states here:
  if (alphaValue < 1.0) {
    //fade
    fade(lastImageIndex, nextImageIndex, alphaValue, nextImageIndex % 2 != 0);
    alphaValue += alphaShift;
    fill(255);//debug
    text("state fade "+lastImageIndex+" -> " + nextImageIndex, 33, 33);
  } else if (alphaValue >= 1.0 && zoomFactor<4) {
    // zoom
    noTint();  // Disable tint
    boolean zi = nextImageIndex % 2 != 0;
    if (zi) {
      // if zi zoom in
      PImage nimg=images.get(nextImageIndex);
      image(nimg, width/2, height/2,
        width*zoomFactor*10, height*zoomFactor*10 );
    } else {
      // go on
      zoomFactor=22;
    }
    zoomFactor += .01;
    fill(255);//debug
    text("state zoom "+zoomFactor, 33, 33);
    //
  } else if (alphaValue >= 1.0 && zoomFactor>=4) {
    //next
    lastImageIndex = nextImageIndex;
    nextImageIndex = (lastImageIndex+1);  // (lastImageIndex+1) % images.size();
    alphaValue = 0; // reset
    zoomFactor = 0.1;
    fill(255);//debug
    text("state next", 33, 33);
  } else {
    println("shouldn't get here");//debug
  }// else
}//func

// --------------------------------------------------------------------------------------------

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);

    tint(255, a * 255);
    PImage nimg=images.get(n);
    image(nimg, width/2, height/2, width, height);
  }
  //tint(255, a * 255);
  //PImage nimg=images.get(n);
  //image(nimg, width/2, height/2,
  //  width, height);
} //func
//

1 Like

I’m trying to do something just like this and Chrisir’s solution is just what I’ve been trying to do. I added a datapath to a specific directory

  File file = new File(dataPath("imagesA/"));

and then get NullPointerException and

Could not load .DS_Store, make sure it ends with a supported extension (JPG, jpg, tiff, bmp, BMP, gif, GIF, WBMP, png, PNG, JPEG, tif, TIF, TIFF, jpeg, wbmp)
The file "8.png" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
The file "9.png" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
The file "14.png" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
etc
etc

The sketch is clearly finding my images. Does this not then imply that the “URL is valid”, and that the file has been added to the sketch. Does this indicate then that my images are not readable? Why would this be the case? I’m doing something very wrong…Thanks for any advice…

First off, is this a folder in your data folder? Not sure about this.

This is a file you can maybe move to another folder.

This part should return a String. Can you please println this?

1 Like
  1. yes indeed it is
  2. I’ve tried finding this file, viewing hidden files on my mac, and I don’t see it. from Terminal i -ls and still don’t find this pesky file.
(base) xtxylxr@xx-Bxxxxx imagesA % ls

0.png 12.png 16.png 2.png 23.png 27.png 30.png 34.png 38.png 41.png 8.png
1.png 13.png 17.png 20.png 24.png 28.png 31.png 35.png 39.png 5.png 9.png
10.png 14.png 18.png 21.png 25.png 29.png 32.png 36.png 4.png 6.png
11.png 15.png 19.png 22.png 26.png 3.png 33.png 37.png 40.png 7.png

Thanks Chrisir

println(file);

returns
/Users/xtxylxr/Documents/Processing/Sketches2023/FadeImageDirVer2/data/imagesA

This is the path. This Path looks good.

Remark

How to rule out DS store file.
When looping over the files you can use if(…) to check if it’s a file (ending must be .jpg or .png, use substring(), see reference for String)

1 Like