The image is being replaced by a pixelated version of itselft. Pixels are represented by circles of varying sizes.

The resulting figure uses a quadtree to partition the space in smaller and smaller areas. The quadtree is seeded by points chosen randomly in the original image. Each point carries the local color of the image.

Notice that more circles are places in areas that have high contrast in the original image. This is done by using weights (equal to local contrast) when points are randomly chosen (see implementation in point-picker.js).

The idea for this sketch came once again from one of Dan Shiffman’s videos.

Show/hide code - scripts/quadtree-pixelization.js

Show/hide code - scripts/point-picker.js

Show/hide code - scripts/quadtree.js