title: How to make multiple circle objects not go into each other with collision detection?
body: <p>I have a total of 1 to 64 blobs and they all move to my mouse position. But i want them to not go into each other, in other words circle collision detection. However i can't seem to make it smooth and also push new objects after they move for the first time?</p>
  
  <p>Tried checking each blob for collision with other blobs. If collosion is true, then set the distance between the blobs to their accumulated radiuses.</p>
  
  <p>This is how i wrote the colliding function, but this way of doing it makes the resetting of positions too fast. I want it to be a smooth, but fast transition. Like instead of now 1 frame, lets say 10 frames. And another problem is when two objects' are distanced to their radiuses, they might collide into new ones and that will cause this code to run again, and then all blobs go crazy.</p>
  
  <pre><code>this.collide = function() {
     var length = this.blobs.length; // How many blobs?
  
     this.blobs.forEach(function(item, index) {
        for (var i = 0; i &lt; length; i++) {
  
           // Get absolute distance between two vectors
           var v0 = vectorFromTo(blob.blobs[i].pos.x, blob.blobs[i].pos.y, //[x2, y2]
                                 item.pos.x, item.pos.y); //[x1, y1]
  
           // if colliding, set distance between to their accumulated radiuses
           if (magnitude(v0) &lt; blob.blobs[i].r + item.r) {
           item.pos.add(v0.setMag(magnitude(v0) - (blob.blobs[i].r + item.r))); 
           }
        }
     });
  }
  </code></pre>
  
  <p>I haven't tried to code another way of doing this yet because i haven't learned about vectors in school, but i do understand them quite a bit. But what i think would work is if i checked for collision, and if they collide they go opposite directions 50% of the deficit distance, and then they check if they hit new blobs. But this would require physics right? Cause then it would have to do something with the mass and speed of the blob as well to know whats gonna happen to the new blob it crashes into?</p>
  
  <p>EDIT:</p>
  
  <p>This is what im looking for: <a href="https://youtu.be/QvlhRGtlcsw" rel="nofollow noreferrer">https://youtu.be/QvlhRGtlcsw</a></p>
  
  <p>This is what it currently looks like: <a href="https://youtu.be/QEpHnCgomqY" rel="nofollow noreferrer">https://youtu.be/QEpHnCgomqY</a></p>