Random example | JSXGraph share

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 }
});