# Random Select Images and Fade in / fade out according to variable / Blend

**URL:** https://discourse.processing.org/t/random-select-images-and-fade-in-fade-out-according-to-variable-blend/40960
**Category:** Coding Questions
**Created:** [February 19, 2023, 4:28pm UTC](https://discourse.processing.org/t/random-select-images-and-fade-in-fade-out-according-to-variable-blend/40960 "2023-02-19T16:28:11Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![JonnieNightTime](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@JonnieNightTime](https://discourse.processing.org/u/JonnieNightTime)
#### Post date: [February 19, 2023, 4:28pm UTC](https://discourse.processing.org/t/random-select-images-and-fade-in-fade-out-according-to-variable-blend/40960/1 "2023-02-19T16:28:11Z")

</div>

Hi All,  
can’t see the wood for the trees here!! I"m trying to randomly move through an image directory, and fade in and out according to a variable imgA\_Duration. Eventually I want to blend multiple layers of images from a number of directories. I’m struggling to get any further than this right now though

My first issue is my PImages array.

Secondarily I aiming for a Fadein and Out to occur when a new image loads, and have the rate of this dependant upon the image’s display duration variable (totalT1)

```auto
import java.util.Date;

String pathA = " " ;
String[] filenamesA;
PImage[] imagesA = new PImage[99]; /// how to set value of array to = number of files in directory pathA? i.e filenamesA.length

int i=0; 
float startT1;
float totalT1 = 2000; ///////////// imageA display duration

int imgNumA = 0;
float transparencyA = 0;
boolean fadeInA = true;
boolean fadeOutA = false;

void setup() { /////////////////////////////////////////////////////////////// setup starts

  size(1024, 576, P3D);
    
  pathA = sketchPath()+"/data/imagesA/";
  filenamesA = listfilenamesA(pathA);
  imagesA = new PImage[this.filenamesA.length]; 
  println("Listing all Image A files: ");
  printArray(filenamesA);
  println(this.filenamesA.length+" dir A images");
  
  for (int i = 0; i < this.filenamesA.length; i++) { 
  imagesA[i] = loadImage( "imagesA/"+i+".png");
  imagesA[i].resize(width, height);
  }
     
} //////////////////////////////////////////////////////////////////////////// setup ends

void draw() { ////////////////////////////////////////////////////////////////// draw loop

   tint(255, transparencyA);
   PImage outA = imagesA[imgNumA];
   image(outA, 0, 0);

   if ( millis() > startT1 + totalT1 ) {
   startT1 = millis();
   imgNumA = (int)random(this.filenamesA.length);
   if (imgNumA>=this.filenamesA.length)
   imgNumA=0; 
}

   if (transparencyA < 256 && fadeInA) {
   transparencyA += 1;
   println("fade_InA:", transparencyA);
   if (transparencyA >= 255) {
   fadeInA = false;
   fadeOutA = true;
    }
  }
  
    if (transparencyA > 0 && fadeOutA) {
    transparencyA -= 1;
    println("fadeOutA :", transparencyA);
    if (transparencyA <= 0) {
    fadeInA = true;
    fadeOutA = false;
    }    
  }
         
} ///////////////////////////////////////////////////////////////////////////////////////// draw loop end

  String[] listfilenamesA(String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    String names[] = file.list();
    return names;
  } else {
    // If it's not a directory
    return null;
  }
}

```

Been trying all afternoon!! Best wishes and thx, jnt

---

<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 20, 2023, 9:12am UTC](https://discourse.processing.org/t/random-select-images-and-fade-in-fade-out-according-to-variable-blend/40960/2 "2023-02-20T09:12:21Z")

</div>

Hi @JonnieNightTime,

Maybe you can have a look here if there some useful hints for you to use …

> [@Fading and Zoom (image slideshow)](https://discourse.processing.org/t/fading-and-zoom-image-slideshow/40812/5):
>
> 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 nextImageInde…

Cheers  
— mnse