[d55]

I failed in doing something very similar. Could you explain how you split the image up into triangles?

[dsp1234]

There is a link at the bottom of the page that links to https://medium.com/@williamngan/kubist-6ed1d8025806 which appears to be an explanation on how it works.

[lelandbatey]

In the demo there's also a second mode called "Cell" that seems reminiscent of sampling via Poisson Disc, which you can read more about in Mike Bostock's excellent "Visualizing Algorithms" post.[0]

[0] - http://bost.ocks.org/mike/algorithms/

[metaphorical]

Yep, both delaunay ("Triangle") and voronoi ("Cell") uses "best candidate algorithm" to distribute the points by default. It's similiar to poisson disc.

The "Analyze image" uses JSFeat to apply a computer vision algorithm (feature point detection) to add some "interesting" points based on the image.

[metaphorical]

Yes. I use d3.geom.delaunay or d3.geom.voronoi to create the delaunay or voronoi tessellation.

http://bl.ocks.org/mbostock/4341156

Then for each polygon, I take its points (center point or vertices or an arbitrary point) and find the corresponding pixel on the image. Then I extract the rgb color, and use that to fill the polygon (as solid color or gradient).