Comment by RyanZAG | Hacker News Reader

Comment by RyanZAG | Hacker News Reader

Parent Full thread

Yeah, there is smoothing of a sort.

Most of these kind of drawing boards will take the current mouse position as it moves (x,y), and drop down a pixel or circle onto the canvas at that point.

The smoothness you see here is that instead of just dropping down a point at each mouse coordinate, it creates a canvas path and simply adds a new point into the path and uses a quadratic curve between each point to do the smoothing. Effect does look pretty nice.

The code for doing this is a simple 4 lines, and is seen here: https://github.com/Leimi/drawingboard.js/blob/master/js/boar...

EDIT: For a bit more detail on how this differs from your link: your link is attempting to do the same, but is using javascript calculations to do the work rather than relying on the underlying browser implementation. This is why you see it only apply the smoothing when you stop drawing - the javascript would probably be too slow to run this in real time. Basically it comes down to your link using ctx.lineTo and this drawingboard using ctx.quadraticCurveTo

Thanks, FWIW the link I linked to was an implementation I did a week or so ago.

I'm actually using a similar browser based curve implementation (I'm using the bezier rendering thing instead of a quadratic) -- https://github.com/ezl/signature-pad/blob/master/jquery.sign...

The first pad is the original that just draws lines between the sampled points.

The second 2 actually take points and compute a cubic spline that runs through all the sampled points. The problem I have though is that it takes 4 points to compute a bezier curve, which means there are at least 4 sampled points worth of lag in determining what curve to render on the canvas.

For example, 4 sampled points on a line should render a totally linear segment between the points, but then if the 5th points goes off the line, it actually impacts the preceding points -- so you have to lag even further to make draw the right curve.

Even if you wait every 3 points to determine a quadratic that canvas's built-in can render, it creates some lag between the current mouse position and the rendered curve.

If you keep rendering quadratics every 3 points, you'll get funny cusps where you join each of the quadratics (solution seemed to me to compute the spline for the fully determined segments of the curve).

My janky solution is "draw linear segments until I have enough data, then restroke it with pretty curves". I didn't really understand the full implementation under the "responsiveness" section on Square's blog post here http://corner.squareup.com/2012/07/smoother-signatures.html so I glossed over it since it wasn't super critical.

But then when I saw this link, I couldn't help but think -- oh man, that's sexy...

As it happens, I'm working on something like this right now...

My current best solution is to use mouse/pen movement as cspline sample points, even when not drawing. The motion as you swing into a curve, even before the pen touches down, often predicts the trajectory of the pen stroke. (This also lets you "swing in" a circle without getting ugly linear segments).

This may be of limited utility on a touch-based device, however.

Reply on news.ycombinator.com