Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render a smooth path given a set of data points?

I've been puzzling over path rendering for the past couple of days without any real solution.

By path rendering I mean given a set of x,y data points (at varying distance) to draw a dashed line (or in my case a rotated quad) of fixed length at regular intervals between the give data set points to create a smooth path.

If you have flight control for the iPhone I'm trying to create a similar effect to the path rendering in that game.

Here's my problem. If the width of the graphic + the gap is not devisable exactly in to the distance between the 2 dataset points I am then left with an overlap or underlap. My only solution to this is either

1) Take the overlap/underlap point to be the end point of the next data set point and then draw from there to the following point.

2) Always draw under the final endpoint and start a fresh from the next data point.

Neither of these solutions are ideal and both have problems.

Does anyone have a better solution?

Any help would be much appreciated.

The following screen illustrates what I'm trying to create : http://www.firemint.com/flightcontrol/screenshots-peaceful.html

The thick dotted line.

Update:

Hi I tried rendering via curves, I calculated a cubic curve (via 4 control points). However the problem is one of interpolation. Given 0 and 1 I can step through any 2 points. However I want to step through the entire path (multiple control points). The problem is that some control points will be a different distance apart, and thus steping through at a constant stepping increment (say 0.2) will produce irregular results. I realise in order to correctly step through the entire path I'd need to calculate the length of the entire curve ... question is how do I do that? ... or is there another way?

Cheers Rich

like image 728
Rich Avatar asked Aug 03 '09 14:08

Rich


3 Answers

There's a CoreGraphics function called "CGPathAddQuadCurveToPoint" that's used for drawing smooth paths. An example on how to use it is on GitHub.

like image 97
Dave DeLong Avatar answered Nov 16 '22 03:11

Dave DeLong


You might want to have a look at Bezier curves or hermite curves they are not that hard to calculate and you get nice soft curves.

like image 31
Patrick Cornelissen Avatar answered Nov 16 '22 04:11

Patrick Cornelissen


You should probably check out Bézier curves and Splines algorithms.

like image 1
Nick Dandoulakis Avatar answered Nov 16 '22 03:11

Nick Dandoulakis