Rotate the emojis around you, not translating

Now the text looks more natural since it's not super stretched out.
Added a note for the difference between orientations for rotation and
translation.

DreamBig/Camera/Scene.swift

@@ -10,11 +10,9 @@ import SpriteKit
 import ARKit
 
 class Scene: SKScene {
-
     var drawingModel: DrawingModel?
-    var emojiSpacingScale: Float = 0.5 // spacing between emojis
-    var verticalOffset: Float = 0 // m from the ground
-    var spawnDistance: Float = 5 // m away from the user
+    var emojiSpacingScale: Float = 1 // spacing between emojis
+    var spawnDistance: Float = 1 // m away from the user
     private(set) var identifierToEmoji = [UUID: String]()
 
     // On tap, we reset the position of all nodes
@@ -28,21 +26,24 @@ class Scene: SKScene {
         self.removeAllChildren()
         identifierToEmoji = [:]
 
+        // Translate a coordinate position to an angle
+        let posToAngleConstant = 0.0003 * Float.pi * emojiSpacingScale
         // Get the maximum size of an emoji
         let maxSize = (drawingModel.points.max { p1, p2 in p1.size < p2.size })?.size ?? 0
         // Add the emoji nodes to the scene
         for drawingPoint in drawingModel.points {
-            addEmojiNode(x: 0.02 * Float(drawingPoint.x - drawingModel.canvasSize.width / 2),
-                         y: -0.02 * Float(drawingPoint.y - drawingModel.canvasSize.height / 2),
+            addEmojiNode(x: posToAngleConstant * Float(drawingPoint.x - drawingModel.canvasSize.width / 2),
+                         // For the position, y increases as it goes down
+                         y: posToAngleConstant * Float(drawingModel.canvasSize.height / 2 - drawingPoint.y),
                          // All emojis are at least 1 meter in front, distance exaggerated by a factor of 10
-                         z: 10 * Float(drawingPoint.size - maxSize) - 2,
+                         z: Float(drawingPoint.size - maxSize) - spawnDistance,
                          emoji: drawingPoint.emoji)
         }
     }
 
     // Add an emoji node in the relative coordinate system of the camera
-    //  - x is the metres RIGHT from the centre of the screen
-    //  - y is the metres UP from the centre of the screen
+    //  - x is the angle RIGHT from the centre of the screen
+    //  - y is the angle UP from the centre of the screen
     //  - z is the metres coming out TOWARDS YOU from the screen
     //  - emoji is the text on the node
     private func addEmojiNode(x: Float, y: Float, z: Float, emoji: String) {
@@ -52,17 +53,30 @@ class Scene: SKScene {
         print("Adding node: (\(x),\(y),\(z))")
 
         // Create anchor using the camera's current position
+        // Important note in case implementation changes later:
+        //   The angles for rotation are based on portrait mode (positive is right, up)
+        //   The translations are based on landscape mode where the home button is on the right
+        //   (positive is to the home button to go right, right side of the iPad to go up)
         if let currentFrame = sceneView.session.currentFrame {
+            // Rotate the emoji - directions based on assuming we are in landscape right mode
+            // If this was portrait mode, it would be (x, 1, 0, 0), (y, 0, 1, 0) as expected
+            let horizontalRotation = SCNMatrix4ToMat4(SCNMatrix4MakeRotation(x, 0, -1, 0))
+            let verticalRotation = SCNMatrix4ToMat4(SCNMatrix4MakeRotation(y, 1, 0, 0))
+            let rotation = simd_mul(horizontalRotation, verticalRotation)
+
+            // Translate the emoji
             var translation = matrix_identity_float4x4
-            translation.columns.3.x = x
-            translation.columns.3.y = y
             translation.columns.3.z = z
-            let transform = simd_mul(currentFrame.camera.transform, translation)
+
+            // Transform the emoji around the current camera direction
+            // Note that the order of the multiplications matter here
+            let transform = simd_mul(currentFrame.camera.transform, simd_mul(rotation, translation))
 
             // Add a new anchor to the session
             let anchor = ARAnchor(transform: transform)
             identifierToEmoji[anchor.identifier] = emoji
             sceneView.session.add(anchor: anchor)
         }
     }
+
 }

DreamBig/Camera/ViewController.swift

@@ -14,12 +14,11 @@ class ViewController: UIViewController {
 
     var scene: Scene?
     var drawingModel: DrawingModel?
-    var emojiSize: CGFloat = 200
+    var emojiSize: CGFloat = 32
     @IBOutlet var sceneView: ARSKView!
 
     var emojiSizeTextView = UITextView()
     var spawnDistanceTextView = UITextView()
-    var verticalOffsetTextView = UITextView()
     var emojiSpacingScaleTextView = UITextView()
 
     override func viewDidLoad() {
@@ -62,28 +61,22 @@ class ViewController: UIViewController {
         let textViewSize = CGSize(width: 200, height: 50)
         let bottomOfScreen = view.frame.maxY
         emojiSizeTextView.frame = CGRect(
-            origin: CGPoint(x: 0, y: bottomOfScreen - textViewSize.height * 4),
-            size: textViewSize)
-        spawnDistanceTextView.frame = CGRect(
             origin: CGPoint(x: 0, y: bottomOfScreen - textViewSize.height * 3),
             size: textViewSize)
-        verticalOffsetTextView.frame = CGRect(
+        spawnDistanceTextView.frame = CGRect(
             origin: CGPoint(x: 0, y: bottomOfScreen - textViewSize.height * 2),
             size: textViewSize)
         emojiSpacingScaleTextView.frame = CGRect(
             origin: CGPoint(x: 0, y: bottomOfScreen - textViewSize.height * 1),
             size: textViewSize)
         emojiSizeTextView.text = "Emoji size"
         spawnDistanceTextView.text = "Spawn distance"
-        verticalOffsetTextView.text = "Vertical offset"
         emojiSpacingScaleTextView.text = "Emoji spacing"
         emojiSizeTextView.delegate = self
         spawnDistanceTextView.delegate = self
-        verticalOffsetTextView.delegate = self
         emojiSpacingScaleTextView.delegate = self
         self.view.addSubview(emojiSizeTextView)
         self.view.addSubview(spawnDistanceTextView)
-        self.view.addSubview(verticalOffsetTextView)
         self.view.addSubview(emojiSpacingScaleTextView)
     }
 
@@ -115,12 +108,12 @@ extension ViewController: ARSKViewDelegate {
 
     func sessionWasInterrupted(_ session: ARSession) {
         // Inform the user that the session has been interrupted, for example, by presenting an overlay
-
+        print("SESSION INTERRUPTED")
     }
 
     func sessionInterruptionEnded(_ session: ARSession) {
         // Reset tracking and/or remove existing anchors if consistent tracking is required
-
+        print("SESSION INTERRUPTION ENDED")
     }
 
 }
@@ -140,9 +133,6 @@ extension ViewController: UITextViewDelegate {
         if let spawnDistance = Float(spawnDistanceTextView.text) {
             self.scene?.spawnDistance = spawnDistance
         }
-        if let verticalOffset = Float(verticalOffsetTextView.text) {
-            self.scene?.verticalOffset = verticalOffset
-        }
         if let emojiSpacingScale = Float(emojiSpacingScaleTextView.text) {
             self.scene?.emojiSpacingScale = emojiSpacingScale
         }