Visual Tests with Xcode Playgrounds

Recently I discovered a neat way to use Xcode 6 Playgrounds as a kind of unit test for a framework and walks through the problem I solved with it. You can jump directly to the project here if you'd like.

I've been tinkering around with a tiny library to do some math regarding aviation and flight paths. I'm more interested in creating a basic Air Traffic Control simulator app.

As a pilot, it's fun to learn more about the mechanics of aviation traffic.

I ran into an interesting problem when writing code to maneuver a plane between points in a 2-dimensional space.

Say you're flying near San Francisco at 120kts (in aviation, speed is in knots) with a heading of 360° (due North). Air Traffic Control asks you to make a standard rate turn towards the Palo Alto airport.

San Francisco Sectional

Flying a plane is actually pretty easy. To do this maneuver: turn the yoke, push the pedals, and when you're lined up with your destination, level off.


But in an iPad app there is only data: speed, heading angle, turn rate, coordinates, time.

Example Vector

I had to dust off my trigonometry and dig into a little bit of aviation math to build a tiny library that made vector, circle, and velocity calculations a bit simpler.

Since these equations are the foundation of my simulation, I wanted to add unit tests so that as I add more features or refactor, the base project is solid.

But doing traditional unit tests in this case meant writing math to prove math. I'd like to actually see this stuff in action before I try to build an app around it.

That's when I remembered you can use layers and views in Xcode 6 Playgrounds. Maybe I could visualize my equations?

I created a new playground in my library called VectorKit.playground to try it out.

For starters, I needed to import my library. Unlike with Swift files, a playground does not automatically import your stuff.

import VectorKit

I created a simple scene with a blank UIView. I had to slim down my units to points instead of nautical miles because playgrounds don't scale to fit.

let bounds = CGRect(x: 0, y: 0, width: 400, height: 200)
let view = UIView(frame: bounds)
view.backgroundColor = UIColor.lightGrayColor()

In order to get the view to show up in the assistant editor, import XCPlayground and call this method:

XCPShowView("view", view)
Playground Setup

I'm going to be adding a lot of dots to the scene, so I created a dot function to generate little red CALayers.

func dot() -> CALayer {
  let layer = CALayer()
  layer.bounds = CGRect(x: 0, y: 0, width: 4, height: 4)
  layer.cornerRadius = 2
  layer.backgroundColor = UIColor.redColor().CGColor
  return layer

I needed some data about my aircraft, as well as the coordinates of where I was going to send it:

let bank = 30.0 * M_PI / 180.0
let velocity = 15.0
let initial = (x: 100.0, y: 100.0)
let vector = (x: 300.0, y: 120.0)
let heading = 25.0 * M_PI / 180.0
let left = false

Using the dot function, I can easily see where my plane currently is.

let plane = dot()
plane.position = CGPoint(x: initial.x, y: initial.y)

As well as a dot for my destination.

let vectorLayer = dot()
vectorLayer.position = CGPoint(x: vector.x, y: vector.y)

To and Fro

Since I'm using XCPShowView(...) the view is updated in real time. Pretty cool!

Now that the scene is set, I can start using my small library's functions.

let r = VectorKit.turnRadius(velocity, bank)
let center = VectorKit.turnCenter(r, heading, left, initial)

I don't really need to use the VectorKit. prefix, but it helps me remember what parts the framework is doing. Plus, I avoid naming collisions (which I screwed up a lot at first).

Time to draw the full circle of the turn:

let circleBounds = CGRect(x: 0, y: 0, width: r * 2, height: r * 2)
let path = UIBezierPath(roundedRect: circleBounds, cornerRadius: circleBounds.size.height / 2.0)
let circle = CAShapeLayer()
circle.bounds = circleBounds
circle.position = CGPoint(x: center.x, y: center.y)
circle.strokeColor = UIColor.redColor().CGColor
circle.fillColor = nil
circle.lineWidth = 0.5
circle.path = path.CGPath

Turn Circle

I can also figure out the final heading towards the destination coordinate using an equation that finds the line that is tangent to a circle and an external point. And of course, display it!

let tangent = VectorKit.tangentHeading(r, left, center, vector)

let line = CALayer()
line.backgroundColor = UIColor.yellowColor().CGColor
line.bounds = CGRect(x: 0, y: 0, width: 800, height: 0.5)
line.position = vectorLayer.position
line.transform = CATransform3DMakeRotation(CGFloat(tangent), 0, 0, 1.0)

Last, but not least, get the coordinate where we finish our turn and are pointed at the destination.

let tp = VectorKit.tangentPoint(center, tangent, r, left)

let intersect = dot()
intersect.position = CGPoint(x: tp.x, y: tp.y)

Finished Vector and Route

Furthermore, I can tweak my variables, like heading and the turn direction, and double check my math in real time.

Change in Direction

What Have We Got?

In the end, I now have my own visual test that my equations work out. If I ever revisit any of the math, or maybe refactor the library, I can quickly look at this playground to see how things look.

If you're into TDD you can use playgrounds too! Imagine building out each step and then writing functions to satisfy them. Pretty cool.

Is this a replacement for traditional unit tests? Hell no. But I'm a visual person, and this lets me see that things line up and my math is correct.

You can check out the playground and math on the Github repo.