<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/oscillator" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Oscillator" 
    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: [-10, 10, 10, -10],
                    keepaspectratio: true,
                    axis: true,
                    grid: false
                }),
                line = board.create('line', [[0, 8], [0, -10]], {
                    visible: false,
                    straightFirst: false,
                    straightLast: false
                }),
                point = board.create('glider', [-8, -7, line], { name: 'Weight' }),
                isInDragMode = false,
                springHangup = board.create('point', [0, 9], { color: 'black', name: 'Spring', fixed: true }),
                i,
                numberOfSpringRings = 10,
                springRings = [];
    
            for (i = 0; i < numberOfSpringRings; i++) {
                springRings[i] = board.create('point', [
                        0.5 - i % 2,
                        function(i) {
                        return function() {
                            return springHangup.Y() - (i + 1) * Math.abs((springHangup.Y() - point.Y()) / (
                                numberOfSpringRings + 1))
                        };
                        }(i)
                       ], { withLabel: false, color: 'black', size: 1 });
                if (i > 0)
                    board.create('segment', [springRings[i - 1], springRings[i]], { color: 'black', strokeWidth: 1 });
            }
            board.create('segment', [springHangup, springRings[0]], { color: 'black', strokeWidth: 1 });
            board.create('segment', [springRings[numberOfSpringRings - 1], point], { color: 'black', strokeWidth: 1 });
    
            function startAnimation(startY) {
                point.moveAlong(function() {
                    var f = function(t, x) {
                            var c = 0.1,
                                k = 0.5,
                                m = 1;
                            return [x[1], -c / m * x[1] - k / m * x[0]];
                        },
                        area = [0, 200],
                        numberOfEvaluations = (area[1] - area[0]) * 100,
                        data = JXG.Math.Numerics.rungeKutta('heun', [startY, 0], area, numberOfEvaluations, f),
                        duration = 20 * 1e3;
    
                    return function(t) {
                        if (t >= duration) {
                            return NaN;
                        }
                        return [0, data[Math.floor(t / duration * numberOfEvaluations)][0]];
                    }
                }());
            }
    
            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;
                        startAnimation(point.Y());
                    }
                }
            }
            board.addHook(hook);
            startAnimation(-5);
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Oscillator" 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: [-10, 10, 10, -10],
                   keepaspectratio: true,
                   axis: true,
                   grid: false
               }),
               line = board.create('line', [[0, 8], [0, -10]], {
                   visible: false,
                   straightFirst: false,
                   straightLast: false
               }),
               point = board.create('glider', [-8, -7, line], { name: 'Weight' }),
               isInDragMode = false,
               springHangup = board.create('point', [0, 9], { color: 'black', name: 'Spring', fixed: true }),
               i,
               numberOfSpringRings = 10,
               springRings = [];
   
           for (i = 0; i < numberOfSpringRings; i++) {
               springRings[i] = board.create('point', [
                       0.5 - i % 2,
                       function(i) {
                       return function() {
                           return springHangup.Y() - (i + 1) * Math.abs((springHangup.Y() - point.Y()) / (
                               numberOfSpringRings + 1))
                       };
                       }(i)
                      ], { withLabel: false, color: 'black', size: 1 });
               if (i > 0)
                   board.create('segment', [springRings[i - 1], springRings[i]], { color: 'black', strokeWidth: 1 });
           }
           board.create('segment', [springHangup, springRings[0]], { color: 'black', strokeWidth: 1 });
           board.create('segment', [springRings[numberOfSpringRings - 1], point], { color: 'black', strokeWidth: 1 });
   
           function startAnimation(startY) {
               point.moveAlong(function() {
                   var f = function(t, x) {
                           var c = 0.1,
                               k = 0.5,
                               m = 1;
                           return [x[1], -c / m * x[1] - k / m * x[0]];
                       },
                       area = [0, 200],
                       numberOfEvaluations = (area[1] - area[0]) * 100,
                       data = JXG.Math.Numerics.rungeKutta('heun', [startY, 0], area, numberOfEvaluations, f),
                       duration = 20 * 1e3;
   
                   return function(t) {
                       if (t >= duration) {
                           return NaN;
                       }
                       return [0, data[Math.floor(t / duration * numberOfEvaluations)][0]];
                   }
               }());
           }
   
           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;
                       startAnimation(point.Y());
                   }
               }
           }
           board.addHook(hook);
           startAnimation(-5);
</jsxgraph>