JSXGraph test

Template for JSXGraph

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JavaScript

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

    var k = board.create('slider', [[-3,-4],[3,-4],[0,1/3,1]], {name:'k'});

    var A = board.create('point', [-4, -3]);
    var B = board.create('point', [4, -3]);
    var C = board.create('point', [1, 4]);
    var tri = board.create('polygon', [A, B, C], {fillColor: 'yellow', borders: {strokeWidth: 3}});

    var create_triangle = function(A, B, C) {
        var A1 = board.create('point',[
                function(){return B.X()+k.Value()*(C.X()-B.X());},
                function(){return B.Y()+k.Value()*(C.Y()-B.Y());}
            ], {withLabel: false});
        var B1 = board.create('point',[
                function(){return C.X()+k.Value()*(A.X()-C.X());},
                function(){return C.Y()+k.Value()*(A.Y()-C.Y());}
            ], {withLabel: false});
        var C1 = board.create('point',[
                function(){return A.X()+k.Value()*(B.X()-A.X());},
                function(){return A.Y()+k.Value()*(B.Y()-A.Y());}
            ], {withLabel: false});

        /*
        var tri1 = board.create('polygon', [A1, B1, C1], {fillColor: 'green'});
        */

        var l1 = board.create('line', [A, A1], {strokeWidth: 1, strokeColor: 'grey'});
        var l2 = board.create('line', [B, B1], {strokeWidth: 1, strokeColor: 'grey'});
        var l3 = board.create('line', [C, C1], {strokeWidth: 1, strokeColor: 'grey'});

        var P = board.create('intersection', [l1, l2, 0], {withLabel: false});
        var Q = board.create('intersection', [l2, l3, 0], {withLabel: false});
        var R = board.create('intersection', [l1, l3, 0], {withLabel: false});

        var tri2 = board.create('polygon', [P, Q, R], {fillColor: 'red', borders: {strokeWidth: 3}});
    	return [P, Q, R];
    }

    var points = create_triangle(A, B, C);
    points = create_triangle(points[0], points[1], points[2]);
    points = create_triangle(points[0], points[1], points[2]);