title: Drawing like a marker pen or brush tip in Swift
body: <p>I have a question about drawing in swift... I can create a simple drawing app with CGContext using context.move and context.addLine and context.stroke etc...
  I even used bezierPath to make it smooth... I works but when you draw it fast, sometimes drawing glitches happen... But the drawing app in Instagram's Story section... it draws like a natural brush or marker pen... with an angled marker tip... and those glitches in my app does not occur in that instagram drawing app
  as much as i can understand they use 3d touch force for strokewidth + brush tip like solution</p>
  
  <p>can anyone please point me to a tutorial or topic where i can learn how to achieve this... I can learn it myself if you can point me to the related api/class and methods...</p>
  
  <p>below are 2 screenshots that shows my drawing app and instagram's story drawing</p>
  
  <p>My App vs. Instagram Story:<br>
  <img src="https://s18.postimg.org/4444r3fop/IMG_8518.jpg" width="200">
  <img src="https://s18.postimg.org/g79genqqx/IMG_8519.jpg" width="200"></p>
  
  <p>And here is my code...</p>
  
  <pre><code>import UIKit
  
  struct Line {
  
      var points:[CGPoint]
      var color:UIColor?
      var opacity:CGFloat?
      var size:CGFloat?
  
      init() {
          self.points = []
      }
  
  }
  
  class DrawingVC: UIViewController {
  
      // Variables
  
      var swiped:Bool = false
      var line:Line = Line()
      var lines:[Line] = []
      var lastPoint:CGPoint? = nil
      var orginalImage:UIImage?
  
      var colorPink = UIColor.rgb(r: 229, g: 23, b: 125)
      var colorOrange = UIColor.rgb(r: 255, g: 139, b: 0)
      var colorYellow = UIColor.rgb(r: 255, g: 230, b: 0)
      var colorGreen = UIColor.rgb(r: 107, g: 222, b: 0)
      var colorBlue = UIColor.rgb(r: 12, g: 205, b: 229)
  
  
      var markerOpacity:CGFloat = 0.60
      var markerColor:UIColor = UIColor.rgb(r: 255, g: 139, b: 0)
      var markerSize:CGFloat = 24
  
  
      // Visual Elements
  
      let mainImageView:UIImageView = {
          let v = UIImageView()
          v.contentMode = .scaleAspectFit
          v.clipsToBounds = true
          return v
      }()
  
      let tempImageView:UIImageView = {
          let v = UIImageView()
          v.contentMode = .scaleAspectFit
          v.clipsToBounds = true
          return v
      }()
  
  
      override func viewDidLoad() {
  
          super.viewDidLoad()
          view.backgroundColor = UIColor.black
  
          setupViews()
  
          updateCurrentStep()
          updateTotalDrawing()
  
      }
  
  
  
      override func touchesBegan(_ touches: Set&lt;UITouch&gt;, with event: UIEvent?) {
  
          swiped = false
          guard let point = touches.first?.location(in: self.view) else {
              return
          }
  
          lastPoint = point
  
          line = Line()
          line.color = markerColor
          line.opacity = markerOpacity
          line.size = markerSize
          line.points.append(point)
  
          updateCurrentStep()
  
      }
  
  
      override func touchesMoved(_ touches: Set&lt;UITouch&gt;, with event: UIEvent?) {
  
          swiped = true
  
          if #available(iOS 9.0, *) {
  
              guard let point = touches.first, let coalescedTouches = event?.coalescedTouches(for: point) else {
                  return
              }
              coalescedTouches.forEach {
  
                  lastPoint = $0.location(in: self.view)
                  line.points.append($0.location(in: self.view))
  
              }
  
          } else {
  
              guard let point = touches.first?.location(in: self.view) else {
                  return
              }
  
              lastPoint = point
              line.points.append(point)
  
          }
  
          updateCurrentStep()
  
      }
  
  
  
      override func touchesEnded(_ touches: Set&lt;UITouch&gt;, with event: UIEvent?) {
  
          if !swiped {
              line.points.append(lastPoint!)
          }
  
          lines.append(line)
  
          clearTempImage()
          updateTotalDrawing()
  
  
      }
  
      func drawLine(_ line:Line, context: CGContext) {
  
          let bezierPath = UIBezierPath()
          bezierPath.lineCapStyle = .square
          bezierPath.lineJoinStyle = .miter
          bezierPath.miterLimit = 24
          bezierPath.lineWidth = line.size!
          bezierPath.interpolatePointsWithHermite(interpolationPoints: line.points)
          line.color!.withAlphaComponent(line.opacity!).setStroke()
          bezierPath.stroke()
  
      }
  
  
      func clearTempImage() {
  
          tempImageView.image = UIImage()
  
      }
  
      func updateCurrentStep() {
  
          UIGraphicsBeginImageContext(view.frame.size)
          guard let context = UIGraphicsGetCurrentContext() else { return }
  
          if line.points.count &gt; 1 {
              drawLine(line, context: context)
          }
  
          tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
          UIGraphicsEndImageContext()
  
      }
  
      func updateTotalDrawing() {
  
          UIGraphicsBeginImageContext(view.frame.size)
          guard let context = UIGraphicsGetCurrentContext() else { return }
  
          if let oImage = self.orginalImage {
  
              let iw = oImage.size.width
              let ih = oImage.size.height
              let cw = self.view.bounds.size.width
              let ch = self.view.bounds.size.height
  
              let ir = iw/ih
              let cr = cw/ch
  
              let newImageWidth:CGFloat
              let newImageHeight:CGFloat
  
  
              if( cr &lt; ir ) {
                  newImageWidth = cw
                  newImageHeight = ch*ir
              } else {
                  newImageWidth = cw*ir
                  newImageHeight = ch
              }
  
              print( newImageWidth, newImageHeight )
  
              let yPos = (self.view.bounds.size.height - newImageHeight) / 2
              let finalRect = CGRect.init(x: 0, y: yPos, width: newImageWidth, height: newImageHeight)
              self.orginalImage?.draw(in: finalRect, blendMode: .normal, alpha: 1)
  
          }
  
  
  
          for line in lines {
              drawLine(line, context: context)
          }
  
          mainImageView.image = UIGraphicsGetImageFromCurrentImageContext()
          UIGraphicsEndImageContext()
  
      }
  
      func setupViews() {
  
  
          view.addSubview(mainImageView)
          view.addSubview(tempImageView)
  
          view.addConstraintsWithFormat(format: "H:|[v0]|", views: mainImageView)
          view.addConstraintsWithFormat(format: "V:|[v0]|", views: mainImageView)
  
          view.addConstraintsWithFormat(format: "H:|[v0]|", views: tempImageView)
          view.addConstraintsWithFormat(format: "V:|[v0]|", views: tempImageView)
  
  
      }
  
      override func didReceiveMemoryWarning() {
          super.didReceiveMemoryWarning()
      }
  
      override var prefersStatusBarHidden: Bool {
          return true
      }
  </code></pre>
  
  <p>you can use instagram story drawing thing yourselft too... you will understand what i mean when you use it...</p>