Bézier Curves

Presented at try! Swift Tokyo 2018

Transcript

1. Bézier Curves Ben Scheirman nsscreencast.com @subdigital
5. let path = UIBezierPath() path.move(to: startPoint) path.addCurve(to: endPoint, controlPoint1: c1, controlPoint2: c2) context.addPath(path.cgPath) context.strokePath()
6. Control points?!
7. Paul de Casteljau
20. class BezierView : UIView { var startPoint: CGPoint? var endPoint: CGPoint? var control1: CGPoint? var control2: CGPoint? ...
21. func drawPoint(_ context: CGContext, p: CGPoint, color: UIColor, radius: CGFloat) { color.setFill() context.addArc(center: p, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true) context.fillPath() }
22. Demo
23. class BezierView : UIView { var startPoint: CGPoint? var endPoint: CGPoint? var control1: CGPoint? var control2: CGPoint? ...
24. class BezierView : UIView { var points: [CGPoint] ...
25. if points.count >= 2 { drawLinesBetween(context, points) }
26. func drawLinesBetween(_ context: CGContext, _ points: [CGPoint]) { }
27. func drawLinesBetween(_ context: CGContext, _ points: [CGPoint]) { points.first.flatMap { context.move(to: $0) } points.dropFirst().forEach { context.addLine(to: $0 ) } context.setLineWidth(3) context.setLineDash(phase: 0, lengths: [2]) UIColor.lightGray.setStroke() context.strokePath() }
28. func drawLinesBetween(_ context: CGContext, _ points: [CGPoint]) { points.first.flatMap { context.move(to: $0) } points.dropFirst().forEach { context.addLine(to: $0 ) } context.setLineWidth(3) context.setLineDash(phase: 0, lengths: [2]) UIColor.lightGray.setStroke() context.strokePath() }
29. func drawLinesBetween(_ context: CGContext, _ points: [CGPoint]) { points.first.flatMap { context.move(to: $0) } points.dropFirst().forEach { context.addLine(to: $0 ) } context.setLineWidth(3) context.setLineDash(phase: 0, lengths: [2]) UIColor.lightGray.setStroke() context.strokePath() }
30. func drawLinesBetween(_ context: CGContext, _ points: [CGPoint]) { points.first.flatMap { context.move(to: $0) } points.dropFirst().forEach { context.addLine(to: $0 ) } context.setLineWidth(3) context.setLineDash(phase: 0, lengths: [2]) UIColor.lightGray.setStroke() context.strokePath() if timeValue > 0 { interpolateBetween(context, points) } }
31. func interpolateBetween(_ context: CGContext, _ points: [CGPoint]) { guard points.count >= 2 else { return } var interpolated: [CGPoint] = [] for i in 0 ..< points.count-1 { let p1 = points[i] let p2 = points[i+1] let t = p1.lerp(p2, t: timeValue) interpolated.append(t) drawPoint(context, p: t, color: .lightGray, radius: 6) } }
32. func interpolateBetween(_ context: CGContext, _ points: [CGPoint]) { guard points.count >= 2 else { return } var interpolated: [CGPoint] = [] for i in 0 ..< points.count-1 { let p1 = points[i] let p2 = points[i+1] let t = p1.lerp(p2, t: timeValue) interpolated.append(t) drawPoint(context, p: t, color: .lightGray, radius: 6) } }
33. func interpolateBetween(_ context: CGContext, _ points: [CGPoint]) { guard points.count >= 2 else { return } var interpolated: [CGPoint] = [] for i in 0 ..< points.count-1 { let p1 = points[i] let p2 = points[i+1] let t = p1.lerp(p2, t: timeValue) interpolated.append(t) drawPoint(context, p: t, color: .lightGray, radius: 6) } }
34. func interpolateBetween(_ context: CGContext, _ points: [CGPoint]) { guard points.count >= 2 else { return } var interpolated: [CGPoint] = [] for i in 0 ..< points.count-1 { let p1 = points[i] let p2 = points[i+1] let t = p1.lerp(p2, t: timeValue) interpolated.append(t) drawPoint(context, p: t, color: .lightGray, radius: 6) } }
35. func interpolateBetween(_ context: CGContext, _ points: [CGPoint]) { guard points.count >= 2 else { return } var interpolated: [CGPoint] = [] for i in 0 ..< points.count-1 { let p1 = points[i] let p2 = points[i+1] let t = p1.lerp(p2, t: timeValue) interpolated.append(t) drawPoint(context, p: t, color: .lightGray, radius: 6) } }
36. func interpolateBetween(_ context: CGContext, _ points: [CGPoint]) { guard points.count >= 2 else { return } var interpolated: [CGPoint] = [] for i in 0 ..< points.count-1 { let p1 = points[i] let p2 = points[i+1] let t = p1.lerp(p2, t: timeValue) interpolated.append(t) drawPoint(context, p: t, color: .lightGray, radius: 6) } }
37. func interpolateBetween(_ context: CGContext, _ points: [CGPoint]) { guard points.count >= 2 else { return } var interpolated: [CGPoint] = [] for i in 0 ..< points.count-1 { let p1 = points[i] let p2 = points[i+1] let t = p1.lerp(p2, t: timeValue) interpolated.append(t) drawPoint(context, p: t, color: .lightGray, radius: 6) } if interpolated.count >= 2 { drawLinesBetween(context, interpolated) } }
38. zip(sequence1, sequence2)
39. sequence1 Sequence2
40. sequence1 Sequence2 zip
41. sequence1 Sequence2 zip
42. sequence1 Sequence2 P1 P2 P3 P4 P5 P2 P3 P4 P5 zip
43. sequence1 Sequence2 P1 P2 P3 P4 P5 P2 P3 P4 P5 zip
44. func interpZip(points: [CGPoint]) -> (CGFloat) -> [CGPoint] { return { t in let pairs = zip(points, points.dropFirst()) return pairs.map { pair in return lerp(pair.0, pair.1, t) } } }
45. func interpZip(points: [CGPoint]) -> (CGFloat) -> [CGPoint] { return { t in let pairs = zip(points, points.dropFirst()) return pairs.map { pair in return lerp(pair.0, pair.1, t) } } }
46. func interpZip(points: [CGPoint]) -> (CGFloat) -> [CGPoint] { return { t in let pairs = zip(points, points.dropFirst()) return pairs.map { pair in return lerp(pair.0, pair.1, t) } } }
47. func interpZip(points: [CGPoint]) -> (CGFloat) -> [CGPoint] { return { t in let pairs = zip(points, points.dropFirst()) return pairs.map { pair in return pair.0.lerp(pair.1, t: timeValue) } } }
49. Rapid Feedback
50. Explore! Experiment!
51. Thank you ! Ben Scheirman nsscreencast.com @subdigital
52. Thank you ! Ben Scheirman nsscreencast.com @subdigital Ask me for a sticker! ステッカーが欲しかったら話 しかけてください!
53. Thank you ! Ben Scheirman nsscreencast.com @subdigital Ask me for a sticker! ステッカーが欲しかったら話 しかけてください!