Question

I am currently developing a little sketching application based on HTML5 Canvas element. There is one particular problem I haven’t yet managed to find a proper solution for.

The idea is that the user will be able to manipulate existing stroke data (points) quite freely. This includes pushing point data around (ie. magnet tool) and manipulating it at whim otherwise (ie. altering color).

Note that the current brush engine is able to shade by taking existing stroke data in count. It’s a quick and dirty solution as it just iterates the points in the current stroke and checks them against a distance rule.

Now the problem is how to do this in a nice manner. It is extremely important to be able to perform efficient queries that return all points within given canvas coordinate and radius. Other features, such as space usage, should be secondary to this. I don’t mind doing some extra processing between strokes while the user is not painting.

Any pointers are welcome. 🙂

Answer 1

You want to have a look at spatial indexing in general. Johan has a good suggestion with the quadtree. Other data structures that might work:

• kd-tree
• vp tree
• simple grid index