JSXGraph
JSXGraph share

Share

Complex numbers arithmetics
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/complex-numbers-arithmetics" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Complex numbers arithmetics" 
    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: 14 / 10; width: 100%;" data-ar="14 / 10"></div>
</div>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 14 / 10; width: 100%;" data-ar="14 / 10"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is not licensed.
    */
    
    const BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID = BOARDID0;

    (function() {
        const board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [-6, 6, 8, -4],
            axis: true,
            defaultAxes: {
            x: {
                name: 'real part',
                withLabel: true,
                label: {
                    position: 'rt',
                    offset: [-5, 15],
                    anchorX: 'right'
                }
            },
            y: {
                withLabel: true,
                name: 'imaginary part',
                label: {
                    position: 'rt',
                    offset: [5, -5],
                    anchorY: 'top'
                }
            }
        },
        });
    
        var txt = board.create('text', [-5, 4.5, 'Addition of complex numbers x and y'], {
            fontSize: 20,
            fixed: true
        });
        var org = board.create('point', [0, 0], {
            style: 10,
            visible: true,
            fixed: true,
            name: ' '
        });
        var x = board.create('point', [2, 2], {
            style: 5,
            color: 'blue',
            name: 'x'
        });
        var y = board.create('point', [-1, -3], {
            style: 5,
            color: 'blue',
            name: 'y'
        });
        var xy = board.create('point',
            ["X(x) + X(y)", "Y(x) + Y(y)"], {
                style: 7,
                color: 'green',
                name: 'x+y'
            });
        var ax = board.create('arrow', [org, x], {
            strokeColor: 'blue'
        });
        var ay = board.create('arrow', [org, y], {
            strokeColor: 'blue'
        });
        var axy = board.create('arrow', [org, xy], {
            strokeColor: 'red'
        });
        var ax2 = board.create('arrow', [x, xy], {
            strokeColor: 'blue',
            strokeWidth: 1,
            dash: 1
        });
        var ay2 = board.create('arrow', [y, xy], {
            strokeColor: 'blue',
            strokeWidth: 1,
            dash: 1
        });
    })();
    
    (function() {
        const board = JXG.JSXGraph.initBoard(BOARDID1, {
            boundingbox: [-6, 6, 8, -4],
            axis: true,
            defaultAxes: {
            x: {
                name: 'real part',
                withLabel: true,
                label: {
                    position: 'rt',
                    offset: [-5, 15],
                    anchorX: 'right'
                }
            },
            y: {
                withLabel: true,
                name: 'imaginary part',
                label: {
                    position: 'rt',
                    offset: [5, -5],
                    anchorY: 'top'
                }
            }
        },
        });
    
        var txt = board.create('text', [-5, 4.5, 'Multiplication of complex numbers x and y'], {
            fontSize: 20,
            fixed: true
        });
    
        var org2 = board.create('point', [0, 0], {
            style: 10,
            visible: true,
            fixed: true,
            name: ' '
        });
        var x = board.create('point', [1, 0], {
            style: 4,
            color: 'blue',
            name: 'x'
        });
        var y = board.create('point', [0, 2], {
            style: 4,
            color: 'red',
            strokeColor: 'red',
            name: 'y'
        });
        var xy = board.create('point',
            ["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
                style: 7,
                fillColor: 'green',
                strokeColor: 'green',
                name: 'x*y'
            });
        var c = board.create('circle', [org2, 1], {
            strokeWidth: 1,
            dash: 1
        });
    })();
 </script> 
/*
This example is not licensed.
*/

const BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!

