CGPath adds a curve between points

Question

So, I have a function that randomly generates some CGPoints. Then I create CGPath from these points. I use this path in keyframe animation to animate the presentation around the screen.

The path is created using the following code:

- (CGMutablePathRef)generatePathFromCoordinates:(NSArray *)coordinates { CGMutablePathRef path = CGPathCreateMutable(); CGPoint point = [(NSValue *)[coordinates objectAtIndex:0] CGPointValue]; CGPathMoveToPoint(path, nil, point.x, point.y); for (int i=1; i < coordinates.count; i++) { point = [(NSValue *)[coordinates objectAtIndex:i] CGPointValue]; CGPathAddLineToPoint(path, nil, point.x, point.y); } return path; } 

The code above works fine, but the animation looks a bit weird, so I would like to add a curve between the coordinates, rather than a straight line. Like in the picture below (amazing drawing skills that I know!). Path "A" is what I am doing now, and path "B" is what I was striving for:

After looking at the functions available in the CGPath link, I see several that could complete the job, CGPathAddArcToPoint CGPathAddCurveToPoint . I used these functions briefly, but I couldn’t get the desired effect (perhaps because I used them incorrectly)

Could you guys point me in the right direction to get a good curve?

Thank you in advance

Answer 1

CGPathAddCurveToPoint adds a cubic curve to the bezier path. In the event that you do not know this, it is made so that the shape of the curve is determined by two control points (uses an equation of the third degree for the curve). If you want the curve to have a specific shape, you need to calculate two intermediate points that are offset by the value of the current waypoint and the endpoint of the curve. If instead you do not need to have a curve with a specific shape, you can simply select some random points. This is an example implementation:

 for (int i=1; i < coordinates.count; i++) { point = [[coordinates objectAtIndex:i] CGPointValue]; CGPathAddCurveToPoint(path, 0, randomX(), randomY(), randomX(), randomY(), point.x, point.y); } 

I see that you used CGPath, but you can also use OOP with UIBezierPath instead of CGPath if you find it easier to use.