Overview
Introduction
This tool applies a low-poly triangle mosaic effect to a PNG, computed entirely client-side.
It's the classic flat-shaded triangulated art style, popular for stylized posters and geometric wallpapers.
What Is PNG Triangulator?
A triangulation mosaic generator that divides the image into a grid of square cells, splits each cell diagonally into two triangles, and flat-shades each triangle with the average color of the pixels it contains.
The result has twice the facets of simple pixelation at the same cell size, giving it a more angular, polygon-art look.
How PNG Triangulator Works
For each grid cell, every pixel is classified into one of two triangles based on which side of the cell's top-left-to-bottom-right diagonal it falls on.
The average color (and alpha) is computed separately for each triangle's pixels, and every pixel in that triangle is repainted with its triangle's average.
When To Use PNG Triangulator
Use it to create a stylized low-poly rendition of a photo or graphic for a poster, wallpaper, or app icon.
It's also a quick way to generate an abstract geometric texture from an existing image's color palette.
Often used alongside PNG Hexagonalizer and PNG Vignette Effect Adder.
Features
Advantages
- Runs entirely client-side; your image never leaves the browser.
- Produces genuinely triangulated facets rather than simple square blocks.
- Adjustable cell size for anything from subtle faceting to bold abstract art.
Limitations
- This uses a fixed grid of triangles rather than a randomized Delaunay triangulation, so the result is more regular/geometric than some low-poly art styles.
- Triangle cells at the image's edges are partial (clipped by the canvas bounds), so their average is computed only from the pixels that actually fall within the image.
Examples
Best Practices & Notes
Best Practices
- Start with a moderate cell size and adjust based on how abstract you want the result to look.
- Higher-contrast source images tend to show the triangular facets more clearly.
Developer Notes
The pure triangulation math lives in a lib function operating on a plain Uint8ClampedArray pixel buffer with no DOM dependency, classifying each pixel within a cell into one of two triangles via a simple linear diagonal test (relX/cellWidth + relY/cellHeight <= 1) rather than a full geometric triangle-rasterization routine.
PNG Triangulator Use Cases
- Creating a low-poly art style rendition of a photo
- Generating geometric wallpapers or poster backgrounds
- Producing a stylized, faceted app icon or logo treatment
Common Mistakes
- Expecting randomly-placed triangle vertices like some Delaunay-based low-poly generators — this uses a fixed regular grid split diagonally.
- Using an extremely small cell size on a very large image and being surprised at the processing time.
Tips
- Combine with the hexagonalizer tool to compare triangular versus hexagonal low-poly styles on the same source image.
- Try a large cell size for a bold poster-style graphic, or a small one for a subtle textured finish.