<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/pendulum" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Pendulum" 
    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 ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-9, 9, 9, -12], keepaspectratio: true, false: true,
            grid: true }),
        p1 = board.create('point', [0.0, 0.0], { visible: false, name: 'a', size: 3 }),
        c1 = board.create('circle', [p1, [0, 8]], { visible: false, name: 'circle', size: 3 }),
        p2 = board.create('glider', [3, -4, c1], { visible: true, name: '', size: 3 }),
        grr = board.create('functiongraph', [function(t) { return -10 - 2 * Math.cos(t / 2); }, -10,
        10], { strokeColor: "#cccccc" }),
        p3 = board.create('point', [
                    function() { return 2 * Math.atan2(p2.X(), -p2.Y()) },
                    function() { return -10 - 2 * Math.cos(Math.atan2(p2.X(), -p2.Y())) }], { visible: true, name: '',
            size: 3 }),
        line = board.create('line', [p1, p2], { visible: true, straightFirst: false, straightLast: false }),
        isInDragMode = false;
    
    var gg = board.create('slider', [[-6, 6], [-3, 6], [1, 9.8, 10]]);
    board.create('text', [-8, 6, 'gravity']);
    var cc = board.create('slider', [[3, 6], [6, 6], [0.1, 0.5, 1]]);
    board.create('text', [1, 6, 'damping']);
    
    function startAnimation(start_theta) {
        var c = cc.Value(),
            g = gg.Value(),
            l = 10;
        p2.moveAlong(function() {
            var f = function(t, x) {
                    return [x[1], -c * x[1] - g / l * (Math.sin(x[0]))];
                },
                area = [0, 200],
                numberOfEvaluations = (area[1] - area[0]) * 100,
                data = JXG.Math.Numerics.rungeKutta('heun', [start_theta, 0], area, numberOfEvaluations, f),
                duration = 20 * 1e3;
    
            return function(t) {
                if (t >= duration)
                    return NaN;
                angle2 = -Math.PI / 2 + data[Math.floor(t / duration * numberOfEvaluations)][0];
                return [p1.X() + l * Math.cos(angle2), p1.Y() + l * Math.sin(angle2)];
            };
        }());
    }
    
    function hook() {
        if (!isInDragMode) {
            if (board.mode === board.BOARD_MODE_DRAG) {
                board.stopAllAnimation();
                isInDragMode = true;
            }
        }
        if (isInDragMode) {
            if (board.mode !== board.BOARD_MODE_DRAG) {
                isInDragMode = false;
                angle = Math.atan2(p2.Y() - p1.Y(), p2.X() - p1.X()) + Math.PI * 1 / 2;
                startAnimation(angle);
            }
        }
    }
    
    board.addHook(hook);
    startAnimation(-1.2);
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Pendulum" 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 ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-9, 9, 9, -12], keepaspectratio: true, false: true,
           grid: true }),
       p1 = board.create('point', [0.0, 0.0], { visible: false, name: 'a', size: 3 }),
       c1 = board.create('circle', [p1, [0, 8]], { visible: false, name: 'circle', size: 3 }),
       p2 = board.create('glider', [3, -4, c1], { visible: true, name: '', size: 3 }),
       grr = board.create('functiongraph', [function(t) { return -10 - 2 * Math.cos(t / 2); }, -10,
       10], { strokeColor: "#cccccc" }),
       p3 = board.create('point', [
                   function() { return 2 * Math.atan2(p2.X(), -p2.Y()) },
                   function() { return -10 - 2 * Math.cos(Math.atan2(p2.X(), -p2.Y())) }], { visible: true, name: '',
           size: 3 }),
       line = board.create('line', [p1, p2], { visible: true, straightFirst: false, straightLast: false }),
       isInDragMode = false;
   
   var gg = board.create('slider', [[-6, 6], [-3, 6], [1, 9.8, 10]]);
   board.create('text', [-8, 6, 'gravity']);
   var cc = board.create('slider', [[3, 6], [6, 6], [0.1, 0.5, 1]]);
   board.create('text', [1, 6, 'damping']);
   
   function startAnimation(start_theta) {
       var c = cc.Value(),
           g = gg.Value(),
           l = 10;
       p2.moveAlong(function() {
           var f = function(t, x) {
                   return [x[1], -c * x[1] - g / l * (Math.sin(x[0]))];
               },
               area = [0, 200],
               numberOfEvaluations = (area[1] - area[0]) * 100,
               data = JXG.Math.Numerics.rungeKutta('heun', [start_theta, 0], area, numberOfEvaluations, f),
               duration = 20 * 1e3;
   
           return function(t) {
               if (t >= duration)
                   return NaN;
               angle2 = -Math.PI / 2 + data[Math.floor(t / duration * numberOfEvaluations)][0];
               return [p1.X() + l * Math.cos(angle2), p1.Y() + l * Math.sin(angle2)];
           };
       }());
   }
   
   function hook() {
       if (!isInDragMode) {
           if (board.mode === board.BOARD_MODE_DRAG) {
               board.stopAllAnimation();
               isInDragMode = true;
           }
       }
       if (isInDragMode) {
           if (board.mode !== board.BOARD_MODE_DRAG) {
               isInDragMode = false;
               angle = Math.atan2(p2.Y() - p1.Y(), p2.X() - p1.X()) + Math.PI * 1 / 2;
               startAnimation(angle);
           }
       }
   }
   
   board.addHook(hook);
   startAnimation(-1.2);
</jsxgraph>