(function() {
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-6, 6, 8, -4],
        axis: true,
        defaultAxes: {
        x: {
            name: 'real part',
            withLabel: true,
            label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
            }
        },
        y: {
            withLabel: true,
            name: 'imaginary part',
            label: {
                position: 'rt',
                offset: [5, -5],
                anchorY: 'top'
            }
        }
    },
    });

    var txt = board.create('text', [-5, 4.5, 'Addition of complex numbers x and y'], {
        fontSize: 20,
        fixed: true
    });
    var org = board.create('point', [0, 0], {
        style: 10,
        visible: true,
        fixed: true,
        name: ' '
    });
    var x = board.create('point', [2, 2], {
        style: 5,
        color: 'blue',
        name: 'x'
    });
    var y = board.create('point', [-1, -3], {
        style: 5,
        color: 'blue',
        name: 'y'
    });
    var xy = board.create('point',
        ["X(x) + X(y)", "Y(x) + Y(y)"], {
            style: 7,
            color: 'green',
            name: 'x+y'
        });
    var ax = board.create('arrow', [org, x], {
        strokeColor: 'blue'
    });
    var ay = board.create('arrow', [org, y], {
        strokeColor: 'blue'
    });
    var axy = board.create('arrow', [org, xy], {
        strokeColor: 'red'
    });
    var ax2 = board.create('arrow', [x, xy], {
        strokeColor: 'blue',
        strokeWidth: 1,
        dash: 1
    });
    var ay2 = board.create('arrow', [y, xy], {
        strokeColor: 'blue',
        strokeWidth: 1,
        dash: 1
    });
})();

(function() {
    const board = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-6, 6, 8, -4],
        axis: true,
        defaultAxes: {
        x: {
            name: 'real part',
            withLabel: true,
            label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
            }
        },
        y: {
            withLabel: true,
            name: 'imaginary part',
            label: {
                position: 'rt',
                offset: [5, -5],
                anchorY: 'top'
            }
        }
    },
    });

    var txt = board.create('text', [-5, 4.5, 'Multiplication of complex numbers x and y'], {
        fontSize: 20,
        fixed: true
    });

    var org2 = board.create('point', [0, 0], {
        style: 10,
        visible: true,
        fixed: true,
        name: ' '
    });
    var x = board.create('point', [1, 0], {
        style: 4,
        color: 'blue',
        name: 'x'
    });
    var y = board.create('point', [0, 2], {
        style: 4,
        color: 'red',
        strokeColor: 'red',
        name: 'y'
    });
    var xy = board.create('point',
        ["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
            style: 7,
            fillColor: 'green',
            strokeColor: 'green',
            name: 'x*y'
        });
    var c = board.create('circle', [org2, 1], {
        strokeWidth: 1,
        dash: 1
    });
})();
<jsxgraph width="100%, 100%" aspect-ratio="14 / 10, 14 / 10" numberOfBoards="2" title="Complex numbers arithmetics" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is not licensed.
   */
   
   (function() {
       const board = JXG.JSXGraph.initBoard(BOARDID, {
           boundingbox: [-6, 6, 8, -4],
           axis: true,
           defaultAxes: {
           x: {
               name: 'real part',
               withLabel: true,
               label: {
                   position: 'rt',
                   offset: [-5, 15],
                   anchorX: 'right'
               }
           },
           y: {
               withLabel: true,
               name: 'imaginary part',
               label: {
                   position: 'rt',
                   offset: [5, -5],
                   anchorY: 'top'
               }
           }
       },
       });
   
       var txt = board.create('text', [-5, 4.5, 'Addition of complex numbers x and y'], {
           fontSize: 20,
           fixed: true
       });
       var org = board.create('point', [0, 0], {
           style: 10,
           visible: true,
           fixed: true,
           name: ' '
       });
       var x = board.create('point', [2, 2], {
           style: 5,
           color: 'blue',
           name: 'x'
       });
       var y = board.create('point', [-1, -3], {
           style: 5,
           color: 'blue',
           name: 'y'
       });
       var xy = board.create('point',
           ["X(x) + X(y)", "Y(x) + Y(y)"], {
               style: 7,
               color: 'green',
               name: 'x+y'
           });
       var ax = board.create('arrow', [org, x], {
           strokeColor: 'blue'
       });
       var ay = board.create('arrow', [org, y], {
           strokeColor: 'blue'
       });
       var axy = board.create('arrow', [org, xy], {
           strokeColor: 'red'
       });
       var ax2 = board.create('arrow', [x, xy], {
           strokeColor: 'blue',
           strokeWidth: 1,
           dash: 1
       });
       var ay2 = board.create('arrow', [y, xy], {
           strokeColor: 'blue',
           strokeWidth: 1,
           dash: 1
       });
   })();
   
   (function() {
       const board = JXG.JSXGraph.initBoard(BOARDID1, {
           boundingbox: [-6, 6, 8, -4],
           axis: true,
           defaultAxes: {
           x: {
               name: 'real part',
               withLabel: true,
               label: {
                   position: 'rt',
                   offset: [-5, 15],
                   anchorX: 'right'
               }
           },
           y: {
               withLabel: true,
               name: 'imaginary part',
               label: {
                   position: 'rt',
                   offset: [5, -5],
                   anchorY: 'top'
               }
           }
       },
       });
   
       var txt = board.create('text', [-5, 4.5, 'Multiplication of complex numbers x and y'], {
           fontSize: 20,
           fixed: true
       });
   
       var org2 = board.create('point', [0, 0], {
           style: 10,
           visible: true,
           fixed: true,
           name: ' '
       });
       var x = board.create('point', [1, 0], {
           style: 4,
           color: 'blue',
           name: 'x'
       });
       var y = board.create('point', [0, 2], {
           style: 4,
           color: 'red',
           strokeColor: 'red',
           name: 'y'
       });
       var xy = board.create('point',
           ["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
               style: 7,
               fillColor: 'green',
               strokeColor: 'green',
               name: 'x*y'
           });
       var c = board.create('circle', [org2, 1], {
           strokeWidth: 1,
           dash: 1
       });
   })();
