JSXGraph
JSXGraph share

Share

Sierpinski triangle
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/sierpinski-triangle" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Sierpinski triangle" 
    allowfullscreen
></iframe>
This code has to 
<input type='button' value="Next iteration" onClick="run();">

<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>

<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 BOARDID = 'board-0';

           var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02631578947368421, 1.0263157894736843,
                   1.2894736842105263, -0.02631578947368421], keepaspectratio: true });
    
           var level = 0;
    
           function run() {
               JXG.JSXGraph.freeBoard(board);
               board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02631578947368421, 1.0263157894736843,
                       1.2894736842105263, -0.02631578947368421] });
               level++;
               board.suspendUpdate();
               paint();
               board.unsuspendUpdate();
           }
    
           function paint() {
               // Initial triangle
               var xCoords = [0, 1, 0.5];
               var yCoords = [0, 0, 1];
               drawPolygon(xCoords, yCoords, level);
               drawTriangle({ x: 0, y: 0 }, { x: 1, y: 0 }, { x: 0.5, y: 1 }, level);
           }
    
           function drawPolygon(xCoords, yCoords, level) {
               var p1 = board.create('point', [xCoords[0], yCoords[0]], { visible: false, name: '', withLabel: false });
               var p2 = board.create('point', [xCoords[1], yCoords[1]], { visible: false, name: '', withLabel: false });
               var p3 = board.create('point', [xCoords[2], yCoords[2]], { visible: false, name: '', withLabel: false });
               var colors = ['#000000', '#665566', '#994499', '#BB33BB', '#EE99FF', '#FFCCFF'];
               var l1 = board.create('line', [p1, p2], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                       6], name: '', withLabel: false });
               var l2 = board.create('line', [p2, p3], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                       6], name: '', withLabel: false });
               var l3 = board.create('line', [p3, p1], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                       6], name: '', withLabel: false });
           }
    
           function drawTriangle(a, b, c, level) {
               if (level == 0) return;
               level -= 1;
    
               // In das übergebene Dreieck, wird ein auf dem Kopf stehendes Dreieck eingefügt
               var xCoords = [c.x, (c.x + b.x) / 2, (a.x + c.x) / 2];
               var yCoords = [b.y, (c.y + a.y) / 2, (c.y + a.y) / 2];
    
               drawPolygon(xCoords, yCoords, level);
    
               // 3 neue Dreiecke bestimmen
               var a1 = a;
               var b1 = { x: c.x, y: b.y };
               var c1 = { x: (a.x + c.x) / 2, y: (c.y + a.y) / 2 };
               drawTriangle(a1, b1, c1, level);
    
               var a2 = { x: c.x, y: b.y };
               var b2 = b;
               var c2 = { x: (c.x + b.x) / 2, y: (c.y + a.y) / 2 };
               drawTriangle(a2, b2, c2, level);
    
               var a3 = { x: (a.x + c.x) / 2, y: (c.y + a.y) / 2 };
               var b3 = { x: (c.x + b.x) / 2, y: (c.y + a.y) / 2 };
               var c3 = c;
               drawTriangle(a3, b3, c3, level);
           }
           paint();
 </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 BOARDID = 'your_div_id'; // Insert your id here!

       var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02631578947368421, 1.0263157894736843,
               1.2894736842105263, -0.02631578947368421], keepaspectratio: true });

       var level = 0;

       function run() {
           JXG.JSXGraph.freeBoard(board);
           board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02631578947368421, 1.0263157894736843,
                   1.2894736842105263, -0.02631578947368421] });
           level++;
           board.suspendUpdate();
           paint();
           board.unsuspendUpdate();
       }

       function paint() {
           // Initial triangle
           var xCoords = [0, 1, 0.5];
           var yCoords = [0, 0, 1];
           drawPolygon(xCoords, yCoords, level);
           drawTriangle({ x: 0, y: 0 }, { x: 1, y: 0 }, { x: 0.5, y: 1 }, level);
       }

       function drawPolygon(xCoords, yCoords, level) {
           var p1 = board.create('point', [xCoords[0], yCoords[0]], { visible: false, name: '', withLabel: false });
           var p2 = board.create('point', [xCoords[1], yCoords[1]], { visible: false, name: '', withLabel: false });
           var p3 = board.create('point', [xCoords[2], yCoords[2]], { visible: false, name: '', withLabel: false });
           var colors = ['#000000', '#665566', '#994499', '#BB33BB', '#EE99FF', '#FFCCFF'];
           var l1 = board.create('line', [p1, p2], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                   6], name: '', withLabel: false });
           var l2 = board.create('line', [p2, p3], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                   6], name: '', withLabel: false });
           var l3 = board.create('line', [p3, p1], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                   6], name: '', withLabel: false });
       }

       function drawTriangle(a, b, c, level) {
           if (level == 0) return;
           level -= 1;

           // In das übergebene Dreieck, wird ein auf dem Kopf stehendes Dreieck eingefügt
           var xCoords = [c.x, (c.x + b.x) / 2, (a.x + c.x) / 2];
           var yCoords = [b.y, (c.y + a.y) / 2, (c.y + a.y) / 2];

           drawPolygon(xCoords, yCoords, level);

           // 3 neue Dreiecke bestimmen
           var a1 = a;
           var b1 = { x: c.x, y: b.y };
           var c1 = { x: (a.x + c.x) / 2, y: (c.y + a.y) / 2 };
           drawTriangle(a1, b1, c1, level);

           var a2 = { x: c.x, y: b.y };
           var b2 = b;
           var c2 = { x: (c.x + b.x) / 2, y: (c.y + a.y) / 2 };
           drawTriangle(a2, b2, c2, level);

           var a3 = { x: (a.x + c.x) / 2, y: (c.y + a.y) / 2 };
           var b3 = { x: (c.x + b.x) / 2, y: (c.y + a.y) / 2 };
           var c3 = c;
           drawTriangle(a3, b3, c3, level);
       }
       paint();
