2

Currently I'm using "Douglas Peucker" algorithm.

My problem is that when I'm drawing,the previously drawn lines are also changing which of course not realistic. Is there other alternative algorithm to minimize the saved points but not altering the previous drawn points or other way to alter "Douglas Peucker" to fit my need?

ajbee
  • 3,511
  • 3
  • 29
  • 56
  • Er. You want a simplify tool that doesn't simplify? – zipzit Nov 01 '15 at 03:18
  • Seriously though just change your tolerance acceptance until you get the right blend of accuracy and storage size. – zipzit Nov 01 '15 at 03:26
  • If you were extraordinary programmer you could write a spline implementation. (Bezier, Bspline, NURBs, etc). Cat Mull Spline would be my recommendation as that uses control points on the output curve. I will say that is a huge undertaking. – zipzit Nov 01 '15 at 03:42
  • Thanks for the info. I will try to understand what you recommend little by little. – ajbee Nov 01 '15 at 03:45
  • Found this http://jsfiddle.net/gNdwD/ , but it's way too complicated – ajbee Nov 01 '15 at 03:56

1 Answers1

2

Give your pencil drawing tool 2 optional methods for drawing:

  • Draw a new point on the path using mousemove (which is your current freeform method). This option will let the user add many points which will allow them to be very detailed in their drawing.

  • Draw a new point on the path only upon mousedown. This option simply connects the previous point on the path to the newly clicked point. This option will let the user add just a few very straight lines which will allow them to outline figures with long running straight edges.

If you are concerned about the freeform path changing while the user is drawing you can apply the simplifying algorithm just once after they have stopped moving the mouse for 1 second.

If you specify the Douglas-Peucker algorithm use a high bias for accuracy then the simplified path will remain quite true to the unsimplified path.

BTW, if you want to draw splines through your points then check out this nice previous post: how to draw smooth curve through N points using javascript HTML5 canvas?

Community
  • 1
  • 1
markE
  • 102,905
  • 11
  • 164
  • 176
  • very interesting answer. Correct me if I'm wrong that I can use Cat Mull Spline to minimize the saved points? – ajbee Nov 02 '15 at 00:50
  • No. Cat-Mull Splines connect a set of points with curves but they do not minimize the count of points in the set. Cat-Mull can make a path "curvier" ("prettier?"), but it won't do anything to minimize the count of saved points. – markE Nov 02 '15 at 01:08
  • Thanks for that. It seems that my only choice now is to modify Douglas-Peucker to meet my needs – ajbee Nov 02 '15 at 01:12
  • 1
    ...or (as in my answer) give the user 2 alternative pencil tools. One tool for detailed paths and another tool for running straight line paths. :-) Good luck with your project! – markE Nov 02 '15 at 01:15
  • I already did it :) my implementation is I saved all the points in an array then apply Douglas-Peucker to minimize the saved points, then consider snapping when slow mouse move to further minimize the saved points. – ajbee Nov 02 '15 at 02:33
  • hmm, I will make another thread on how to detect the drawn points – ajbee Nov 02 '15 at 02:40
  • Hopefully you can give me an idea on http://stackoverflow.com/questions/33473456/how-to-detect-and-move-drag-the-free-flow-drawn-lines-in-html-canvas – ajbee Nov 02 '15 at 08:30