EN 
Українська
Polski
Español
Deutsch
日本語
Italiano
Português (BR)
Français
العربية
Nederlands
中文
한국어
हिन्दी
Türkçe
Tiếng Việt
Русский
Bahasa Indonesia
فارسی
বাংলা
ไทย
Filipino
Kiswahili
اردو
Bahasa Melayu
தமிழ்
עברית
Ελληνικά
ਪੰਜਾਬੀ
አማርኛ
မြန်မာဘာသာ
ខ្មែរ
ქართული
नेपाली
Монгол хэл
Հայերեն
සිංහල
ລາວ
Čeština
Română
Magyar
Български
Svenska
Dansk
Suomi
Norsk
Slovenčina
Hrvatski
Српски
Slovenščina
Lietuvių
Latviešu
Eesti
Íslenska
Shqip
Македонски
Bosanski
Malti
Azərbaycanca
Қазақша
O'zbekcha
Тоҷикӣ
Кыргызча🔷 2D Voronoi Diagram — Nearest-Neighbour Geometry
Real 2D Voronoi tessellation computed per-pixel by nearest-seed distance. Drag sites live, toggle the Delaunay dual triangulation, and switch Euclidean, Manhattan and Chebyshev metrics.
A real per-pixel Voronoi tessellation: every sample is coloured by brute-force nearest-site search, drag the sites and the whole diagram recomputes live, and the Bowyer-Watson Delaunay overlay reveals the dual triangulation.
🔬 What It Demonstrates
Nearest-neighbour partitioning under three different distance metrics — Euclidean, Manhattan and Chebyshev — each producing genuinely different cell shapes from the same seed layout, plus the Delaunay triangulation computed with a real incremental Bowyer-Watson algorithm.
🎮 How to Use
Click empty space to add a site, drag any site to move it and watch the cells update in real time, right-click a site to remove it, and toggle the Delaunay overlay to see the dual graph. Lloyd relax nudges every site toward its cell's centroid.
💡 Did You Know?
Manhattan and Chebyshev metrics turn smooth Voronoi cells into diamonds and squares respectively — the same nearest-neighbour rule, but a different notion of "distance" reshapes the entire tessellation.
About the 2D Voronoi Diagram Generator
This generator computes a real Voronoi tessellation by brute-force nearest-site search over every pixel of an offscreen buffer, then scales the result onto the canvas. Sites are draggable and the tessellation recomputes on every move, with an optional Bowyer-Watson Delaunay triangulation drawn as an overlay, and a choice of Euclidean, Manhattan or Chebyshev distance.
Unlike a GPU shader approximation, every cell boundary here comes directly from comparing real distances between sample points and seeds, and the Delaunay triangulation is built incrementally by testing points against triangle circumcircles — the textbook algorithm, not a shortcut.
Frequently Asked Questions
How is this Voronoi diagram actually computed?
For every pixel in an offscreen low-resolution buffer, the distance to every site is measured and the pixel is coloured by whichever site is nearest — a genuine brute-force nearest-neighbour search, not a texture trick.
What is the Delaunay triangulation overlay?
It is the Voronoi diagram's dual graph, built here with the real Bowyer-Watson incremental algorithm: each site is inserted, triangles whose circumcircle contains it are removed, and the resulting hole is re-triangulated around the new point.
Why do the distance metrics change the cell shapes?
Euclidean distance gives smooth, straight-edged cells. Manhattan distance (sum of axis differences) produces diamond-edged boundaries, and Chebyshev distance (largest axis difference) produces square-influenced boundaries — the same nearest-site rule under a different geometry.
What does Lloyd relax do?
It moves every site to the centroid (average position) of the pixels currently assigned to its cell, computed from the same buffer used to draw the diagram. Repeating it evens out cell sizes and spacing.
Why is the diagram computed at lower resolution than the canvas?
Brute-force nearest-site search costs one distance check per site per sample point. Capping the buffer width keeps that cost bounded so dragging a site stays responsive even with many sites, while the diagram is still a genuine per-pixel computation, just at buffer resolution.
How do I remove a site?
Right-click (or long-press context menu on touch devices) on a site to delete it; the diagram and the site counter update immediately.
A real per-pixel 2D Voronoi tessellation computed by brute-force nearest-site search, with draggable sites, a Bowyer-Watson Delaunay triangulation overlay, and Euclidean, Manhattan and Chebyshev distance metrics that genuinely reshape every cell.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install