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:

  1. Convert every pixel from RGB color into Lab color
  2. Pick n random grid cells to form the initial buckets
  3. Repeat until there are no changes:
    1. Calculate a Gaussian distribution of L, a, and b for all pixels in all grid cells in each bucket
    2. Calculate the Gaussian Lab distributions for each grid cell
    3. Remove all grid cells from their previous buckets
    4. Place each grid cell in the bucket that their distribution is closest to
    5. 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.