Find the path a bouncing SKSpriteNode will take

Question

I'd like to display two lines when a SKSpriteNode is being bounced around the screen — one of where the node is going towards, and second which is in what direction the node is going to bounce off of other sprite nodes.

Essentially, I'd like to do something like this:

I can create the first line fairly easily using the velocity of the ball, and the second line would be fairly easy as well, but only if I know where the line is going to collide with another SKSpriteNode.

For the first line, I'm creating a SKShapeNode and setting its path to the same line as the velocity of the ball, but I'm not sure how to find the path the ball will take after it bounces off of the nearest obstacle.

In short — how can I find the point at which a moving object will collide with another object, and then find the direction in which it will move after colliding with the object? This isn't an issue if I know what object it's going to collide with, but short of doing some insanely inefficient brute-forcing, I'm not sure how to find what object the ball is going to collide with and where.

I'm looking for something like this:

let line: SKSpriteNode // this is the first line
let scene: SKScene // the scene that contains all of the objects

// this doesn't exist, but I'm looking for something that would do this
let collisionPoint: CGPoint = line.firstCollision(in: scene)

For my purposes, there are no environmental factors on the sprite (no gravity, air resistance, etc.), it's moving at a constant velocity, and doesn't lose any velocity in rebounds, but it would be useful if the answer could include a way of calculating the the nth rebound of a sprite in any environment.

Answer 1

This is the result we are going to build

Ray Casting

The technique used here is called Ray Casting and you can find more details in this similar answer I have already written.

Basically we use the SpriteKit physics engine to determine draw a line and get the first point of intersection between that line and a physics body.

Code

Of course you need to

• create an empty Xcode project based on SpriteKit
• add a circular sprite we'll call ball
• add a physics body to the ball and give it some speed

Here's the full code you'll need

Extensions

Add these 2 extensions to your project

extension CGVector {

    init(angle: CGFloat) {
        self.init(dx: cos(angle), dy: sin(angle))
    }

    func normalized() -> CGVector {
        let len = length()
        return len>0 ? self / len : CGVector.zero
    }

    func length() -> CGFloat {
        return sqrt(dx*dx + dy*dy)
    }

    static func / (vector: CGVector, scalar: CGFloat) -> CGVector {
        return CGVector(dx: vector.dx / scalar, dy: vector.dy / scalar)
    }

    func bounced(withNormal normal: CGVector) -> CGVector {
        let dotProduct = self.normalized() * normal.normalized()
        let dx = self.dx - 2 * (dotProduct) * normal.dx
        let dy = self.dy - 2 * (dotProduct) * normal.dy
        return CGVector(dx: dx, dy: dy)
    }

    init(from:CGPoint, to:CGPoint) {
        self = CGVector(dx: to.x - from.x, dy: to.y - from.y)
    }

    static func * (left: CGVector, right: CGVector) -> CGFloat {
        return (left.dx * right.dx) + (left.dy * right.dy)
    }

}

extension CGPoint {

    func length() -> CGFloat {
        return sqrt(x*x + y*y)
    }

    func distanceTo(_ point: CGPoint) -> CGFloat {
        return (self - point).length()
    }

    static func -(left: CGPoint, right: CGPoint) -> CGPoint {
        return CGPoint(x: left.x - right.x, y: left.y - right.y)
    }

}

Scene

Now replace all the code you have in Scene.swift with this one

class GameScene: SKScene {

    lazy var ball: SKSpriteNode = {
        return childNode(withName: "ball") as! SKSpriteNode
    }()

    override func didMove(to view: SKView) {
        self.physicsBody = SKPhysicsBody(edgeLoopFrom: frame)
    }

    override func update(_ currentTime: TimeInterval) {

        self.enumerateChildNodes(withName: "line") { (node, _) in
            node.removeFromParent()
        }

        guard let collision = rayCast(start: ball.position, direction: ball.physicsBody!.velocity.normalized()) else { return }

        let line = CGVector(from: ball.position, to: collision.destination)
        drawVector(point: ball.position, vector: line, color: .green)

        var nextVector = line.normalized().bounced(withNormal: collision.normal.normalized()).normalized()
        nextVector.dx *= 200
        nextVector.dy *= 200
        drawVector(point: collision.destination, vector: nextVector, color: .yellow)
    }

    private func rayCast(start: CGPoint, direction: CGVector) -> (destination:CGPoint, normal: CGVector)? {

        let endVector = CGVector(
            dx: start.x + direction.normalized().dx * 4000,
            dy: start.y + direction.normalized().dy * 4000
        )

        let endPoint = CGPoint(x: endVector.dx, y: endVector.dy)

        var closestPoint: CGPoint?
        var normal: CGVector?

        physicsWorld.enumerateBodies(alongRayStart: start, end: endPoint) {
            (physicsBody:SKPhysicsBody,
            point:CGPoint,
            normalVector:CGVector,
            stop:UnsafeMutablePointer<ObjCBool>) in

            guard start.distanceTo(point) > 1 else {
                return
            }

            guard let newClosestPoint = closestPoint else {
                closestPoint = point
                normal = normalVector
                return
            }

            guard start.distanceTo(point) < start.distanceTo(newClosestPoint) else {
                return
            }

            normal = normalVector
        }
        guard let p = closestPoint, let n = normal else { return nil }
        return (p, n)
    }

    private func drawVector(point: CGPoint, vector: CGVector, color: SKColor) {

        let start = point
        let destX = (start.x + vector.dx)
        let destY = (start.y + vector.dy)
        let to = CGPoint(x: destX, y: destY)

        let path = CGMutablePath()
        path.move(to: start)
        path.addLine(to: to)
        path.closeSubpath()
        let line = SKShapeNode(path: path)
        line.strokeColor = color
        line.lineWidth = 6
        line.name = "line"
        addChild(line)
    }
}

How does it work?

This method

func drawVector(point: CGPoint, vector: CGVector, color: SKColor)

simply draws a vector from a starting point a with a given color.

This one

func rayCast(start: CGPoint, direction: CGVector) -> (destination:CGPoint, normal: CGVector)?

uses the Ray Casting technique discussed above to find the point of intersection and the related normal vector.

Finally in the

func update(_ currentTime: TimeInterval)

we are going to

• remove the lines drawn during the previous frame
• get the collision point using the raycasting
• draw the line between the ball and the collision point
• calculate the direction the ball is going to bounce
• draw a line that goes from the collision using the direction value got in the previous step

That's it