360 degrees spinnable object from a photographed real object

Question

I want to create the ability to spin a photographed object 360 degrees.

• It spins endlessly based on the speed you "flick" .
• You spin it left or right by flicking the object left or right .
• You stop the spin when you touch to stop it if it's spinning.

Similar to the app The Elements by Theodore Grey.

Here's a video of the part of the app I'm trying to recreate. (i.e. the 3D spinner)

https://youtu.be/6T0hE0jGiYY

Here's a video of my finger interacting with it.

https://youtu.be/qjzeewpVN9o

I'm looking to use Swift and likely SpriteKit.

1. How can I get from a real life object to something high quality and functional? I'm armed with a Mac , Nikon D810 and a green screen.

   I.e I'm guessing that a series of stop motion pictures is the way to go... but I'm feel that might not be fluid enough.

   For the purposes of this question I want to figure out what would make the most sense to program with. E.g. a video I'm rewinding and fast forwarding on command or a texture atlas of stop motion frames , etc.

   Note: Capturing software and photography techniques would be helpful information as I'm clueless in that department. But, I understand I can ask that on https://photo.stackexchange.com/ .

---

2. What would the basic logic of my code be like for this object? In terms of:

A. The function setting up the object's animation or video or whatever is the best way to have the images prepared for use in my code.

B. The spin() function and

C. The stopSpin() function.

A whole project sample isn't needed (though I guess it'd be nice). But, those 3 functions would be enough to get me going.

---

3. Is SpriteKit the wisest choice?

Answer 1

Here is the second draft of my answer that shows off the basic functionality of a simple sprite animation:

class GameScene: SKScene {

  // Left spin is ascending indices, right spin is descending indices.
  var initialTextures = [SKTexture]()

  // Reset then reload this from 0-6 with the correct image sequences from initialTextures:
  var nextTextures = [SKTexture]()

  var sprite = SKSpriteNode()

  // Use gesture recognizer or other means to set how fast the spin should be.
  var velocity = TimeInterval(0.1)

  enum Direction { case left, right }

  func spin(direction: Direction, timePerFrame: TimeInterval) {

    nextTextures = []
    for _ in 0...6 {

      var index = initialTextures.index(of: sprite.texture!)

      // Left is ascending, right is descending:
      switch direction {
      case .left:
        if index == (initialTextures.count - 1) { index = 0 } else { index! += 1 }
      case .right:
        if index == 0 { index = (initialTextures.count - 1) } else { index! -= 1 }
      }

      let nextTexture = initialTextures[index!]
      nextTextures.append(nextTexture)
      sprite.texture = nextTexture
    }

    let action = SKAction.repeatForever(.animate(with: nextTextures, timePerFrame: timePerFrame))
    sprite.run(action)
  }

  override func didMove(to view: SKView) {
    removeAllChildren()

    // Make our textures for spinning:
    for i in 0...6 {
      initialTextures.append(SKTexture(imageNamed: "img_\(i)"))
    }
    nextTextures = initialTextures

    sprite.texture = nextTextures.first!
    sprite.size = nextTextures.first!.size()
    addChild(sprite)
    spin(direction: .left, timePerFrame: 0.10)
  }

  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    spin(direction: .right, timePerFrame: velocity)
  }

  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    spin(direction: .left, timePerFrame: velocity)
  }
}

---

Right now you just click / release to alternate right left.

Todo for next draft:
- Implement gesture recognizer for velocity
- Implement decay if wanted (so it will slow down over time)

(Old video, new code does not reset frame to 0):

Image assets are found here for the animation: https://drive.google.com/open?id=0B3OoSBYuhlkgaGRtbERfbHVWb28