how to compute the control points for a smooth path given a set of points?

Question

I am using UIBezierPath, but this question concerns control points for the paths, not the drawing. Given a set of points, I can render a path. However, I have not been able to figure out how to calculate the control points to have a smooth line like in a photo curves editor ( How to implement a Photoshop Curves editor in UIKit ).

The closest answer I've seen is here: how can i trace the finger movement on touch for drawing smooth curves?

However, I still cannot grasp the proper calculation. To sum it up in code:

for (int i = 0; i< points; i++) 
{
     ...

     [path addQuadCurveToPoint:nextPoint controlPoint:WTF];
}

Answer 1

The image you linked to is an example that doesn't use quadratic curves, so I'm going to run with the image and not the code.

A bezier path on ios (and os x) underneath is basically a list of drawing commands and points. eg:

[path moveTo:CGMakePoint(1,1)];
[path curveToPoint:(10,10) controPoint1:(3,7) controlPoint2:(4,1)];
[path curveToPoint:(10,10) controPoint1:(15,17) controlPoint2:(21,11)];
[path closePath];

Results in:

moveto (1,1)      
curveto (10,10) (3,7) (4,1) 
curveto (20,0) (15,17) (21,11)    
closepath 

Control points on a bezier path control the direction and rate of curve out of a point. The first control point(cp) controls the direction and rate of curve exiting the previous point and the second cp controls the same for the point you're curving to. For a quadratic curve (what you get using addQuadCurveToPoint:controlPoint: ), both of these points are the same, as you can see in the docs for the method here.

Getting a smooth curve along a set of points involves making cp1 and cp2 be colinear with each other and that line be parallel to the points at either end of that segment.

This would look something like:

[path moveTo:2];
[path curveTo:3 controlPoint1:cp1 controlPoint2:cp2];

cp1 and cp2 can be computed by choosing some constant line length and doing some geometry (i forget all my line equations right now but they're easily googleable )

Going to use #-># to designate a segment and #->#(cp#) to designate a control point for that segment's curveto call.

The next issue is making the curve smooth from the 2->3 segment going into 3->4 segment. At this point in your code, you should have a control point calculated for 2->3(cp2). Given your constant line length from before (this will control how sharp of a curve you get), you can calculate a cp1 for 3->4 by getting a point colinear with 2->3(cp2) and point 3 in the diagram. Then calculate a 3->4(cp2) that's colinear with 3->4(cp1) and parallel to the line that point 3 and point 4 form. Rinse and repeat through your points array.