How to make UIBezierPath smooth in Swift - swift

Question

I am trying to create a line chart which represents a set of values (x and y) in a smooth bezier curve. This works fine, except when the x-values are close to each other and the y-values go from a continuous line to a lower or higher value. The values are not shown in the chart itself, but here is an image illustrating my problem:
As you can see, the line makes a backwards movement before continuing to the next point. I would like this to not happen and smoothen out. To generate the data points, I use this library from Minh Nguyen, which has helped me a lot. The only problem is this issue still. For easiness, here is the code I currently use:
private func controlPointsFrom(points: [CGPoint]) -> [CurvedSegment] {
var result: [CurvedSegment] = []
let delta: CGFloat = 0.3
for i in 1..<points.count {
let A = points[i-1]
let B = points[i]
let controlPoint1 = CGPoint(x: A.x + delta*(B.x-A.x), y: A.y + delta*(B.y - A.y))
let controlPoint2 = CGPoint(x: B.x - delta*(B.x-A.x), y: B.y - delta*(B.y - A.y))
let curvedSegment = CurvedSegment(controlPoint1: controlPoint1, controlPoint2: controlPoint2)
result.append(curvedSegment)
}
for i in 1..<points.count-1 {
let M = result[i-1].controlPoint2
let N = result[i].controlPoint1
let A = points[i]
let MM = CGPoint(x: 2 * A.x - M.x, y: 2 * A.y - M.y)
let NN = CGPoint(x: 2 * A.x - N.x, y: 2 * A.y - N.y)
result[i].controlPoint1 = CGPoint(x: (MM.x + N.x)/2, y: (MM.y + N.y)/2)
result[i-1].controlPoint2 = CGPoint(x: (NN.x + M.x)/2, y: (NN.y + M.y)/2)
}
return result
}
func createCurvedPath(_ dataPoints: [CGPoint]) -> UIBezierPath? {
let path = UIBezierPath()
path.move(to: dataPoints[0])
var curveSegments: [CurvedSegment] = []
let useDataPoints = dataPoints.filter { ($0.y < 1000) }
curveSegments = controlPointsFrom(points: useDataPoints)
for i in 1..<useDataPoints.count {
path.addCurve(to: useDataPoints[i], controlPoint1: curveSegments[i - 1].controlPoint1, controlPoint2: curveSegments[i - 1].controlPoint2)
}
return path
}
For documentation, I would refer to the tutorial/blogpost I linked earlier. I figure the issue should be somewhere in the calculation of controlPoint1 and controlPoint2 in the controlPointsFrom function. When I remove the delta or make it 0, it just become straight lines but then the issue doesn't occur either. So the math should be different I think, to keep track of the previous value and perhaps don't create a control point with a higher or lower y-value when the next point is lower or higher, respectively. But I am unable to figure out how to make it work. Any smart mind who can make this happen?
Would be forever grateful!

Answer 1

try this:
Smooth UIBezierPath
https://medium.com/#ramshandilya/draw-smooth-curves-through-a-set-of-points-in-ios-34f6d73c8f9