One of the challenges dealing with stroke/pen based input systems is finding corners in free form lines created by pen based drawing.
ShortStraw presents a simple yet accurate algorithm described in a recent (2008) paper for detecting corners.
To summarize this paper briefly from my understanding, ShortStraw takes in points of a stroke, resamples them, uses distances of points to determinate whether the points are from straight lines or corners.
I learnt about this a method when after stumbling on Felix Raab’s blog post, who created flex example of the ShortStraw algorithm implemented in actionscript.
This makes implementing a javascript version much easier, since most of the code can be derived heavily from the AS3 implementation. So here’s an example and the source code to my shortstraw.js implementation.
As usual, the demo uses html 5 canvas for drawing (sorry IE users, but any other modern browser like firefox, chrome or safari would work), jquery for simple event handling, and of course the shortstraw javascript file for corner detection.
For the daring, you may want to look at the paper Revisiting ShortStraw which describes iStraw, a technique which attempts to address the shortcomings of shortstraw, mainly in the area of curved lines.
p.s. The screenshot is in contrast with Steve Hanov’s html 5 canvas Web draw, which creates “wavy lines” while Shortstraw helps to “straighten” hand drawn lines.
Recent Comments