Writing a paint program à la MS Paint - how to interpolate between mouse move events?

Question

I want to write a paint program in the style of MS Paint.

For painting things on screen when the user moves the mouse, I have to wait for mouse move events and draw on the screen whenever I receive one. Apparently, mose move events are not sent very often, so I have to interpolate the mouse movement by drawing a line between the current mouse position and the previous one. In pseudocode, this looks something like this:

var positionOld = null

def handleMouseMove(positionNew):
    if mouse.button.down:
        if positionOld == null:
            positionOld = positionNew
        screen.draw.line(positionOld,positionNew)
        positionOld = positionNew

Now my question: interpolating with straight line segments looks too jagged for my taste, can you recommend a better interpolation method? What method do GIMP or Adobe Photoshop implement?

Alternatively, is there a way to increase the frequency of the mouse move events that I receive? The GUI framework I'm using is wxWidgets.

GUI framework: wxWidgets.
(Programming language: Haskell, but that's irrelevant here)

EDIT: Clarification: I want something that looks smoother than straight line segments, see the picture (original size):

EDIT2: The code I'm using looks like this:

-- create bitmap and derive drawing context
im      <- imageCreateSized (sy 800 600)
bitmap  <- bitmapCreateFromImage im (-1)    -- wxBitmap
dc      <- memoryDCCreate                   -- wxMemoryDC
memoryDCSelectObject dc bitmap

...
-- handle mouse move
onMouse ... sw (MouseLeftDrag posNew _) = do
    ...
    line dc posOld posNew [color     := white
                          , penJoin  := JoinRound
                          , penWidth := 2]
    repaint sw                              -- a wxScrolledWindow

-- handle paint event
onPaint ... = do
    ...
    -- draw bitmap on the wxScrolledWindow
    drawBitmap dc_sw bitmap pointZero False []

which might make a difference. Maybe my choices of wx-classes is why I'm getting a rather low frequency of mouse move events.

Answer 1

Live demos

• version 1 - more smooth, but more changing while you draw: http://jsfiddle.net/Ub7RV/1/
• version 2 - less smooth but more stable: http://jsfiddle.net/Ub7RV/2/

The way to go is 

Spline interpolation of the points

The solution is to store coordinates of the points and then perform spline interpolation.

I took the solution demonstrated here and modified it. They computed the spline after you stop drawing. I modified the code so that it draws immediately. You might see though that the spline is changing during the drawing. For real application, you probably will need two canvases - one with the old drawings and the other with just the current drawing, that will change constantly until your mouse stops.

Version 1 uses spline simplification - deletes points that are close to the line - which results in smoother splines but produce less "stable" result. Version 2 uses all points on the line and produces much more stable solution though (and computationally less expensive).

Answer 2

You can make them really smooth using splines: http://freespace.virgin.net/hugo.elias/graphics/x_bezier.htm

But you'll have to delay the drawing of each line segment until one frame later, so that you have the start and end points, plus the next and previous points available for the calculation.