0

I need to draw a curve on a webpage in response to data generated by a Wacom Pen. So JavaScript will receive an array of x,y,pressure data.

I could just join the dots, but I want make it scale-free. So even if you zoom in to look at a single glyph it still looks good.

I'm imagining somehow smoothing the data. So if the original data was ... (10,5) (11,6) (12,6) (13,6) (14,5) then after smoothing it might look like (10,5.8) (11,5.95) (12,6.15) (13,5.7) (14,5.2) etc depending of course on what is happening outside of the interval.

I could do that by placing springs between the points and setting the tension. In a single pass, each point would get pulled towards alignment. I could reduce the tension by 10% for each of 10 subsequent passes say.

Or maybe some kind of lowpass filtering: pt_out[n] = .9*pt_out[n-1] + .1*pt_in[n]

And I would need to be careful to identify where a movement starts and stops so it doesn't try to average over points where the pen is not on the paper.

Once I'm happy with the smoothed point data, I suppose I could for each point construct a perpendicular vector and create a left-point and right-point say 3px (if I want a 6px brush) along in the + and - direction.

Then I can construct a triangle strip from these left&right points and use GL to render.

But I'm guessing this must be solved problem. I don't want to reinvent the wheel. I'm going to ask here in case someone out there has had to solve a similar problem.

P i
  • 29,020
  • 36
  • 159
  • 267
  • 1
    You're offering a lot of "I could...", so: just start doing all those things and see whether that leads to victory? As is, your question has no real question, it's just a lot of thinking out loud about how to get started, which is not the point where Stackoverflow is involved yet. Stackoverflow is here for after you start writing code, and that code doesn't work despite you being sure it should work, and your own debugging did not reveal why it's broken. Maybe start with https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm? (or, use code someone else already wrote) – Mike 'Pomax' Kamermans May 15 '16 at 22:08

1 Answers1

0

I don't think smoothing the data points will completely solve your problem. If you still draw the curve by joining the smoothed data points by straight lines, the curve will still look zig-zagged when you zoom in close enough.

If you can use SVG to render the curve, you can use SVG path which has the capability to draw quadratic or cubic Bezier curves. Of course, you will have to compute the control points for the Bezier curves from your data points, which can be done via Catmull-Rom splines.

fang
  • 3,473
  • 1
  • 13
  • 19
  • Drawing on a `canvas` element via JavaScript's 2D context can create paths between points using quadratic and cubic Bézier curves. – jeffjenx May 16 '16 at 01:52