JSXGraph
JSXGraph share

Share

Waveforms: pulse and sawtooth
QR code 
<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/waveforms-pulse-and-sawtooth" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Waveforms: pulse and sawtooth" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 12 / 10; width: 100%;" data-ar="12 / 10"></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, {
        axis: true, boundingbox: [-6, 5, 6, -5]
    });
    
    var s = board.create('slider', [[0.75, -2], [4.5, -2], [0, 0, 10]], {name: 'S', snapWidth: 1});
    
    board.create('functiongraph', [
        function(t) {
            var val = 0, sv = s.Value() + 1,  k;
    
            for (k = 1; k <= sv; k++) {
                val += Math.pow(-1, k) * Math.sin(2 * Math.PI * k * t) / k;
            }
            return val + 2;
        }, -10, 10
    ], {strokeColor: '#bb0000'});
    
    board.create('functiongraph', [
        function(t) {
            var val = 0, sv = s.Value() + 1, k;
    
            for (k = 1; k <= sv; k++) {
                val += Math.sin(2 * Math.PI * (2 * k - 1) * t) / (2 * k - 1);
            }
            return val - 2;
        }, -10, 10
    ], {strokeColor: '#cc5520'});
    
 </script> 
/*
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 = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: true, boundingbox: [-6, 5, 6, -5]
});

var s = board.create('slider', [[0.75, -2], [4.5, -2], [0, 0, 10]], {name: 'S', snapWidth: 1});

board.create('functiongraph', [
    function(t) {
        var val = 0, sv = s.Value() + 1,  k;

        for (k = 1; k <= sv; k++) {
            val += Math.pow(-1, k) * Math.sin(2 * Math.PI * k * t) / k;
        }
        return val + 2;
    }, -10, 10
], {strokeColor: '#bb0000'});

board.create('functiongraph', [
    function(t) {
        var val = 0, sv = s.Value() + 1, k;

        for (k = 1; k <= sv; k++) {
            val += Math.sin(2 * Math.PI * (2 * k - 1) * t) / (2 * k - 1);
        }
        return val - 2;
    }, -10, 10
], {strokeColor: '#cc5520'});

<jsxgraph width="100%" aspect-ratio="12 / 10" title="Waveforms: pulse and sawtooth" 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, {
       axis: true, boundingbox: [-6, 5, 6, -5]
   });
   
   var s = board.create('slider', [[0.75, -2], [4.5, -2], [0, 0, 10]], {name: 'S', snapWidth: 1});
   
   board.create('functiongraph', [
       function(t) {
           var val = 0, sv = s.Value() + 1,  k;
   
           for (k = 1; k <= sv; k++) {
               val += Math.pow(-1, k) * Math.sin(2 * Math.PI * k * t) / k;
           }
           return val + 2;
       }, -10, 10
   ], {strokeColor: '#bb0000'});
   
   board.create('functiongraph', [
       function(t) {
           var val = 0, sv = s.Value() + 1, k;
   
           for (k = 1; k <= sv; k++) {
               val += Math.sin(2 * Math.PI * (2 * k - 1) * t) / (2 * k - 1);
           }
           return val - 2;
       }, -10, 10
   ], {strokeColor: '#cc5520'});
   
</jsxgraph>
Approximation of the following waveforms: Reverse sawtooth wave: $$ 2 + \sum_{k=1}^\infty (-1)^k\frac{\sin(2\pi k t)}{k} $$ Pulse wave: $$ (-2) + \sum_{k=1}^\infty \frac{\sin(2 \pi (2k-1)k t)}{(2k-1)} $$
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: true, boundingbox: [-6, 5, 6, -5]
});

var s = board.create('slider', [[0.75, -2], [4.5, -2], [0, 0, 10]], {name: 'S', snapWidth: 1});

board.create('functiongraph', [
    function(t) {
        var val = 0, sv = s.Value() + 1,  k;

        for (k = 1; k <= sv; k++) {
            val += Math.pow(-1, k) * Math.sin(2 * Math.PI * k * t) / k;
        }
        return val + 2;
    }, -10, 10
], {strokeColor: '#bb0000'});

board.create('functiongraph', [
    function(t) {
        var val = 0, sv = s.Value() + 1, k;

        for (k = 1; k <= sv; k++) {
            val += Math.sin(2 * Math.PI * (2 * k - 1) * t) / (2 * k - 1);
        }
        return val - 2;
    }, -10, 10
], {strokeColor: '#cc5520'});

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.