ARKit detecting planes and placing objects

This Article covers the ARKit plane detection and placing the objects on the plane. It’s written in Swift 4 in Xcode 9 beta version.

Here is the screenshot of the output of the project explained in this article.

Complete movie demo of the code is uploaded here. All the code in this article can be downloaded / cloned from github.

Little Introduction:

ARKit is the iOS framework for Augmented Reality. ARKit using the built-in camera, powerful processors and motion sensors in iOS devices to track the real world objects and let virtual objects blend in with real world environment. ARKit uses Visual Inertial Odometry (VIO) to accurately track the world around it. It supports Unity, Unreal, and Scenekit to display AR content

Before diving into coding, here is the brief description of objects to know.

  1. ARSession : This class configures and runs various AR techniques on devices.  It reads the objects through the cameras using the motion sensing techniques and provides the session instance for every AR experience built with ARKit.
  2. SessionConfiguration:  ARSession instance runs the session configuration which is either ARSessionConfiguration or it’s subclass ARWorldTrackingSessionConfiguration. This configuration determines how the device’s position and motion is tracked in the real world.
    1.      ARSessionConfiguration: It provides the basic configuration that detects only devices orientation
    2.      ARWorldTrackingSessionConfiguration:  It provides the tracking for real-world surfaces and it position while reading the device motion through the camera. It currently provides only horizontal plane /surface detection.
  3.  Views: ARKit  provide ARSCNView to display 3D SceneKit content and ARSKView to display 2D SpriteKit content
  4. ARAnchor:  Every object which is node (either SceneKit node or SpriteKitNode) is tagged with ARAnchor object that tracks the real world positioning and orientation.  ARPlaneAnchor is the subclass of ARAnchor used to track the real-world flat surfaces (currently ARKit supports only horizontal surfaces). This object holds the width, length and center of the plane.
  5. ARSCNViewDelegate:  This protocol provides various methods to receive the   captured images and tracking information. It calls the delegate methods passing ARAnchor object whenever plane is detected, frame size is updated, node is deleted etc. More details provided as we go through code.

Time to code: 

It’s certainly easy to understand the objects discussed above when we see the code. Enough of the theory!!


Open the project code in Xcode. You need atleast Xcode 9 beta (latest at this time of writing the article) to run the project successfully.  Please note ARKit does not work on iOS simulators, it runs only on iOS devices with  A9 or higher processing chip.

Setup the ARSCNView just like SCNView in SceneKit. Attach SCNScene instance to ARSCNView.

ARSCNDebugOptions showFeaturePoint, showWorldOrigin in the above code displays the points on the real world plane that it tries to detect. More the feature points, easier it is for ARKit to identify the horizontal planes.


Create an instance of ARWorldTrackingSessionConfiguration and set its plane  detection to ARWorldTrackingSessionConfiguration.PlaneDetection.horizontal . Let sceneView session to run on the configuration with the ARSession.RunOptions.resetTracking.

Plane Detection:

As you point the camera to the horizontal surface, it shows the surface feature points trying to identify the plane. Once it has enough feature points, it recognizes the horizontal surface area and calls below method.

(nullable SCNNode *)renderer:(id )renderer nodeForAnchor:(ARAnchor *)anchor;

Method implementation for this code provided below.

ARAnchor object holds all the coordinates necessary to create the SCNNode and tag the real world anchor coordinated to the virtual object created in SceneKit. First typecast ARAnchor to determine if that object is an ARPlaneAnchor. If typecasting is successful, create planeAndhor object. planeAnchor.extent and gives the width, length and the center of the plane. This coordinates can be used to create SCNFloor, SCNPlane or and SCNNode that you want to act as a horizontal base. In the code example, we created SCNBox geometry node. Store this anchor as current anchor for any future interaction on it.

Plane Update:

As more features are identified for the ARPlaneAnchor , ARKit  sends new anchor coordinates to below method. It’s upto us whether are interested in updated frame of horizontal surface or not.

(void)renderer:(id <SCNSceneRenderer>)renderer didUpdateNode:(SCNNode *)node forAnchor:(ARAnchor *)anchor

Code implemented for update method is provided below.

At any moment, we can get the SCNNode tied the specific ARAnchor and vice-versa using below method calls.


Any time we want to get the ARAnchor that user touches, we can just do a hitTest on the SceneView on the touched location. This gives an array of ARHitTestResult objects. Get the first result from the array and read the “identifier” property of the ARPlaneAnchor object. This “identifier” property uniquely identifies every anchor.

Place the object:

After you get the first object in the ARHitResult array, it’s worldTransform columns will provide the real world coordinates of the touch location. Just create a SCNNode of your geometry and set it’s position to those columns values. Add that node to scene view. You are done !!

How exciting is the ARKit!. For any questions, comments, let me know. Happy coding !!!


Pan drag UIView on UIBezierPath curve

