<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/animation-of-colliding-points-infinite" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Animation of colliding points (infinite)" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-0.2, 1.2, 1.2, -0.5],
        keepaspectratio: true
    });
    
    var i, len = 25,
        p = [];
    
    // Create points
    for (i = 0; i < len; i++) {
        p[i] = board.create('point', [Math.random(), Math.random()], {
            face: 'o',
            size: 10,
            strokeColor: 'red',
            fillColor: 'red',
            fillOpacity: 0.4,
            strokeOpacity: 0.4,
            withLabel: false
        });
    }
    // Start animation: remove colliding points
    setInterval(function() {
        var i, j;
        for (i = 0; i < p.length; i++) {
            p[i].moveTo([Math.random(), Math.random()], 1000);
        }
        i = 0;
        while (i < p.length) {
            for (j = i + 1; j < p.length; j++) {
                if (p[i].Dist(p[j]) < 0.075) {
                    brd.removeObject(p[j]);
                    p.splice(j, 1);
                    brd.removeObject(p[i]);
                    p.splice(i, 1);
                    i--;
                    break;
                }
            }
            i++;
        }
    }, 2000);
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Animation of colliding points (infinite)" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution 4.0 International License.
   https://creativecommons.org/licenses/by/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-0.2, 1.2, 1.2, -0.5],
       keepaspectratio: true
   });
   
   var i, len = 25,
       p = [];
   
   // Create points
   for (i = 0; i < len; i++) {
       p[i] = board.create('point', [Math.random(), Math.random()], {
           face: 'o',
           size: 10,
           strokeColor: 'red',
           fillColor: 'red',
           fillOpacity: 0.4,
           strokeOpacity: 0.4,
           withLabel: false
       });
   }
   // Start animation: remove colliding points
   setInterval(function() {
       var i, j;
       for (i = 0; i < p.length; i++) {
           p[i].moveTo([Math.random(), Math.random()], 1000);
       }
       i = 0;
       while (i < p.length) {
           for (j = i + 1; j < p.length; j++) {
               if (p[i].Dist(p[j]) < 0.075) {
                   brd.removeObject(p[j]);
                   p.splice(j, 1);
                   brd.removeObject(p[i]);
                   p.splice(i, 1);
                   i--;
                   break;
               }
           }
           i++;
       }
   }, 2000);
</jsxgraph>