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:

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:

• javascript
• html
• image
• algorithm
• canvas

• 1 There must be a library out there that does this... this is a frequently required task. So it sounds like you want to do some type of vector tracing of a bitmap image. – Marc Audet Commented Apr 2, 2013 at 19:26
• Closely related to stackoverflow./questions/3038905/… – Marc Audet Commented Apr 2, 2013 at 19:36
• I'm trying to understand your question better. Are you asking how to generate a "Pointillism" image, but with triangles instead of dots? – markE Commented Apr 2, 2013 at 19:43
• I had added an url to the image that would be a result of the process. – ars265 Commented Apr 2, 2013 at 20:12
• An interesting question, which I hope gets reopened. – Drew Noakes Commented Apr 3, 2013 at 12:48

2 Answers 2

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./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 remend one.

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

This is a plugin for SVG that turns images into pointilized art: https://github./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 posed of "dots" and "squares".

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