JSXGraph
JSXGraph share

Share

Sine and cosine functions
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/sine-and-cosine" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Sine and cosine functions" 
    allowfullscreen
></iframe>
This code has to 
<button onclick="window.animation();">Start / Stop Animation</button>

<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 board = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-1.33, 1.33, 1.33, -1.33],
        axis: true,
        keepaspectratio: true
    });
    
    var b1c1 = board.create('circle', [[0, 0], 1], { fixed: true });
    var b1p1 = board.create('glider', [2, 0, b1c1], { size: 6 });
    var perp = board.create('segment', [b1p1, [() => b1p1.X(), 0]], { strokeColor: '#ff0000', dash: 2 });
    var perp2 = board.create('segment', [b1p1, [0, () => b1p1.Y()]], { strokeColor: '#0000ff', dash: 2 });
    
    // Animation
    var animated = false;
    
    window.animation = function() {
        var point = b1p1,
            direction = -1,
            count = 41;
    
        if (animated) {
            point.stopAnimation();
            animated = false;
        } else {
            point.startAnimation(direction, count);
            animated = true;
        }
    }
    
    var board2 = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-1, 1.33, 7, -1.33],
        axis: true,
        keepaspectratio: true,
        showClearTraces: true
    });
    
    board2.create('ticks', [board2.defaultAxes.x, [Math.PI, 2 * Math.PI]], { strokeColor: 'green', strokeWidth: 2 });
    
    // sine:
    var b2p1 = board2.create('point', [
                () => JXG.Math.Geometry.rad([1, 0], [0, 0], b1p1),
                () => b1p1.Y()
    ], {
        fixed: true,
        trace: true,
        color: '#ff0000',
        name: 'S'
    });
    // cosine:
    var b2p2 = board2.create('point', [
                 () => JXG.Math.Geometry.rad([1, 0], [0, 0], b1p1),
                 () => b1p1.X()
    ], {
        fixed: true,
        trace: true,
        color: '#0000ff',
        name: 'C'
    });
    
    board.addChild(board2);
 </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 board = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-1.33, 1.33, 1.33, -1.33],
    axis: true,
    keepaspectratio: true
});

var b1c1 = board.create('circle', [[0, 0], 1], { fixed: true });
var b1p1 = board.create('glider', [2, 0, b1c1], { size: 6 });
var perp = board.create('segment', [b1p1, [() => b1p1.X(), 0]], { strokeColor: '#ff0000', dash: 2 });
var perp2 = board.create('segment', [b1p1, [0, () => b1p1.Y()]], { strokeColor: '#0000ff', dash: 2 });

// Animation
var animated = false;

window.animation = function() {
    var point = b1p1,
        direction = -1,
        count = 41;

    if (animated) {
        point.stopAnimation();
        animated = false;
    } else {
        point.startAnimation(direction, count);
        animated = true;
    }
}

var board2 = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-1, 1.33, 7, -1.33],
    axis: true,
    keepaspectratio: true,
    showClearTraces: true
});

board2.create('ticks', [board2.defaultAxes.x, [Math.PI, 2 * Math.PI]], { strokeColor: 'green', strokeWidth: 2 });

// sine:
var b2p1 = board2.create('point', [
            () => JXG.Math.Geometry.rad([1, 0], [0, 0], b1p1),
            () => b1p1.Y()
], {
    fixed: true,
    trace: true,
    color: '#ff0000',
    name: 'S'
});
// cosine:
var b2p2 = board2.create('point', [
             () => JXG.Math.Geometry.rad([1, 0], [0, 0], b1p1),
             () => b1p1.X()
], {
    fixed: true,
    trace: true,
    color: '#0000ff',
    name: 'C'
});

board.addChild(board2);
Animation of the sine and cosine curve.
Have also a look at the examples 
<button onclick="window.animation();">Start / Stop Animation</button>
// Define the ids of your boards in BOARDID0, BOARDID1,...

var board = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-1.33, 1.33, 1.33, -1.33],
    axis: true,
    keepaspectratio: true
});

var b1c1 = board.create('circle', [[0, 0], 1], { fixed: true });
var b1p1 = board.create('glider', [2, 0, b1c1], { size: 6 });
var perp = board.create('segment', [b1p1, [() => b1p1.X(), 0]], { strokeColor: '#ff0000', dash: 2 });
var perp2 = board.create('segment', [b1p1, [0, () => b1p1.Y()]], { strokeColor: '#0000ff', dash: 2 });

// Animation
var animated = false;

window.animation = function() {
    var point = b1p1,
        direction = -1,
        count = 41;

    if (animated) {
        point.stopAnimation();
        animated = false;
    } else {
        point.startAnimation(direction, count);
        animated = true;
    }
}

var board2 = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-1, 1.33, 7, -1.33],
    axis: true,
    keepaspectratio: true,
    showClearTraces: true
});

board2.create('ticks', [board2.defaultAxes.x, [Math.PI, 2 * Math.PI]], { strokeColor: 'green', strokeWidth: 2 });

// sine:
var b2p1 = board2.create('point', [
            () => JXG.Math.Geometry.rad([1, 0], [0, 0], b1p1),
            () => b1p1.Y()
], {
    fixed: true,
    trace: true,
    color: '#ff0000',
    name: 'S'
});
// cosine:
var b2p2 = board2.create('point', [
             () => JXG.Math.Geometry.rad([1, 0], [0, 0], b1p1),
             () => b1p1.X()
], {
    fixed: true,
    trace: true,
    color: '#0000ff',
    name: 'C'
});

board.addChild(board2);

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.