Ball interactions solved with displacement & velocity vectors. Impacts between different masses resolved using physics: conservation of momentum & kinetic energy. Energy losses allowed on 'impact' mode.
Internet Explorer is not supported, install a modern browser.
Controls
Modes:
[ Push 1 ]: Balls push gently around each other, but try to continue with the same velocity before contact.
[ Push 2 ]: Same as 'Push 1', but with a faster push around.
[ Through ]: No contact, just gradients moving as balls pass through each other. Try scaling up the balls.
[ Impact ]: This is the most complex mode, as it represents actual impacts between objects, while taking into account different masses and kinetic energy loss/gain. This mode activates the 'Impact KE Loss' slider.
[ 0% ]: this represents a perfectly elastic impact, where the balls do not lose any energy. The interactions will continue forever.
[ Between 0% & 100% ]: this represents the real world, where there is always some energy lost at an impact (and friction). The kinetic energy (KE) diminishes with each impact and at some point all balls will stop. The higher the value, the quicker they stop.
In real life any dynamic (moving) system left to its devices will eventually stop. All energy will be transformed into heat till there is no energy left in the system.
[ 100% ]: this value represents the case where all KE in the normal direction to the contact point (vector between the ball centres) is dissipated into heat, due to deformations of the objects. The balls will tend to stick together. Note that if enough velocity is present in the tangential direction, the balls will still be able to separate and continue.
[ < 0% ]: negative values are allowed here just for fun. They represent injecting KE after each impact, so balls will continuously accelerate. Try first to slow down the balls till only one or two are moving, then slide to a negative value. Over time all balls will get going till it all goes crazy. A bit like media & people with the corona-virus news.
Others:
This is for the curious, in case you want to dig in further on the maths behind the 'Impact mode'.
[ Vectors ]: all calculations in the JavaScript are based on vectorial operations. The trick at time of the impact is to calculate the contact point (used on colour gradients) and local 'normal' (between ball centres) & 'tangential' directions. If you're new to this, here is some vectors reading and practising.
[ Velocities after an Impact ]: in order to take into account different masses and energy loss/gain, the velocities after an impact become non trivial. These are calculated by using a bit of physics: conservation of momentum & kinetic energy. Also more reading here. If you want to go down the rabbit hole further and include energy losses see Speeds after Impact.
[ Velocity Vectors ]: a very useful tool to calculate the projections of all velocities wrt to the impact 'normal' & 'tangential' directions is the vectorial dot product. It is fast and it (fairly) easily allows to convert all values back to the canvas global system (X & Y) for the animation to look realistic. The JavaScript in this code features a 'dotProduct' function as a helper.