</jsxgraph>
Using the anonymous functions `(function() { ... })()` capsules the variables to that anonymous functions. This allows us to use the same variable names in one page for multiple boards.
// Define the ids of your boards in BOARDID0, BOARDID1,...

(function() {
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-6, 6, 8, -4],
        axis: true,
        defaultAxes: {
        x: {
            name: 'real part',
            withLabel: true,
            label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
            }
        },
        y: {
            withLabel: true,
            name: 'imaginary part',
            label: {
                position: 'rt',
                offset: [5, -5],
                anchorY: 'top'
            }
        }
    },
    });

    var txt = board.create('text', [-5, 4.5, 'Addition of complex numbers x and y'], {
        fontSize: 20,
        fixed: true
    });
    var org = board.create('point', [0, 0], {
        style: 10,
        visible: true,
        fixed: true,
        name: ' '
    });
    var x = board.create('point', [2, 2], {
        style: 5,
        color: 'blue',
        name: 'x'
    });
    var y = board.create('point', [-1, -3], {
        style: 5,
        color: 'blue',
        name: 'y'
    });
    var xy = board.create('point',
        ["X(x) + X(y)", "Y(x) + Y(y)"], {
            style: 7,
            color: 'green',
            name: 'x+y'
        });
    var ax = board.create('arrow', [org, x], {
        strokeColor: 'blue'
    });
    var ay = board.create('arrow', [org, y], {
        strokeColor: 'blue'
    });
    var axy = board.create('arrow', [org, xy], {
        strokeColor: 'red'
    });
    var ax2 = board.create('arrow', [x, xy], {
        strokeColor: 'blue',
        strokeWidth: 1,
        dash: 1
    });
    var ay2 = board.create('arrow', [y, xy], {
        strokeColor: 'blue',
        strokeWidth: 1,
        dash: 1
    });
})();

(function() {
    const board = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-6, 6, 8, -4],
        axis: true,
        defaultAxes: {
        x: {
            name: 'real part',
            withLabel: true,
            label: {
                position: 'rt',
                offset: [-5, 15],
                anchorX: 'right'
            }
        },
        y: {
            withLabel: true,
            name: 'imaginary part',
            label: {
                position: 'rt',
                offset: [5, -5],
                anchorY: 'top'
            }
        }
    },
    });

    var txt = board.create('text', [-5, 4.5, 'Multiplication of complex numbers x and y'], {
        fontSize: 20,
        fixed: true
    });

    var org2 = board.create('point', [0, 0], {
        style: 10,
        visible: true,
        fixed: true,
        name: ' '
    });
    var x = board.create('point', [1, 0], {
        style: 4,
        color: 'blue',
        name: 'x'
    });
    var y = board.create('point', [0, 2], {
        style: 4,
        color: 'red',
        strokeColor: 'red',
        name: 'y'
    });
    var xy = board.create('point',
        ["X(x) * X(y) - Y(x) * Y(y)", "X(x) * Y(y) + X(y) * Y(x)"], {
            style: 7,
            fillColor: 'green',
            strokeColor: 'green',
            name: 'x*y'
        });
    var c = board.create('circle', [org2, 1], {
        strokeWidth: 1,
        dash: 1
    });
})();

This example is not licensed.