Cocos2d JS - Getting vector reflection

Question

I'm working on a small Breakout clone using Cocos2D-JS, without the use of a physics engine.

One of the things that baffles me was how the ball bounces. My friend came up with this:

inputVector - 2(normalVector * inputVector)

I have no idea how to translate that in code. So I tried with this:

g_Ball.position = this.velocityComputer(cc.p(g_Ball.x, g_Ball.y), cc.p(this.x, this.y));

velocityComputer: function(inVector, thisNVector) {
    var prodVec = cc.pDot(inVector, thisNVector);
    var retVec = inVector - (2 * (prodVec * inVector));
    cc.log(retVec);
    // cc.log(blockNVec);
    return retVec;
},

But g_Ball doesn't change directions, and retVec simply logs NaN.

Any suggestions?

Thanks.

Answer 1

Kevin ven der Velden's answer is close, but gets the types wrong.

The dot product of two vectors returns a scalar (float)

var prodVec = cc.pDot(inVector, thisNVector);

So this isn't eligible as an argument for the componentwise multiplication function pCompMult because it's not a vector.

In the case where your second input is a normal vector (pointing in the direction the surface is facing) of unit length, the dot product gives the projection of your input vector onto this normal's direction.

Scaling the normal by this projection gives us the vector component of our input vector in the direction away from the surface. Subtracting this from our input once gives a vector parallel to the surface. Subtracting it twice gives us our reflected vector: moving away from the surface by the same amount, in the opposite direction.

pReflect: function(inVector, normalVector) {
    var projection = cc.pDot(inVector, thisNVector);
    var retVec = cc.pSub(inVector, cc.pMult(2 * projection, normalVector));
    return retVec;
},

Answer 2

Javascript does not support operator overloading (i.e. specifying how "-" on something that isn't a number should work), you should call whatever functions your vectors provide for that (I can't find any documentation that cocos2d-js provides that API).

The NaN is because javascript is going "I don't know how to multiply these 2 things that aren't numbers, so that's Not A Number (NaN)"

velocityComputer: function(inVector, thisNVector) {
    var prodVec = cc.pDot(inVector, thisNVector);
    var retVec = cc.pSub( inVector, cc.pMult( cc.pCompMult( prodVec, inVector ), 2 ) );
    cc.log(retVec);
    // cc.log(blockNVec);
    return retVec;
},