As the user drags their stylus across the tablet, you receive a series of coordinates. You want to approximate the pen's path with a smooth line, trailing only a few sample points behind it. How would you do this?
In other words, how would you render a nice smooth responsive line as a user draws it with their tablet? Simply connecting the dots with straight lines is not good enough. Real drawing programs do a much better job of curving the line, no matter how close or far the sample points are. Some even let you give them a number to indicate the amount of smoothing to be done, accounting for jittery pens and hands. Where can I learn to do this stuff?
I know this is an old question but I had the same problem and I came with 2 different solutions:
The first approach is use two resolutions: One , when the user is inserting the path points connecting them with straight lines. Two , when the user finish the stroke delete the lines and draw the spline over. That should be smoother than the straight lines.
The second approach it is to smooth the new points with a weighted mean of the sampled points. So each time you get a new point [x1,y1] instead of painting it directly, you take the previous points [x2,y2] and create a new intermediate point with the weighted mean of the two points. The pseudocode could be something like:
newPoint = [x1,y1];
oldPoint = [x2,y2];
point2Paint = [(x1*0.3) + (x2*0.7), (y1*0.3) + (y2*0.7)];
oldPoint= newPoint;
Being 0.7 and 0.3 the coefficients for the weighted mean ( You can change them to get your desired smoothing :)
I hope this would help
UPDATE Dec 13: Here it is an article explaining different drawing methods, there are good concepts that can be applied (edge smoothing, bezier curves, smooth joints)
http://perfectionkills.com/exploring-canvas-drawing-techniques