I don't know if the OP reads this, but one very minor note about the core of the update loop. From the POV of the circles, it is effectively:
for each circle:
if circle is penetrating:
apply collision impulse
remove penetration
integrate forces (gravity) to update velocity
integrate velocity to update position
for each circle:
render circle
Because interpenetration is resolved before integration, the integration step can cause further interpenetration before rendering.
For this case, the effect of this is probably invisible (I couldn't see it). With slower moving objects, higher gravity, or less elastic collisions, this can cause objects to 'sag' or appear springy. A simple change in order helps:
for each circle:
integrate forces (gravity) to update velocity
integrate velocity to update position
if circle is penetrating:
apply collision impulse
remove penetration
for each circle:
render circle
A very minor thing, but something to remember when doing physics animations.
I do not understand. Since this is executed in a loop, for the circle it looks like ...-penetration-integration-penetration-integration-penetration-integration-... in either version. Why does it matter between which steps the circle is rendered?
In the original version it's possible that a penetrating object gets drawn, in the modified version penetrating objects are always resolved before the drawing happens.
So the move might cause an overlap, which we'd draw on screen. Having objects routinely interpenetrating a little (by a frame's worth) can appear springy, as if they aren't made of rigid material.
For this case, the effect of this is probably invisible (I couldn't see it). With slower moving objects, higher gravity, or less elastic collisions, this can cause objects to 'sag' or appear springy. A simple change in order helps:
A very minor thing, but something to remember when doing physics animations.