Mosaic engine guide

Overview

Mosaic engine breaks a picture into flat pieces and paints each piece one colour.

The sample picture of pink, blue and orange peaks under a gold sun, broken into flat-coloured triangles outlined in thin dark lines
The Low poly preset on the sample: 1,200 points joined into triangles, with thin dark lines added.

The result is a mosaic: a tessellation of cells laid over the picture, each filled with the average colour of the picture under it.

The main mode is Delaunay triangulation. The tool scatters points over the picture, then joins them into triangles so that no point sits inside the circle through any triangle's three corners. That rule keeps the triangles wide instead of thin as slivers, which gives the low-poly look.

The points are not spread evenly. The tool first finds the edges in the picture with a Sobel filter, and edge weight makes points gather along them, so outlines survive with fewer cells.

Voronoi reads the same points the other way round: one cell around each point, holding the ground nearest to it. The tool builds those cells from the triangles, joining the centres of the circles around each point.

Five more modes lay hexagons, squares, diamonds, dots or bricks over the picture instead. Eight presets set everything at once, and three animations play the picture in.

Open Mosaic engine Start here

In this guide

  1. StartWhat you need, your first mosaic, and how to save it.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the settings that made them.
  4. HelpWhat to do when something goes wrong.

It runs in your browser on a 2D canvas. Nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.