Generative photo collage

Processing Coding Questions
1

I’m attempting to create a visual collage with the same effect as this one:

Screen Shot 2020-02-25 at 10.18.46 PM
Screen Shot 2020-02-25 at 10.18.46 PM692×659 967 KB

Multiplicity + Masking + Cropping + Size Variation + Random Placement are the key factors I’d like to integrate.I’m new to Processing so I’m unsure how big of a learning curve these integrations will be. So far I’ve only been able to add photos at random sizes.

PImage img1;  // Declare variable "a" of type PImage
PImage img2;  // Declare variable "a" of type PImage

void setup() {
  size(640, 360);
  // The image file must be in the data folder of the current sketch 
  // to load successfully
  img1 = loadImage("1_1.jpg");  // Load the image into the program  
  img2 = loadImage("1-2.jpg");
}

void draw() {
  // Displays the image at its actual size at point (0,0)
  image(img1, 0, 0);
  // Displays the image at point (0, height/2) at half of its size
  image(img1, 0, height/2, img1.width/2, img1.height/2);
  image(img2, 0, height/6, img2.width/6, img2.height/6);
}

Any help will do.

1 Like
2

Hi there,

Welcome to the forum! :slight_smile:
First of all, you can format your code using the </> button in the message editor.

Here are interesting functions you can look at :

Don’t hesitate if you have more questions.

2 Likes
3

Here is an example of a program (look at it only after you tried to solve the problem :slight_smile:) :
Feel free to add variations (size, rotation, colors…).

Code 
//The original image
PImage img;

//The number of images to draw
int nb_imgs = 500;

//The size of each individual images
int copy_size = 40;

void setup(){
  //The size of the canvas is the size of the image
  size(850, 850);
  
  //Load the image
  img = loadImage("my_image.png");
}

void draw(){
  //Draw my image
  image(img, 0, 0);
  
  //The loop to draw the images
  for(int i=0; i<nb_imgs; i++){
    //Get random x and y location
    int x = (int) random(width - copy_size);
    int y = (int) random(height - copy_size);
    
    //Get a copy of the image at the location
    PImage copy = img.get(x, y, copy_size, copy_size);
    
    //Draw that image again randomly on the screen
    image(copy, random(width - copy_size), random(height - copy_size));
  }
  
  //We don't need it to loop
  noLoop();
}
1 Like