This article covers the one of the solution to pan the UIView along the UIBezierPath curve with UIPanGestureRecognizer. It’s code written in Swift 3, Xcode 8.3.2

Let’s look at the output before going into details.













There are several examples you can find on stackoverflow on how to animate the UIView on the UIBezierPath. But there are not many examples that show how to move the object along the path with user touch, pan interactions. So here, we discuss the possibility of it.


This code works with the assumption that the bezier curve Path flows in a linear curve. i,e there is continuous increase or decrease  in either X or Y axis while drawing the curve. The output.gif show the sample curve that has continuous increase from start to finish  on Y axis.

How to code:

Let’s draw the UIBezierPath with QuadCurve which takes start point, end point and the control point.

1) Created Quad curve and stored the start point p0, end point p2 and control point p1. We called drawBezierPath()  in viewDidLoad()

bezierPath.move(to: p0)

bezierPath.addQuadCurve(to: p2, controlPoint: p1)

2) emojiView is the view that we are going to drag along the UIbezierPath.

3) In viewDidAppear – we set the emojiView center to the starting point the curve and also store the starting emojiView position.

4) Add the UIPanGestureRecognizer to the view.

5) Now comes the points calculation part. If it takes 1 unit time to draw the beziere path. Below method gets the (x,y) point at the specific time interval between 0 & 1.  Big thanks to Eric Sudan for the idea @

This method needs to be called twice one for x point and again for y point.

6) Here is the final part on how to drag

First we get the location of the pan in the view. Then calculate the distanceYInRange based on the Y difference of the panned location and the starting Y location. We can obtain the (X,Y) on the bezier curve using getPointAtPercent method. Las step is to change position to emojiView to new location.

The complete code in this article is available at github. For any questions, feel free to comment. Happy coding!!


Drag and Drop in UICollectionView in iOS 11

What’s New:

iOS 11 introduced the drag and drop feature that lets you drag , drop the content from one application to other application on iPad. This article provides the high level overview with example code on this to drag and drop the UICollectionViewCells in UICollectionView.

Click this see the drag and drop video in action for the code in the article.


  • dragDelegate – This delegate manages the dragging of items from collection view.
  • dropDelegate – This delegate manages the dropping of items to collection view


  • UICollectionViewDragDelegate – This protocol requires the implementation of below method that provides the item to be dragged

  •  UICollectionViewDropDelegate – This protocol requires implementation of below method that holds the items being dropped to CollectionView.



Let’s explore the drag and drop feature by creating a collection view that holds images. Drag and drop allows the images from other applications (like photos..etc) to be added to our collectionView by dragging and vice-versa in other direction for dropping


  1. Implement the CollectionView with each cell holding some image.
  2. Set the drag and drop delegates to the object that provides the implementation of UICollectionViewDragDelegate, UICollectionViewDropDelegate. In this example, we are setting the delegates to self.

collectionView.dragDelegate = self

collectionView.dropDelegate = self

  1. Implement the both the new delegates. Code provided below with explanation following it.



collectionview(_:itemsForBeginning:at:)  This method expects the UIDragItem to identify the content that needs to be carried while dragging the cell.

This above method is enough to allow the image to be dragged from UICollectionViewCell to any other application to which image can be dropped


collectionView(_:performDropWith:)  This method has the implementation of capturing the image dropped by other application and creating the new UICollectionViewCell and add the image to it.

This article provides the basic introduction to drag and drop feature. Complete code can be obtained from GitHub link  Let me know in comments for any queries. Happy coding!!


What’s New In Swift 4

This article is to highlight the key features added/ modified in Swift 4. Apple scheduled to release Swift 4 in fall 2017 and its beta versions are already available for download for developers.

Downloading Swift 4 Snapshot

Swift 4.0 Snapshots are prebuilt binaries that are automatically created from swift-4.0-branch branch. Latest snapshot package downloaded from Swift 4.0 Development section from here.

Run downloaded installer file to install the snapshot. Now goto Xcode->Toolchains and select the snapshot as in below screenshot.

There is nothing more to do; you are all set to play with Swift 4. Create new playground file and test it out yourself all the new Swift 4 features.

Here, I covered the important new/modified features and I will keep adding here as I get more details


String is a collection

Strings are now collections in Swift 4 like it was in Swift 2. This allows iterating though characters in string. Just like any other collection, string can reversed, apply map() and flatmap() !

Multi-line string literals

Swift 3 requires line break (\n) to write multi-line strings. In Swift 4 introduces triple quotes (“””) to start and end of the multiline string. It lets use quote marks without escaping.

The indentation of the closing delimiter determines how much whitespace is stripped from the start of each line.

Substring is new type

Swift 4 introduced Substring type to represent the String slices.

The need for introducing Substring is to optimize memory for Strings. I will create a separate article on memory management and talk about Substring there.

Unicode 9 Characters

Each String emoticon is now 1 character in Swift 4.