Hello!
I am trying to work out if there is a simple way to gradually fade photos on top of eachother? Basically, to show one image, which slowly fades in to the next, which slowly fades in to the next, etc.
I’ve been playing around with some code I found which does this with 2 images, but can’t work out how I’d continuously do it with say, 20 photos. Basically, I’ve slightly edited the same photo multiple times so using Processing I’d be making a slow animation.
Here’s the code I have now:
PImage img1, img2, img3, img4;
int flag = 0;
int t = 0;
void setup() {
size(600, 500);
img1 = loadImage("GirlMerge.png");
img2 = loadImage("Merge1.png");
img3 = loadImage("Merge2.png");
img4 = loadImage("Merge3.png");
frameRate(60);
background(255);
}
void draw() {
background(255);
if (t > 255) flag = 1;
//show the second image so the first image can be dissolved to it
if (flag == 1){
noTint();
image(img2, 0, 0);
}
if (t > 255) flag = 1;
// IMAGE 2
if (flag == 1){
noTint();
image(img3, 0, 0);
}
// IMAGE 3
if (flag == 2){
noTint();
image(img4, 0, 0);
}
// dissolve the first image in and out over the second image
// by modifying the tint alpha value
tint(255, t);
image(img1, 0,0);
t += inc;
// // note that t rises to full alpha + 120, and falls to zero alpha - 120
// // this technique maintains each picture at full alpha for two seconds between dissolves
if (t > 375) inc = -inc;
}
I’d appreciate some help on this, thanks in advance! 
You have two ways to do this. At pixel level or by changing the whole image at once. Changing image at pixel level might sound troublesome, but it’s well documented and lerpColor() function would be perfect for this type of change from one image to another.
At image level you have tools like blendModes and transparency. With tint() you can fade the old image by applaying transparency to it and bring in the new image step by step.
You have started with second option and tint() for applying transparency.
I would do it so that there are two PGraphics one for old image and second for new image. Ahh, its easier to code than explain it…
PGraphics newImage;
ArrayList<PImage> images;
int imageCount = 0; //currently shown image
int fadeLevel = 0; //stage of fading
int fadeSteps = 30; //number of steps in fading
int maxImages = -1; //total count of images
boolean repeat = true; //restart automatically at the end
void setup() {
images = new ArrayList<PImage>();
//load all your images to the images array
//...
// images.add(next image);
//...
maxImages = images.size();
frameRate(24); //frame rate effects also to the speed of fading
colorMode(RGB, 256,256,256, fadeSteps); //set transparency steps for tint to match used steps of fading
newImage = createGraphics(width, height);
newImage.colorMode(RGB, 256,256,256, fadeSteps); //set transparency steps for tint to match used steps of fading
}
void draw() {
background(0);
if(fadeLevel < fadeSteps) {
//add old image with fade out
image(images.get(imageCount), 0, 0, width, height); // use width & height so you don't have to worry about image size
tint(255, fadeLevel);
//add new image with fade in
newImage.beginDraw();
newImage.background(0);
newImage.image(images.get(imageCount+1), 0, 0);
newImage.tint(255, fadeSteps-fadeLevel);
newImage.endDraw();
//add new image to top of old image
image(newImage, 0, 0);
} else {
// No more fade steps left.
// Old image is fully trasparent and old image is fully opaque.
// Load new images and start fade again
}
}
So this is a fragment and there may still be some kinks in it. I’ve got to go work now. Hope this helps you forward and don’t hesitate to ask again if there’s troublesome parts left open.
1 Like
Hello, thank you so much for taking the time to give such a detailed reply, I really appreciate it! I’m not great with coding, so I’m sorry to be asking a silly question, how do I load my images in to the array?
I spent some time looking around and can’t find any examples that make it clear to me, or fit the way you did it. Do I have to declare the amount of images that will be in the array at the top like this?
PImage [] img = new PImage[9];
Sorry! I know this is a very basic thing and you’ve already taken the time to help, I’ve really tried to work this out myself 
Yes.
and then use loadImage
…[0]=loadImage(…);
When the images are enumerated you can use a
for loop
This example loads all images inside subfolder “data/” and assign them to a PImage[] array: 
/**
* Load All Images (v1.0.0)
* GoToLoop (2022/May/04)
*
* https://Discourse.Processing.org/t/
* how-do-i-slowly-layer-photos-to-appear-on-top-of-eachother/36698/5
*/
static final String PICS_EXTS = "extensions=,png,jpg,jpeg,gif,tif,tiff,tga,bmp";
static final float FPS = .25;
PImage[] images;
void setup() {
size(600, 500);
frameRate(FPS);
imageMode(CENTER);
images = loadAllImages();
if (images.length == 0) exit();
}
void draw() {
clear();
image(images[frameCount % images.length], width >> 1, height >> 1);
}
PImage[] loadAllImages() {
final File dir = dataFile("");
println(dir);
String[] imagePaths = {};
int imagesFound = 0;
if (dir.isDirectory()) {
imagePaths = listPaths(dir.getPath(), "files", "recursive", PICS_EXTS);
imagesFound = imagePaths.length;
java.util.Arrays.sort(imagePaths);
}
printArray(imagePaths);
println("Found", imagesFound, "image(s)");
final PImage[] imgs = new PImage[imagesFound];
for (int i = 0; i < imagesFound; imgs[i] = loadImage(imagePaths[i++]));
return imgs;
}
1 Like
Depends on data structure. With ordinary array, as example above have, you do. With ArrayList you don’t need to. Ordinary array is most likely easier to work with.
Converted my “Load All Images” Java Mode sketch example to Python Mode: 
"""
Load All Images (v1.0.0)
GoToLoop (2022/May/04)
https://Discourse.Processing.org/t/
how-do-i-slowly-layer-photos-to-appear-on-top-of-eachother/36698/7
"""
PICS_EXTS = "extensions=,png,jpg,jpeg,gif,tif,tiff,tga,bmp"
FPS = .25
def setup():
size(600, 500)
frameRate(FPS)
imageMode(CENTER)
global images
images = loadAllImages()
len(images) or exit()
def draw():
clear()
image(images[frameCount % len(images)], width >> 1, height >> 1)
def loadAllImages():
dir = this.dataFile('')
print dir
imagePaths = ()
imagesFound = 0
if dir.directory:
imagePaths = this.listPaths(dir.path, 'files', 'recursive', PICS_EXTS)
imagesFound = len(imagePaths)
imagePaths = sort(imagePaths)
printArray(imagePaths)
print "Found %d image(s)" % imagesFound
return tuple(map(loadImage, imagePaths))