# Crop multiple images to any (quad) shape and place them side by side filling the canvas (comic strip)

**URL:** https://discourse.processing.org/t/crop-multiple-images-to-any-quad-shape-and-place-them-side-by-side-filling-the-canvas-comic-strip/41326
**Category:** Project Guidance
**Created:** [March 16, 2023, 6:00pm UTC](https://discourse.processing.org/t/crop-multiple-images-to-any-quad-shape-and-place-them-side-by-side-filling-the-canvas-comic-strip/41326 "2023-03-16T18:00:08Z")
**Posts on this page:** 1
**Showing post:** 5

<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: [March 18, 2023, 4:29pm UTC](https://discourse.processing.org/t/crop-multiple-images-to-any-quad-shape-and-place-them-side-by-side-filling-the-canvas-comic-strip/41326/5 "2023-03-18T16:29:50Z")

</div>

Hi @Twooze,

Welcome to the forum! 😉

This is an interesting problem, I tried to solve it in my free time so thanks for that!

As pointed by @Chrisir, you can achieve that by using the [`mask()`](https://processing.org/reference/mask_.html) function. It uses grayscale data to mask parts of an image: dark for deleting parts and white for keeping them.

Let’s suppose you have an image and you want to crop it with a quad that has a shear angle of 20 degrees:

 ![quad_mask](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/d/1d76faf799a6545723e034f3f6d63d49808a58a7.png)

You can compute the coordinates of the quad to draw and display that on an empty image in white (to mask the rest):

```processing
PImage maskImageWithQuad(PImage img, float shearAngle) {
  // Use the same dimensions for mask()
  PGraphics quadMask = createGraphics(img.width, img.height); 
  
  // Compute the distance for the coordinates
  float shearDist = img.height * tan(radians(shearAngle));
  
  // Draw the quad on an off-screen canvas
  quadMask.beginDraw();
  quadMask.fill(255);
  quadMask.quad(0, 0, shearDist, img.height, img.width, img.height, img.width - shearDist, 0);
  quadMask.endDraw();
  
  // Make a copy of the image and apply the mask
  PImage maskedImage = img.copy();
  maskedImage.mask(quadMask);
  
  return maskedImage;
}

```

And use it like this:

```processing
PImage img = loadImage(...);
PImage masked = maskImageWithQuad(img, 20); // in degrees

```

You need to handle the edge cases where the first and last image are not masked with the same quad (the x coordinates of some points are not offset).

Now this is nice but you also need to randomly create the layout with rows of same height but different number of images / orientation. For each row, choose a random orientation (left, vertical or right) and a random number of images to display.

I won’t give the full code now but here are the different collage I am getting (using images from [Lorem Picsum](https://picsum.photos/)):

 ![comic_9](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/9/b92eb915e76d3dc6b7769a360245ea71bfab6ad7.jpeg) ![comic_40](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/9/49b84338b6ee03e7b04785a2e0089d22beeb59e2.jpeg)

 ![comic_69](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/4/c4fb9dd1497ff7db9847dedc9e862c173e2b62e0.jpeg)

Tell me if you have more questions!

---

_[View the full topic](https://discourse.processing.org/t/crop-multiple-images-to-any-quad-shape-and-place-them-side-by-side-filling-the-canvas-comic-strip/41326)._