Collage Brush
March 26, 2020
Live demo
A small tool to for cutting an image into pieces of similar texture and then drawing a collage with them.
Cutting the image
First, the input image is divided into a grid. The goal is to then create up to n distinct buckets that grid cells can be divided into, representing different collage brushes. Here's how that is created:
- Convert every pixel from RGB color into Lab color
- Pick n random grid cells to form the initial buckets
- Repeat until there are no changes:
- Calculate a Gaussian distribution of L, a, and b for all pixels in all grid cells in each bucket
- Calculate the Gaussian Lab distributions for each grid cell
- Remove all grid cells from their previous buckets
- Place each grid cell in the bucket that their distribution is closest to
- Remove empty buckets
Afterwards, each bucket should represent a distinct shade that can be selected as if from a color picker.
Drawing with collage brushes
A user then picks a shade and clicks and drags over the image. This places a reference to that shade at the user's mouse location.
To render an image, for each shade reference on the canvas, place a random grid cell from that shade's bucket.