Drawing brush strokes

I am currently drawing lines between each call of mouseDragged from a MouseListener, which seems like a crude and basic way of drawing brush strokes and using Graphics2D to change stroke size.

http://img112.imageshack.us/img112/7952/strokesvp1.jpg

How would I be able to make the strokes smoother, would it require a different base code (not using the mouseDragged event and Graphics2D), processing the strokes afterwards, or both?

What you basically have to do is interpolate between the points!

Do you use the Double Buffering to draw on the Canvas? This would give you smoother graphics while drawing in real-time.

I am currently not using active rendering. I am just concerned with the actual strokes at this point.

Maybe enabling anti-aliasing would smooth it out?

Is that picture meant to be representative of the output generated by your current implementation?

If so, how did you end up with gaps in your path? (unless you purposefully released the mouse button at those points.)

It’s all to do with (a) interpolation, and (b) smoothing!

Would anyone mind going into more detail about interpolation and smoothing? Google isn’t being my friend right now, as I can’t seem to find any good resources.

And yes, that is a screenshot of the current implementation and the gaps are intentional, I was just showing the jagged-ness of the strokes

I think I would do something like… making it actual line position lag 4 inputs behind, using some spline for the last… like… dunno… 6 points to that lagged point. On release finish the remaining stuff via spline-ing and enable antialiasing.

Something like that perhaps :slight_smile:

First off your aim is to second guess the users curve - knowing that it is likely to have inaccuracies. People have difficulty using the mouse, and quick strokes (even with tablets) are prone to a few errors so you want to smooth the curve out a little.

There is a general, all purpose smoothing method called low pass. It is so general that it is used by both music applications (as a low pass filter, and is an EQ filter) and in image applications as blur! In fact it belongs to the same family of processes that is used for image sharpening, sound frequency boosting and edge detection!!!

You will be doing a similar thing with paths. I have found an article explaining the basics of line smoothing algorithms. When calculating this from any given path you have the distances of the points as an estimation of the speed of drawing, however when your user has just drawn it you have the true speed of movement.

One thing that I always thought was missing from the many drawing packages was the ability to sketch a line - where you draw many short lines and will go over many of your lines. That way you have better data to work with and the user will be able to make much more accurate drawings!

P.s. my google search terms were “curve smoothing algorithm”, take algorithm off of it and you will have a lot of non-helpful results :slight_smile:

There are no gaps in the source image, it got scaled down by the forum software.

Oh, those gaps, yeah silly forum ;D

Thanks for the link to the article, going to look into it tomorrow after I get some sleep