What is a Voronoi diagram?

A partition of a plane into regions based on distance to a set of points ("sites"): every location belongs to the region of its nearest site. This tool applies that idea to image pixels, coloring each region with a color sampled from the source image at its site.

How are the sites chosen?

Sites are scattered using a seeded, deterministic pseudo-random generator, so the same seed and cell count always reproduce the exact same layout - useful if you want a reproducible result rather than a different pattern every time.

What do the cell boundaries show?

When enabled, boundary pixels (pixels whose immediate right or bottom neighbor belongs to a different cell) are drawn in solid black, turning the mosaic into a visible diagram with clear cell edges rather than just a blocky color mosaic.

Why is a high cell count slow on large images?

The nearest-site search is brute-force: for every output pixel, it checks the distance to every site. That's fast for reasonable images and cell counts, but scales with width times height times cell count, so very large images with many cells can take noticeably longer.

PNG to Voronoi Diagram Converter - Mosaic Art from an Image

Overview

Introduction

This tool applies a real Voronoi diagram (a classic computational-geometry construction) to a PNG's pixels, entirely in your browser.

The result is a mosaic-like reinterpretation of the source image where each region takes its color from a single sampled point.

What Is PNG to Voronoi Diagram Converter?

A client-side PNG-to-Voronoi-diagram converter that scatters a set number of site points across the image using a seeded deterministic random generator, then assigns every pixel to its nearest site and colors it using the pixel sampled at that site's location.

An optional edge-drawing pass darkens boundary pixels between neighboring cells, making the underlying diagram structure visible rather than just producing a mosaic.

How PNG to Voronoi Diagram Converter Works

For a chosen cell count and seed, the tool generates that many pseudo-random (x, y) site positions within the image bounds using a small, fast, fully deterministic PRNG (mulberry32), so the same inputs always produce the same layout.

Every output pixel then finds its nearest site by brute-force distance comparison, is colored with the source image's pixel color at that site's coordinates, and (if edge drawing is enabled) is overridden to black when its right or bottom neighbor belongs to a different site's cell.

When To Use PNG to Voronoi Diagram Converter

Use it to create a stylized, low-poly-esque mosaic version of a photo or graphic for a background, thumbnail, or decorative asset.

It's also a fun way to visualize how Voronoi diagrams partition space, using a real image as the backdrop instead of abstract points.

Often used alongside PNG Rotator and PNG Dimensions Finder.

Features

Advantages

Runs entirely client-side; your image never leaves the browser.
Fully deterministic for a given seed, so results are reproducible rather than random every time.
Optional edge outlining turns a simple color mosaic into a genuine, readable diagram.

Limitations

The nearest-site search is brute-force, so processing time grows with width times height times cell count - very large images combined with high cell counts can take a while.
Cell count is capped at 300 to keep processing times reasonable in the browser.

Examples

Stylize a photo with 40 cells

Input

A 512x512 photo, cellCount 40, edges on

Output

A 512x512 mosaic with 40 irregular polygonal regions and black outlines

Each region is colored from a single sampled pixel, giving a faceted, stained-glass-like look.

Reproduce the exact same layout twice

Input

The same image, cellCount 20, seed 7, run twice

Output

Pixel-identical output both times

The deterministic PRNG guarantees the same seed always scatters sites in exactly the same positions.

Best Practices & Notes

Best Practices

Start with a lower cell count (20-60) for a clearly faceted look; higher counts approach the original image's detail.
Keep edge drawing on if you want the result to read as a diagram rather than a blurry mosaic.

Developer Notes

The pure algorithm lives in a lib function operating on a plain PixelBuffer with no DOM dependency, using a seeded mulberry32 PRNG for reproducible site placement and a brute-force O(width x height x cellCount) nearest-neighbor search per pixel, which is simple, correct, and fast enough for typical tool-sized images and cell counts.

PNG to Voronoi Diagram Converter Use Cases

Creating a stylized low-poly-style image effect
Generating a reproducible, seed-controlled mosaic background
Demonstrating Voronoi diagrams visually using a real photo

Common Mistakes

Setting a very high cell count on a large image and expecting an instant result - processing time scales with both.
Expecting two different seeds to produce the same layout - only an identical seed and cell count reproduce identical results.

Tips

Try a few different seeds at the same cell count to quickly compare several distinct mosaic layouts.
Turn edges off if you want a smoother, more painterly mosaic look instead of a diagram with visible borders.

PNG to Voronoi Diagram Converter