My polygons only register a collision if they are the same shape and directly over top of each other

Question

I'm trying to learn about 2d polygon collision detection/handling and have ran into a snag.

After running through lots of tutorials and sample code I've attempted to implement my own polygon class and separating axis functionality.

I have two polygons of the exact same shape and size that I can move around the screen, but they only register a collision if they are directly (to the pixel) over top of each other.

I suspect the problem to be in my isSeparatingAxis() or flattenPoints() function, as I'm struggling with some of the math involved in those.

Here's the relevant stripped down code / working example https://jsfiddle.net/gyngbo0d/

Answer 1

On line 161 you return too early from FlattenPoints. Move the return statement outside of the for loop and everything appears to work correctly.