Animatron/player — pull request #28 by shamansir (2012-07-13 13:08:25+00:00)
Title: Matrix-Based Collisions Test

This version is much better, 'cause algorithm is much more simple.

And now you may see the ghost of the predicted element position in debug mode. [Video Demo, MOV, ~15MB](https://dl.dropbox.com/u/928694/js-player-collisions.mov).

Function that is passed to `collides` method gets these arguments:

function(t, t_diff, src_vec, cmp_vec)

where `t` is time when collision was detected, `t_diff` is the time was used to predict next state, `src_vec` and `cmp_vec` are the structures that determine the velocity of changes during the period of `t_diff` for the source element and testing element accordingly; their inner structures are similar to `state`s, so you may call `src_vec.x` or `cmp_vec.angle` . `this` there is the element, and unfortunately you can't change its state there directly (because to test collision, we need all modifiers to be performed; however... may be I may move it to be first modifier on the next render... I'll think of it).

Test code:

//anm.M[C.MOD_COLLISIONS].predictSpan = 1;

var blue_rect = b('blue-rect').rect([140, 25], [70, 70])
.trans([0, 3], [[120, 20], [40, 40]])
.fill('#009')
.stroke('#f00', 3)
.rotate([0, 10], [0, Math.PI / 2]);
var red_rect = b('red-rect').rect([115, 90], [60, 60])
.fill('#f00')
.trans([0, 3], [[0, 0], [20, 40]]);

blue_rect.modify(function(t) {
this.$.collides(red_rect.v, function() {
console.log(arguments);
});
});

return b()
.add(blue_rect)
.add(red_rect)
//.rotate([0, 10], [0, Math.PI]);

It gets the previous and current states for each element, compares them, predicts/builds new state and temporary substitues it as a current state to test if elements intersect.