This code creates an interactive recursive triangle pattern, resembling a Sierpiński triangle. The `run()` function increases the recursion `level` each time it is called, clearing and redrawing the board. Triangles are subdivided into smaller triangles recursively, and lines are colored based on the current level. **AI generated desctiption**
<input type='button' value="Next iteration" onClick="run();">
// Define the id of your board in BOARDID

       var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02631578947368421, 1.0263157894736843,
               1.2894736842105263, -0.02631578947368421], keepaspectratio: true });

       var level = 0;

       function run() {
           JXG.JSXGraph.freeBoard(board);
           board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.02631578947368421, 1.0263157894736843,
                   1.2894736842105263, -0.02631578947368421] });
           level++;
           board.suspendUpdate();
           paint();
           board.unsuspendUpdate();
       }

       function paint() {
           // Initial triangle
           var xCoords = [0, 1, 0.5];
           var yCoords = [0, 0, 1];
           drawPolygon(xCoords, yCoords, level);
           drawTriangle({ x: 0, y: 0 }, { x: 1, y: 0 }, { x: 0.5, y: 1 }, level);
       }

       function drawPolygon(xCoords, yCoords, level) {
           var p1 = board.create('point', [xCoords[0], yCoords[0]], { visible: false, name: '', withLabel: false });
           var p2 = board.create('point', [xCoords[1], yCoords[1]], { visible: false, name: '', withLabel: false });
           var p3 = board.create('point', [xCoords[2], yCoords[2]], { visible: false, name: '', withLabel: false });
           var colors = ['#000000', '#665566', '#994499', '#BB33BB', '#EE99FF', '#FFCCFF'];
           var l1 = board.create('line', [p1, p2], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                   6], name: '', withLabel: false });
           var l2 = board.create('line', [p2, p3], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                   6], name: '', withLabel: false });
           var l3 = board.create('line', [p3, p1], { straightFirst: false, straightLast: false, strokeColor: colors[level %
                   6], name: '', withLabel: false });
       }

       function drawTriangle(a, b, c, level) {
           if (level == 0) return;
           level -= 1;

           // In das übergebene Dreieck, wird ein auf dem Kopf stehendes Dreieck eingefügt
           var xCoords = [c.x, (c.x + b.x) / 2, (a.x + c.x) / 2];
           var yCoords = [b.y, (c.y + a.y) / 2, (c.y + a.y) / 2];

           drawPolygon(xCoords, yCoords, level);

           // 3 neue Dreiecke bestimmen
           var a1 = a;
           var b1 = { x: c.x, y: b.y };
           var c1 = { x: (a.x + c.x) / 2, y: (c.y + a.y) / 2 };
           drawTriangle(a1, b1, c1, level);

           var a2 = { x: c.x, y: b.y };
           var b2 = b;
           var c2 = { x: (c.x + b.x) / 2, y: (c.y + a.y) / 2 };
           drawTriangle(a2, b2, c2, level);

           var a3 = { x: (a.x + c.x) / 2, y: (c.y + a.y) / 2 };
           var b3 = { x: (c.x + b.x) / 2, y: (c.y + a.y) / 2 };
           var c3 = c;
           drawTriangle(a3, b3, c3, level);
       }
       paint();

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.