Wednesday, May 2, 2012

JavaScript Separating Axis Theorem

I'm trying to wrap my head around using the Separating Axis Theorem in JavaScript to detect two squares colliding (one rotated, one not). As hard as I try, I can't figure out what this would look like in JavaScript, nor can I find any JavaScript examples. Please help, an explanation with plain numbers or JavaScript code would be most useful.



PS This link helped the most so far Algorithm to detect intersection of two rectangles?



My understanding so far is I'm supposed to get the edge difference of both squares with a method as so, but this may be completely wrong:



// "a" is an entity with width, height, x, y, and an angle.
// Note: I have no clue how to process the Canvas angle into
// projected points on an axis to test a side.
getEdges: function(a) {
var top = {
x: a.x - (a.x + a.width),
y: a.y - a.y
},
bottom = {
x: a.x - (a.x + a.width),
y: a.y + a.height - (a.y + a.height)
},
left = {
x: a.x - a.x,
y: a.y - (a.y + a.height)
},
right = {
x: a.x - a.x,
y: a.y - (a.y + a.height)
};

return [top, right, left, bottom];
}




No comments:

Post a Comment