Apple Pencil Tutorial: Getting Started

I know that many of you have got yourself a gorgeous new iPad Pro and snagged a Pencil to go along with it.

If you’re anything like me, once you’ve experienced the awesomeness of drawing with Pencil, you’ll want to include support for it in all of your apps.

I’ve been waiting for something like this device since I purchased the original iPad. As you’ll see from my scribbles, I’m no Rembrandt, but I’ve found Pencil is also great for taking notes. I can only imagine what kinds of amazing works of art people will create now that there is Apple Pencil.

In this Apple Pencil tutorial, you’re going to learn exactly what it takes to support Pencil. Here are the key things you’ll learn:

• How to work with force
• How to improve accuracy
• How to implement shading behavior
• How to add an eraser
• How to improve the experience by working with predictive and actual drawings

By the end of this tutorial, you’ll be ready to integrate Apple Pencil support into your apps!

Prerequisites

To follow along with this tutorial, you’ll need:

• An iPad Pro and Apple Pencil. You cannot test Pencil on the simulator. Also, Pencil doesn’t work with older iPads, just the iPad Pro. Sounds like you’ve got your excuse for an upgrade!
• At least Xcode 7.1 with at least iOS 9.1.
• A basic familiarity with Core Graphics. You’ll need to know what contexts are, how to create them and how to draw strokes. Have a look at the first part of our Core Graphics tutorial — that will be plenty to get you up to speed, and the app will remind you to drink water. :]

Getting Started

Throughout this Apple Pencil tutorial, you’ll build an app called Scribble. It’s a simple app that lets you draw with responsive UI, e.g. pressure sensitivity and shading.

Download and explore Scribble. Try it out on your iPad Pro, with both Pencil and your finger, making sure to rest your hand on the screen as you draw.

You’ll see that unlike previous iPads, palm rejection is automatic, although you’ll have to be careful to rest a large area of your hand because smaller areas are read as touches.

Shake the iPad to clear the screen — just like an Etch-A-Sketch!

Under the hood, Scribble is a basic app that consists of a canvas view that captures the touch from finger or Pencil. It also continuously updates the display to reflect your touch.

Take a look at the code in CanvasView.swift.

The most important code can be found in touchesMoved(_:withEvent:), which is triggered when the user interacts with the canvas view. This method creates a Core Graphics context and draws the image displayed by the canvas view into that context.

touchesMoved(_:withEvent:) then calls drawStroke(_:touch:) to draw a line into the graphics context between the previous and current touch.

touchesMoved(_:withEvent:) replaces the image displayed by the canvas view with the updated one from the graphics context.

See? It’s pretty simple. :]

Your First Drawing with Pencil

Drawing with your finger has never been elegant, even in a digital environment. Pencil makes it much more like drawing the old analog way, with the basic UI of a pencil and paper.

You’re now ready to use the first feature of the Pencil — force. When you press harder against the screen the resulting stroke is wider. This feature doesn’t work with your finger, although there is a little cheat that you’ll learn about later.

Force amount is recorded in touch.force. A force of 1.0 is the force of an average touch so you need to multiply this force by something to produce the right stroke width. More on that in a moment…

Open CanvasView.swift, and at the top of the class add the following constant:

private let forceSensitivity: CGFloat = 4.0

You can tweak this forceSensitivity constant to make your stroke width more or less sensitive to pressure.

Find lineWidthForDrawing(_:touch:). This method calculates the line width.

Just before the return statement, add the following:

if touch.force > 0 {
  lineWidth = touch.force * forceSensitivity
}

Here you calculate the line width by multiplying the force of the touch with the forceSensitivity multiplier, but remember this only applies to Pencil and not to a finger. If you’re using your finger, touch.force will be 0, so you can’t change the stroke width.

Build and run. Drawn some lines with Pencil and notice how the stroke varies depending on how hard you press down on the screen:

Smoother Drawing

You’ll notice that when you draw, the lines have sharp points rather than a natural curve. Before Pencil, you had to do complex things like convert your strokes to spline curves to make drawings look decent, but Pencil makes this sort of workaround largely unnecessary.

Apple tells us that the iPad Pro scans for a touch at 120 times per second, but when the Pencil is near the screen the scan rate doubles to 240 times per second.

The iPad Pro’s refresh rate is 60 Hz, or 60 times per second. This means that with a scan of 120 Hz it could theoretically recognize two touches but only display just one. In addition, if there’s a lot of processing behind the scenes, the touch event could be missed altogether on certain frames because the main thread is occupied and unable to process it.

Try drawing a circle quickly. It should be round, but the result is more akin to the jagged points of a polygon:

Apple came up with the concept of coalesced touches to deal with this problem. Essentially, they capture the touches that would have been lost in a new UIEvent array, which you can access via coalescedTouchesForTouch(_:).

Find touchesMoved(_:withEvent:) in CanvasView.swift and replace:

drawStroke(context, touch: touch)

With the following:

// 1
var touches = [UITouch]()
    
// 2
if let coalescedTouches = event?.coalescedTouchesForTouch(touch) {
  touches = coalescedTouches
} else {
  touches.append(touch)
}
    
// 3
print(touches.count)

// 4
for touch in touches {
  drawStroke(context, touch: touch)
}

Let’s go through this section by section.

1. First, you set up a new array to hold all the touches you’ll have to process.
2. Check for coalesced touches, and if they are there, you save them all to the new array. If there aren’t any, you just add the one touch to the existing array.
3. Add a log statement to see how many touches you’re processing.
4. Finally, instead of calling drawStroke(_:touch:) just once, you call it for every touch saved in the new array.

Build and run. Draw some fancy curlicues with your Pencil and revel in buttery smoothness and stroke width control:

Turn your attention to the debug console. You’ll notice that when you’re drawing with Pencil rather than your finger, you receive many more touches.

You’ll also notice that even with coalesced touches, circles drawn with Pencil are much rounder simply because the iPad Pro scans for touches twice as often when it senses Pencil.