JSXGraph
JSXGraph share

Share

Lattices
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/lattices" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Lattices" 
    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: 100%;" 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: 100%;" 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: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
    board.suspendUpdate();
    var b1 = board.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
    var b2 = board.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
    var i, j;
    for (i = -5; i < 6; i++)
        for (j = -5; j < 6; j++) {
            if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
                board.create('point', [
           function(x, y) { return function() { return x * b1.X() + y * b2.X(); }; }(i, j),
           function(x, y) { return function() { return x * b1.Y() + y * b2.Y(); }; }(i, j)
           ], { name: '', style: 4 });
            }
        }
    board.unsuspendUpdate();
    
    var board2 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
    board2.suspendUpdate();
    var b3 = board2.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
    var b4 = board2.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
    var p = [];
    for (i = -5; i < 6; i++)
        for (j = -5; j < 6; j++) {
            if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
                p[i * 11 + j] = board2.create('point', [
                          function(x, y) { return function() { return x * b3.X() + y * b4.X(); }; }(i, j),
                          function(x, y) { return function() { return x * b3.Y() + y * b4.Y(); }; }(i, j)
                          ], { name: '', style: 4 });
                board2.create('circle', [p[i * 11 + j], 0.5]);
            }
        }
    board2.unsuspendUpdate();
 </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: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
board.suspendUpdate();
var b1 = board.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
var b2 = board.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
var i, j;
for (i = -5; i < 6; i++)
    for (j = -5; j < 6; j++) {
        if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
            board.create('point', [
       function(x, y) { return function() { return x * b1.X() + y * b2.X(); }; }(i, j),
       function(x, y) { return function() { return x * b1.Y() + y * b2.Y(); }; }(i, j)
       ], { name: '', style: 4 });
        }
    }
board.unsuspendUpdate();

var board2 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
board2.suspendUpdate();
var b3 = board2.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
var b4 = board2.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
var p = [];
for (i = -5; i < 6; i++)
    for (j = -5; j < 6; j++) {
        if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
            p[i * 11 + j] = board2.create('point', [
                      function(x, y) { return function() { return x * b3.X() + y * b4.X(); }; }(i, j),
                      function(x, y) { return function() { return x * b3.Y() + y * b4.Y(); }; }(i, j)
                      ], { name: '', style: 4 });
            board2.create('circle', [p[i * 11 + j], 0.5]);
        }
    }
board2.unsuspendUpdate();
<jsxgraph width="100%, 100%" aspect-ratio="1 / 1, 1 / 1" numberOfBoards="2" title="Lattices" 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 board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
   board.suspendUpdate();
   var b1 = board.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
   var b2 = board.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
   var i, j;
   for (i = -5; i < 6; i++)
       for (j = -5; j < 6; j++) {
           if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
               board.create('point', [
          function(x, y) { return function() { return x * b1.X() + y * b2.X(); }; }(i, j),
          function(x, y) { return function() { return x * b1.Y() + y * b2.Y(); }; }(i, j)
          ], { name: '', style: 4 });
           }
       }
   board.unsuspendUpdate();
   
   var board2 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
   board2.suspendUpdate();
   var b3 = board2.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
   var b4 = board2.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
   var p = [];
   for (i = -5; i < 6; i++)
       for (j = -5; j < 6; j++) {
           if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
               p[i * 11 + j] = board2.create('point', [
                         function(x, y) { return function() { return x * b3.X() + y * b4.X(); }; }(i, j),
                         function(x, y) { return function() { return x * b3.Y() + y * b4.Y(); }; }(i, j)
                         ], { name: '', style: 4 });
               board2.create('circle', [p[i * 11 + j], 0.5]);
           }
       }
   board2.unsuspendUpdate();
</jsxgraph>
This code initializes two JSXGraph boards. It creates base points, then generates lattice points as linear combinations of them. On the second board, circles are drawn around these points, visualizing geometric structures defined by the chosen basis. **AI generated desctiption**
// Define the ids of your boards in BOARDID0, BOARDID1,...

var board = JXG.JSXGraph.initBoard(BOARDID0, { boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
board.suspendUpdate();
var b1 = board.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
var b2 = board.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
var i, j;
for (i = -5; i < 6; i++)
    for (j = -5; j < 6; j++) {
        if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
            board.create('point', [
       function(x, y) { return function() { return x * b1.X() + y * b2.X(); }; }(i, j),
       function(x, y) { return function() { return x * b1.Y() + y * b2.Y(); }; }(i, j)
       ], { name: '', style: 4 });
        }
    }
board.unsuspendUpdate();

var board2 = JXG.JSXGraph.initBoard(BOARDID1, { boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: true });
board2.suspendUpdate();
var b3 = board2.create('point', [1, 0], { size: 6, name: '', color: 'blue' });
var b4 = board2.create('point', [0, 1], { size: 6, name: '', color: 'blue' });
var p = [];
for (i = -5; i < 6; i++)
    for (j = -5; j < 6; j++) {
        if (!(i == 1 && j == 0) && !(i == 0 && j == 1)) {
            p[i * 11 + j] = board2.create('point', [
                      function(x, y) { return function() { return x * b3.X() + y * b4.X(); }; }(i, j),
                      function(x, y) { return function() { return x * b3.Y() + y * b4.Y(); }; }(i, j)
                      ], { name: '', style: 4 });
            board2.create('circle', [p[i * 11 + j], 0.5]);
        }
    }
board2.unsuspendUpdate();

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.