title: Pygame image collisions leaves gaps between images visually
body: <p>Here I am freezing the two images as soon as they collide. The lollipop starts from the top left and the bear starts from bottom right. They collide in the middle. My positions tell me that they are closer in distance, less than 50 points away</p>
  
  <p>Here is how far the lollipop is to the bear in coordinates:
  <code>lollipop[452, 320]    and   bear[448, 330]</code>
  <code>distance between the two: 10.742572683895418</code></p>
  
  <p>How come the plots tell me different than what I see? Why would the position reference for lollipop be at the bottom of the image and the bear be at the top? Here is how I am blitting the images. </p>
  
  <pre><code>rect = surface1.get_rect()
  rect = rect.move(position[0]-rect.width//2, position[1]-rect.height//2)
  screen.blit(surface1, rect)
  </code></pre>
  
  <p>Dimensions of images are (50,50) and (100,100) respectively.</p>
  
  <hr>
  
  <p>How can I allow my images to collide closer than they do now? (when the blue background touches)</p>
  
  <p><img src="https://i.stack.imgur.com/MesTi.png" alt="Space between two images when they collided"></p>
  
  <p>Here is how they collide when lollipop is coming from the right side and bear from the left. <img src="https://i.stack.imgur.com/gmrI5.png" alt="enter image description here"></p>
  
  <p>Here is how they collide when coming from top/bottom <code>lollipop[480, 291]       bear[440, 261]
  distance: 49.491213409963144</code></p>
  
  <p><img src="https://i.stack.imgur.com/WIKll.png" alt="enter image description here"></p>
  
  <p>How I check for collisions:</p>
  
  <pre><code>def distance(p, q):
  return math.sqrt((p[0]-q[0])**2 + (p[1]-q[1])**2)
  </code></pre>