# Generative photo collage

**URL:** https://discourse.processing.org/t/generative-photo-collage/18129
**Category:** Coding Questions
**Created:** [February 26, 2020, 6:23am UTC](https://discourse.processing.org/t/generative-photo-collage/18129 "2020-02-26T06:23:50Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![jeaan](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@jeaan](https://discourse.processing.org/u/jeaan)
#### Post date: [February 26, 2020, 6:23am UTC](https://discourse.processing.org/t/generative-photo-collage/18129/1 "2020-02-26T06:23:50Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/504d152f64a45c86fb9924263ed17e661d4acad6.png)

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.

```auto
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.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 26, 2020, 2:03pm UTC](https://discourse.processing.org/t/generative-photo-collage/18129/2 "2020-02-26T14:03:06Z")

</div>

Hi there,

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

Here are interesting functions you can look at :

- [Copy](https://processing.org/reference/copy_.html)
- [Get](https://processing.org/reference/get_.html)
- [Random](https://processing.org/reference/random_.html)

Don’t hesitate if you have more questions.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 26, 2020, 2:17pm UTC](https://discourse.processing.org/t/generative-photo-collage/18129/3 "2020-02-26T14:17:18Z")

</div>

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

> **Code**
>
> ```auto
> //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();
> }
> 
> ```