JSXGraph
JSXGraph share

Share

Cosine
QR code 
<iframe 
    src="https://www.jsxgraph.org/share/iframe/cosine" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Cosine" 
    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: 50%;" 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: 50%;" 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;

    // First board
    const board1 = JXG.JSXGraph.initBoard(BOARDID0, {boundingbox: [-10, 1.5, 10, -1.5], axis:true});
    
    // Glider on x-axis
    var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], {name:'x'});
    var y = board1.create('point', [() => x.X(), () => Math.cos(x.X())], {size:1, name:'', color:'green'});
    var x1 = board1.create('segment',  [x,y], {strokeColor:'red'});
    
    var f = board1.create('functiongraph', [(x) => Math.cos(x)]);
    
    board1.create('text',[
             () => x.X()+0.3,
             () => y.Y()*0.5,
             'cos'], {});
    
    // Second board
    const board2 = JXG.JSXGraph.initBoard(BOARDID1, {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true}); 
    
    // First board triggers updates on second board
    board1.addChild(board2);
    
    // Fixed circle
    var p0 = board2.create('point', [0, 0], {fixed:true,visible:false});
    var p1 = board2.create('point', [1, 0], {name:'', visible:false, fixed:true});
    var c = board2.create('circle', [p0, p1], {dash:2, strokeWidth:1, strokeOpacity:0.6});
    
    // Point on circle depends on point x in first board
    var p2 = board2.create('point', [() => Math.cos(x.X()), ()=> Math.sin(x.X())], {
        name:'exp(ix)',
        fixed:true,
        size:1, color:'green'
    });
    
    // Helper points and cos segment
    var p3 = board2.create('point', [() => p2.X(), 0.0], {visible:false, name:''});
    var p4 = board2.create('point', [0.0, () => p2.Y()], {visible:false, name:''});
    board2.create('segment', [p2,p4], {strokeColor:'red'});     // cos
    
    board2.create('text',[
            () => (p2.X() + p4.X()) * 0.3,
            () => p2.Y()+0.05,
            'cos'
    ], {});
    
 </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!

// First board
const board1 = JXG.JSXGraph.initBoard(BOARDID0, {boundingbox: [-10, 1.5, 10, -1.5], axis:true});

// Glider on x-axis
var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], {name:'x'});
var y = board1.create('point', [() => x.X(), () => Math.cos(x.X())], {size:1, name:'', color:'green'});
var x1 = board1.create('segment',  [x,y], {strokeColor:'red'});

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

board1.create('text',[
         () => x.X()+0.3,
         () => y.Y()*0.5,
         'cos'], {});

// Second board
const board2 = JXG.JSXGraph.initBoard(BOARDID1, {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true}); 

// First board triggers updates on second board
board1.addChild(board2);

// Fixed circle
var p0 = board2.create('point', [0, 0], {fixed:true,visible:false});
var p1 = board2.create('point', [1, 0], {name:'', visible:false, fixed:true});
var c = board2.create('circle', [p0, p1], {dash:2, strokeWidth:1, strokeOpacity:0.6});

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

// Helper points and cos segment
var p3 = board2.create('point', [() => p2.X(), 0.0], {visible:false, name:''});
var p4 = board2.create('point', [0.0, () => p2.Y()], {visible:false, name:''});
board2.create('segment', [p2,p4], {strokeColor:'red'});     // cos

board2.create('text',[
        () => (p2.X() + p4.X()) * 0.3,
        () => p2.Y()+0.05,
        'cos'
], {});

<jsxgraph width="50%, 50%" aspect-ratio="1 / 1, 1 / 1" numberOfBoards="2" title="Cosine" 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.
   */
   
   // First board
   const board1 = JXG.JSXGraph.initBoard(BOARDID0, {boundingbox: [-10, 1.5, 10, -1.5], axis:true});
   
   // Glider on x-axis
   var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], {name:'x'});
   var y = board1.create('point', [() => x.X(), () => Math.cos(x.X())], {size:1, name:'', color:'green'});
   var x1 = board1.create('segment',  [x,y], {strokeColor:'red'});
   
   var f = board1.create('functiongraph', [(x) => Math.cos(x)]);
   
   board1.create('text',[
            () => x.X()+0.3,
            () => y.Y()*0.5,
            'cos'], {});
   
   // Second board
   const board2 = JXG.JSXGraph.initBoard(BOARDID1, {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true}); 
   
   // First board triggers updates on second board
   board1.addChild(board2);
   
   // Fixed circle
   var p0 = board2.create('point', [0, 0], {fixed:true,visible:false});
   var p1 = board2.create('point', [1, 0], {name:'', visible:false, fixed:true});
   var c = board2.create('circle', [p0, p1], {dash:2, strokeWidth:1, strokeOpacity:0.6});
   
   // Point on circle depends on point x in first board
   var p2 = board2.create('point', [() => Math.cos(x.X()), ()=> Math.sin(x.X())], {
       name:'exp(ix)',
       fixed:true,
       size:1, color:'green'
   });
   
   // Helper points and cos segment
   var p3 = board2.create('point', [() => p2.X(), 0.0], {visible:false, name:''});
   var p4 = board2.create('point', [0.0, () => p2.Y()], {visible:false, name:''});
   board2.create('segment', [p2,p4], {strokeColor:'red'});     // cos
   
   board2.create('text',[
           () => (p2.X() + p4.X()) * 0.3,
           () => p2.Y()+0.05,
           'cos'
   ], {});
   
</jsxgraph>
The cosine is a projection of the complex number $exp(−ix)$ (which is a point on the unit circle in the complex plane) to the real 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 $exp(−ix)$ and the varying value of $\cos(x)$. 
// Define the ids of your boards in BOARDID0, BOARDID1,...

// First board
const board1 = JXG.JSXGraph.initBoard(BOARDID0, {boundingbox: [-10, 1.5, 10, -1.5], axis:true});

// Glider on x-axis
var x = board1.create('glider', [-9, 0, board1.defaultAxes.x], {name:'x'});
var y = board1.create('point', [() => x.X(), () => Math.cos(x.X())], {size:1, name:'', color:'green'});
var x1 = board1.create('segment',  [x,y], {strokeColor:'red'});

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

board1.create('text',[
         () => x.X()+0.3,
         () => y.Y()*0.5,
         'cos'], {});

// Second board
const board2 = JXG.JSXGraph.initBoard(BOARDID1, {boundingbox: [-1.5, 1.5, 1.5, -1.5], axis:true}); 

// First board triggers updates on second board
board1.addChild(board2);

// Fixed circle
var p0 = board2.create('point', [0, 0], {fixed:true,visible:false});
var p1 = board2.create('point', [1, 0], {name:'', visible:false, fixed:true});
var c = board2.create('circle', [p0, p1], {dash:2, strokeWidth:1, strokeOpacity:0.6});

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

// Helper points and cos segment
var p3 = board2.create('point', [() => p2.X(), 0.0], {visible:false, name:''});
var p4 = board2.create('point', [0.0, () => p2.Y()], {visible:false, name:''});
board2.create('segment', [p2,p4], {strokeColor:'red'});     // cos

board2.create('text',[
        () => (p2.X() + p4.X()) * 0.3,
        () => p2.Y()+0.05,
        'cos'
], {});

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.