JSXGraph
JSXGraph share

Share

Sine function
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/sine" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Sine function" 
    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: 1 / 1; width: 60%;" data-ar="1 / 1"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 60%;" 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 BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID = BOARDID0;

    var board1 = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-10, 1.5, 10, -1.5],
        axis: true,
        keepaspectratio: false
    });
    
    var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], { name: 'x' });
    var y = board1.create('point', [() => x.X(), () => Math.sin(x.X())], {
        size: 1,
        name: '',
        color: 'green'
    });
    var seg1 = board1.create('segment', [x, y], {
        color: 'red',
        name: 'sin',
        withLabel: 'true',
        label: { position: '0.5fr right', distance: 0, anchorX: 10 }
    });
    
    var f = board1.create('functiongraph', [(x) => Math.sin(x)]);
    
    // ----------------
    
    var board = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-1.5, 1.5, 1.5, -1.5],
        axis: true,
        keepaspectratio: true
    });
    board1.addChild(board);
    
    var c = board.create('circle', [[0, 0], 1], {
        fixed: true,
        dash: 2,
        strokeWidth: 1,
        strokeOpacity: 0.6
    });
    
    var p2 = board.create('point', [() => Math.cos(x.X()), () => Math.sin(x.X())], {
        name: 'exp(ix)',
        fixed: true,
        size: 1,
        color: 'green'
    });
    
    var p3 = board.create('point', [() => p2.X(), 0.0], {
        visible: false
    });
    
    board.create('segment', [p2, p3], {
        color: 'red',
        name: 'sin',
        withLabel: true,
        label: { position: '0.5fr right', distance: 0, anchorX: 10 }
    });
 </script> 
/*
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 BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!

var board1 = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-10, 1.5, 10, -1.5],
    axis: true,
    keepaspectratio: false
});

var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], { name: 'x' });
var y = board1.create('point', [() => x.X(), () => Math.sin(x.X())], {
    size: 1,
    name: '',
    color: 'green'
});
var seg1 = board1.create('segment', [x, y], {
    color: 'red',
    name: 'sin',
    withLabel: 'true',
    label: { position: '0.5fr right', distance: 0, anchorX: 10 }
});

var f = board1.create('functiongraph', [(x) => Math.sin(x)]);

// ----------------

var board = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-1.5, 1.5, 1.5, -1.5],
    axis: true,
    keepaspectratio: true
});
board1.addChild(board);

var c = board.create('circle', [[0, 0], 1], {
    fixed: true,
    dash: 2,
    strokeWidth: 1,
    strokeOpacity: 0.6
});

var p2 = board.create('point', [() => Math.cos(x.X()), () => Math.sin(x.X())], {
    name: 'exp(ix)',
    fixed: true,
    size: 1,
    color: 'green'
});

var p3 = board.create('point', [() => p2.X(), 0.0], {
    visible: false
});

board.create('segment', [p2, p3], {
    color: 'red',
    name: 'sin',
    withLabel: true,
    label: { position: '0.5fr right', distance: 0, anchorX: 10 }
});
<jsxgraph width="60%, 60%" aspect-ratio="1 / 1, 1 / 1" numberOfBoards="2" title="Sine function" 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 board1 = JXG.JSXGraph.initBoard(BOARDID0, {
       boundingbox: [-10, 1.5, 10, -1.5],
       axis: true,
       keepaspectratio: false
   });
   
   var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], { name: 'x' });
   var y = board1.create('point', [() => x.X(), () => Math.sin(x.X())], {
       size: 1,
       name: '',
       color: 'green'
   });
   var seg1 = board1.create('segment', [x, y], {
       color: 'red',
       name: 'sin',
       withLabel: 'true',
       label: { position: '0.5fr right', distance: 0, anchorX: 10 }
   });
   
   var f = board1.create('functiongraph', [(x) => Math.sin(x)]);
   
   // ----------------
   
   var board = JXG.JSXGraph.initBoard(BOARDID1, {
       boundingbox: [-1.5, 1.5, 1.5, -1.5],
       axis: true,
       keepaspectratio: true
   });
   board1.addChild(board);
   
   var c = board.create('circle', [[0, 0], 1], {
       fixed: true,
       dash: 2,
       strokeWidth: 1,
       strokeOpacity: 0.6
   });
   
   var p2 = board.create('point', [() => Math.cos(x.X()), () => Math.sin(x.X())], {
       name: 'exp(ix)',
       fixed: true,
       size: 1,
       color: 'green'
   });
   
   var p3 = board.create('point', [() => p2.X(), 0.0], {
       visible: false
   });
   
   board.create('segment', [p2, p3], {
       color: 'red',
       name: 'sin',
       withLabel: true,
       label: { position: '0.5fr right', distance: 0, anchorX: 10 }
   });
</jsxgraph>
The sine function is a projection of the complex number $e^{−ix}$ (which is a point on the unit circle in the complex plane) to the imaginary axis on the complex plane. In the following interactive figure, you can drag the point $x$ on the real axis and observe the behavior of the complex number $e^{−ix}$ and the varying value of $\sin(x)$. The update of the first board is sent to the second board because of `board1.addChild(board);`.
// Define the ids of your boards in BOARDID0, BOARDID1,...

var board1 = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-10, 1.5, 10, -1.5],
    axis: true,
    keepaspectratio: false
});

var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], { name: 'x' });
var y = board1.create('point', [() => x.X(), () => Math.sin(x.X())], {
    size: 1,
    name: '',
    color: 'green'
});
var seg1 = board1.create('segment', [x, y], {
    color: 'red',
    name: 'sin',
    withLabel: 'true',
    label: { position: '0.5fr right', distance: 0, anchorX: 10 }
});

var f = board1.create('functiongraph', [(x) => Math.sin(x)]);

// ----------------

var board = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-1.5, 1.5, 1.5, -1.5],
    axis: true,
    keepaspectratio: true
});
board1.addChild(board);

var c = board.create('circle', [[0, 0], 1], {
    fixed: true,
    dash: 2,
    strokeWidth: 1,
    strokeOpacity: 0.6
});

var p2 = board.create('point', [() => Math.cos(x.X()), () => Math.sin(x.X())], {
    name: 'exp(ix)',
    fixed: true,
    size: 1,
    color: 'green'
});

var p3 = board.create('point', [() => p2.X(), 0.0], {
    visible: false
});

board.create('segment', [p2, p3], {
    color: 'red',
    name: 'sin',
    withLabel: true,
    label: { position: '0.5fr right', distance: 0, anchorX: 10 }
});

license

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