4 ms·

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

• dsp1234 11y ago
  There is a link at the bottom of the page that links to https://medium.com/@williamngan/kubist-6ed1d8025806 https://medium.com/@williamngan/kubist-6ed1d8025806 which appears to be an explanation on how it works.
  • lelandbatey 11y ago
    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/ http://bost.ocks.org/mike/algorithms/
    • metaphorical 11y ago
      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 11y ago
  Yes. I use d3.geom.delaunay or d3.geom.voronoi to create the delaunay or voronoi tessellation. http://bl.ocks.org/mbostock/4341156 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).