Random Image Composition

Create a composition with randomly chosen and placed images. A variable in the Sketch (numberImages) tracks the number of images that the two random ones will be drawn from.

int numberImages = 5;

The loadImage() function randomly selects a number within the range of images available (in this example from 1 to 5) and uses that to load in the image with that number as a file name.

sourceImage = loadImage(ceil(random(numberImages)) + ".png");

Images in the same folder as the Sketch are each named with a number (i.e., 1.png).

The tint() function changes the opacity to a random value. The first image, sourceImage, is loaded at 0,0 to fill the background. The second image, sourceImage2, is loaded in at a random location.

Random Image Composition Code

PImage sourceImage;
PImage sourceImage2;
int imageWidth = 625;
int imageHeight = 530;
   
void setup() {
    size(625, 530);
    int numberImages = 5;
    sourceImage = loadImage(ceil(random(numberImages)) + ".png");
    tint(255, ceil(random(100)+130));
    image(sourceImage, 0, 0);
    sourceImage2 = loadImage(ceil(random(numberImages)) + ".png");
    tint(255, ceil(random(100)+130));
    image(sourceImage2, ceil(random(imageWidth)),
    ceil(random(imageHeight))); 
}

Random Composition with Four Images

Building on the first version, two more images are added. These are also loaded in randomly, and placed in random locations.

Random Composition with Four Images Code

PImage sourceImage;
PImage sourceImage2;
PImage sourceImage3;
PImage sourceImage4;
int imageWidth = 625;
int imageHeight = 530;
    
void setup() {
    size(625, 530);

    int numberImages = 5;

    sourceImage = loadImage(ceil(random(numberImages)) + ".png");
    tint(255, ceil(random(100)+130));
    image(sourceImage, 0, 0);

    sourceImage2 = loadImage(ceil(random(numberImages)) + ".png");
    tint(255, ceil(random(100)+130));
    image(sourceImage2, ceil(random(imageWidth)),
    ceil(random(imageHeight)));
    
    sourceImage3 = loadImage(ceil(random(numberImages)) + ".png");
    tint(255, ceil(random(100)));
    image(sourceImage3, ceil(random(imageWidth)),
    ceil(random(imageHeight)));
    
    sourceImage4 = loadImage(ceil(random(numberImages)) + ".png");
    tint(255, ceil(random(100)));
    image(sourceImage4, ceil(random(imageWidth)), 
    ceil(random(imageHeight)));
}

The repetition of the chunk of code that loads in an image is bulky. We can streamline it with a for loop.

Random Composition with Tints

Random Composition with Tints Code

In our for loop we can change the number of times to load in an image to match the number of images (as in this example) or to a different criteria.
This third version also adds random tints to the images.

//http://programmingisfun.com
int imageWidth = 625;
int imageHeight = 530;

void setup() {
    size(625, 530);
    int numberImages = 5;

    //first image no transparency, located at 0,0
    tint(ceil(random(255)), ceil(random(255)), ceil(random(255)), 255);
    image(loadImage(ceil(random(numberImages)) + ".png"), 0, 0);

   //other images with random transparency, tint, location
   for(int i=0; i< numberImages; i++) {
      tint(ceil(random(255)), ceil(random(255)), ceil(random(255)), ceil(random(100)));
      image(loadImage(ceil(random(numberImages)) + ".png"), ceil(random(imageWidth)),
      ceil(random(imageHeight)));
   }    
}

These code snippets were written in 2008 but work with the current version of Processing (as of this post, v3).