title: Need help with circle collision and rotation? - Game Physics
body: <p>Ok so I have bunch of balls:</p>
  
  <p><img src="https://i.imgur.com/NuJce.png" alt="Ignight Balls"></p>
  
  <hr>
  
  <p>What I'm trying to figure out is how to make these circles:</p>
  
  <ul>
  <li><p><strong>Rotate</strong> based on the surfaces they are touching</p></li>
  <li><p><strong>Fix collision penetration</strong> when dealing with <strong>multiple</strong> touching objects.</p></li>
  </ul>
  
  <hr>
  
  <p><strong>EDIT:</strong> This is what I mean by <strong>rotation</strong></p>
  
  <p><img src="https://imgur.com/UWYU1.png" alt="alt text"></p>
  
  <ul>
  <li><p><strong>Ball 0</strong> will rotate <strong>anti-clockwise</strong> as it's <strong>leaning on Ball 3</strong></p></li>
  <li><p><strong>Ball 5</strong> will rotate <strong>clockwise</strong> as it's <strong>leaning on Ball 0</strong></p></li>
  </ul>
  
  <hr>
  
  <p>Even though solutions to this are universal, just for the record I'm using Javascript and SVG, and would prefer implementing this myself rather than using a library.</p>
  
  <p>Help would be very much appreciated. Thanks! :)</p>