# Fading and Zoom (image slideshow)

**URL:** https://discourse.processing.org/t/fading-and-zoom-image-slideshow/40812
**Category:** Coding Questions
**Created:** [February 2, 2023, 11:39pm UTC](https://discourse.processing.org/t/fading-and-zoom-image-slideshow/40812 "2023-02-02T23:39:04Z")
**Posts on this page:** 1
**Showing post:** 5

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [February 4, 2023, 10:37am UTC](https://discourse.processing.org/t/fading-and-zoom-image-slideshow/40812/5 "2023-02-04T10:37:08Z")

</div>

Hi @ajaynischal98,

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

> [@ajaynischal98](#):
>
> I just had one more question I get a runtime exception with this saying → RuntimeException: Image width and height cannot be larger than 16384

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/4/74f0e0609bdfb36ef1514126f074df608354eebe.png)

Cheers  
— mnse

```auto
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)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/f/dff4726a0ba83ea187b11c7271f8d64efaab49a2.gif)

---

_[View the full topic](https://discourse.processing.org/t/fading-and-zoom-image-slideshow/40812)._