Algorithm for Image Sampling for Polygonal Representation using Canvas and JavaScript?

Question

First off I'm not used to dealing with images, so if my wording is off please excuse me.

I am looking to take an image that is dropped onto a HTML5 canvas, sample it, do a reduction of the sampling, then create a polygonal representation of the image using mostly triangles with a few other polygons and draw that image to the canvas.

But I do not know where to start with an algorithm to do so. What sort of pseudocode do I need for this kind of algorithm?

This image may offer a better understanding of the end result:

Answer 1

I would do the following:

1. Create a field of randomly-placed dots.
2. Create a Voronoi diagram from the dots.
   • Here's a good JavaScript library that I've used in the past for this: https://github.com/gorhill/Javascript-Voronoi
3. Color each cell based on sampling the colors.
   • Do you just pick the color at the dot? Sample all the colors within the cell and average them? Weight the average by the center of the cell? Each would produce different but possibly interesting results.

If the result needs to be triangles and not polygons, then instead of a Voronoi diagram create a Delaunay triangulation . GitHub has 15 JavaScript libraries for this , but I've not tried any to be able to specifically recommend one.

Answer 2

Ok, it's a bit indirect, but here goes.....!

This is a plugin for SVG that turns images into pointilized art: https://github.com/gsmith85/SeuratJS/blob/master/seurat.js

Here's the interesting part. Under the hood, it uses canvas to do the processing!

The examples show images composed of "dots" and "squares".

Perhaps you can modify the code to produce your triangles -- even just cut the squares diagonally to create triangles.