title: AABB collision resolution slipping sides
body: <p>So, I am currently reinventing the wheel (and learning a lot) by trying my hand at making a simple physics engine for my game engine. I have been searching the internet, trying (and failing) to fix my current problem. There are a lot of resources out there on the subject, but none of those that I have found seem to apply to my case.</p>
  
  <p><strong>THE PROBLEM IN SHORT: The collision resolution does not work as intended on some of the corners when two rectangles are colliding. How it fails varies based on the dimensions of the rectangles. What I am looking for is a "shortest overlap" kind of resolution for the collision or another fairly simple solution (I am open for suggestions!).</strong> (Scroll down for a better explaination and illustrations).</p>
  
  <p><strong>WARNING: The following code is probably not very efficient...</strong></p>
  
  <p>First of all, here is my physics loop. It simply loops through all of the game entities and checks if they collide with any other game entities. It is not efficient (n^2 and all of that), but it works for now.</p>
  
  <pre class="lang-js prettyprint-override"><code>updatePhysics: function(step) {
    // Loop through entities and update positions based on velocities
    for (var entityID in Vroom.entityList) {
      var entity = Vroom.entityList[entityID];
      if (entity.physicsEnabled) {
        switch (entity.entityType) {
          case VroomEntity.KINEMATIC:
            entity.pos.x += entity.vel.x * step;
            entity.pos.y += entity.vel.y * step;
            break;
  
          case VroomEntity.DYNAMIC:
            // Dynamic stuff
            break;
        }
      }
    }
    // Loop through entities and detect collisions. Resolve collisions as they are detected.
    for (var entityID in Vroom.entityList) {
      var entity = Vroom.entityList[entityID];
      if (entity.physicsEnabled &amp;&amp; entity.entityType !== VroomEntity.STATIC) {
        for (var targetID in Vroom.entityList) {
          if (targetID !== entityID) {
            var target = Vroom.entityList[targetID];
            if (target.physicsEnabled) {
              // Check if current entity and target is colliding
              if (Vroom.collideEntity(entity, target)) {
                switch (entity.collisionType) {
                  case VroomEntity.DISPLACE:
                    Vroom.resolveTestTest(entity, target);
                    break;
                }
              }
            }
          }
        }
      }
    }
  },
  </code></pre>
  
  <p>Here is the code for the actual collision detection. This also seems to work alright.</p>
  
  <pre class="lang-js prettyprint-override"><code>collideEntity: function(entity, target) {
    if (entity.getBottom() &lt; target.getTop() || entity.getTop() &gt; target.getBottom() ||  entity.getRight() &lt; target.getLeft() ||  entity.getLeft() &gt; target.getRight()) {
      return false;
    }
  
    return true;
  },
  </code></pre>
  
  <p>Here is where the problems start to pop up. I want the entity to simply be "pushed" out of the target entity and have the velocity set to 0. This works fine as long as both the entity and the target are perfect squares. If let's say the entity (the player figure in the gif) is a rectangle, then the collision will "slipp" when colliding the longest sides (the X axis) with the target (the square). If I swap the player dimensions so that it is short and wide, then the same problem appears for the Y axis instead.</p>
  
  <pre class="lang-js prettyprint-override"><code>resolveTestTest: function(entity, target) {
    var normalizedX = (target.getMidX() - entity.getMidX());
    var normalizedY = (target.getMidY() - entity.getMidY());
    var absoluteNormalizedX = Math.abs(normalizedX);
    var absoluteNormalizedY = Math.abs(normalizedY);
  
    console.log(absoluteNormalizedX, absoluteNormalizedY);
  
    // The collision is comming from the left or right
    if (absoluteNormalizedX &gt; absoluteNormalizedY) {
      if (normalizedX &lt; 0) {
        entity.pos.x = target.getRight();
      } else {
        entity.pos.x = target.getLeft() - entity.dim.width;
      }
  
      // Set velocity to 0
      entity.vel.x = 0;
  
      // The collision is comming from the top or bottom
    } else {
      if (normalizedY &lt; 0) {
        entity.pos.y = target.getBottom();
      } else {
        entity.pos.y = target.getTop() - entity.dim.height;
      }
  
      // Set velocity to 0
      entity.vel.y = 0;
    }
  
  },
  </code></pre>
  
  <p><strong>Collision on the Y axis works with these shapes</strong>
  <a href="https://i.stack.imgur.com/SI1A3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SI1A3.gif" alt="GIF"></a></p>
  
  <p><strong>Collision on the X axis slips with these shapes</strong>
  <a href="https://i.stack.imgur.com/AHNpm.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AHNpm.gif" alt="GIF"></a></p>
  
  <p>What can I do to fix this slipping problem? I have been bashing my head against this for the last 5 days, so I would be immensely grateful if some one could help push me in the right direction!</p>
  
  <p>Thank you :)</p>
  
  <p><strong>-- EDIT: --</strong></p>
  
  <p>The slipping also happens if only moving in one direction along the left or right side.</p>
  
  <p><a href="https://i.stack.imgur.com/6o8uC.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6o8uC.gif" alt="GIF"></a></p>
  
  <p><strong>-- EDIT 2 WORKING CODE: --</strong>
  See my answer below for an example of the working code!</p>