5

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:

Community
  • 1
  • 1
ars265
  • 1,949
  • 3
  • 21
  • 37
  • 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 Apr 02 '13 at 19:26
  • Closely related to http://stackoverflow.com/questions/3038905/how-can-i-convert-simple-shape-bitmap-to-vector-geometry – Marc Audet Apr 02 '13 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 Apr 02 '13 at 19:43
  • I had added an url to the image that would be a result of the process. – ars265 Apr 02 '13 at 20:12
  • An interesting question, which I hope gets reopened. – Drew Noakes Apr 03 '13 at 12:48
  • Glad it was reopened. I was going to add a bounty on this to give it some attention as the only answer so far is (as the author pointed out) quite a long way from what you want. I'd like to see how this is done! Unfortunately I don't see a way of adding a bounty now. Perhaps because it has an answer with a few votes...? – Drew Noakes Apr 03 '13 at 13:02
  • @DrewNoakes If I remember correctly, you can't start bounties on questions that are less than 2 days old – Rachel Apr 03 '13 at 14:16
  • @Drew in case you're wondering, I plan on converting the image to gray-scale, sampling and find the points at which a tolerance falls over then using those points versus random points. Not sure how others would do it but it seemed logical to me. Then I'll probably average the colors inside the shape and fill using that color, all while probably using the Delaunay Triangulation the Phrogz mentioned below. – ars265 Apr 03 '13 at 18:59
  • @ars265, it would be great if you could post a link of your results. Sounds really interesting. – Drew Noakes Apr 03 '13 at 19:42
  • @DrewNoakes, I won't have time to probably create the code until the weekend but I'll try to remember to post back a link. – ars265 Apr 03 '13 at 19:44

2 Answers2

5

I would do the following:

  1. Create a field of randomly-placed dots.
  2. Create a Voronoi diagram from the dots.
  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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 1
    +1. This sounds like a promising approach, though by using randomly distributed dots you'll end up with randomly sized polygons. The resulting image may represent the original image in colour only, not in form. – Drew Noakes Apr 03 '13 at 13:07
  • Educational! Thanks for that. – Ben Yep Apr 03 '13 at 13:07
  • Thank you very much, what I was looking for was the Voronoi and Delaunay triangulation information but I just had no starting point. – ars265 Apr 03 '13 at 13:08
4

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.

markE
  • 102,905
  • 11
  • 164
  • 176
  • Interesting library, I'll look into it further and see if I can manipulate the images the way I'm thinking. Thanks. – ars265 Apr 02 '13 at 20:06