Géométrie plane

Médianes

 
<div id='boxMed1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script> 
var board = JXG.JSXGraph.initBoard('boxMed1', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); 

var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, 0], {label:{offset:[-15,-5]}} ); 
var C = board.create('point', [0.2, 1.5]);
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); 
var mAB = board.create('midpoint', [A, B], {name:'C\'',size:0.8,label:{offset:[5,-15],fontSize:10},strokeColor:'blue'}); 
var mAC = board.create('midpoint', [A, C], {name:'B\'',size:0.8,label:{offset:[5,13],fontSize:10},strokeColor:'blue'}); 
var mBC = board.create('midpoint', [C, B], {name:'A\'',size:0.8,label:{offset:[-15,-5],fontSize:10},strokeColor:'blue'}); 
var l1 = board.create('line',[mAB,C]);
var l2 = board.create('line',[mAC,B]);
var l3 = board.create('line',[mBC,A]);
var G = board.create('intersection',[l1,l2],{name:'G',label:{offset:[5,10]}})
</script>

Médiatrices

 

<div id='boxMediatrice' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script> 
var board = JXG.JSXGraph.initBoard('boxMediatrice', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); 
 
var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, 0], {label:{offset:[-15,-5]}} ); 
var C = board.create('point', [0.2, 1.5]);
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); 
var mAB = board.create('midpoint', [A, B], {name:'C\'',size:0.8,label:{offset:[5,-15],fontSize:10},strokeColor:'blue'}); 
var mAC = board.create('midpoint', [A, C], {name:'B\'',size:0.8,label:{offset:[5,13],fontSize:10},strokeColor:'blue'}); 
var mBC = board.create('midpoint', [C, B], {name:'A\'',size:0.8,label:{offset:[-15,-5],fontSize:10},strokeColor:'blue'}); 
var medAB = board.create('perpendicular', [pol.borders[0], mAB]); 
var medAC = board.create('perpendicular', [pol.borders[2], mAC]);
var medBC = board.create('perpendicular', [pol.borders[1], mBC]);
var O = board.create('intersection',[medAB,medBC],{name:'O',label:{offset:[10,10]}});
</script>

Hauteurs

 
<div id='boxHauteur' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script> 
var board = JXG.JSXGraph.initBoard('boxHauteur', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); 
var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, 0], {label:{offset:[-15,5]}} ); 
var C = board.create('point', [0.2, 1.5] );
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); 
var hC = board.create('perpendicular', [pol.borders[0], C]); 
var hA = board.create('perpendicular', [pol.borders[1], A]); 
var hB = board.create('perpendicular', [pol.borders[2], B]);
var c1 = board.create('intersection',[hC,pol.borders[0]],{name:'C_1',label:{offset:[-17,-10]}});
var a1 = board.create('intersection',[hA,pol.borders[1]],{name:'A_1',label:{offset:[-22,-2]}});
var b1 = board.create('intersection',[hB,pol.borders[2]],{name:'B_1',label:{offset:[2,15]}});
var H = board.create('intersection',[hC,hA],{name:'H',label:{offset:[5,15]}});
</script>

Distance d'un point à une droite

 
<div id='boxDistPtD' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script> 
var board12 = JXG.JSXGraph.initBoard('boxDistPtD', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); 
var A12 = board12.create('point', [0, 1.3] ,{visible:true,fixed:false});
var B = board12.create('point', [-1, 0], {label:{offset:[-15,5]},visible:false} ); 
var C = board12.create('point', [1, 0], {visible:false});
var l1 = board12.create('line',[B,C],{straightFirst:true});
var pl1 = board12.create('perpendicular',[l1,A12],{visible:false});
var H = board12.create('intersection',[l1,pl1],{name:'H'});
var M12 = board12.create('point', [1.1, 0], {slideObject: l1,name:'M'});
var s1 = board12.create('segment',[A12,M12],{strokeColor:'black',strokeWidth:1,dash:2});
var s2 = board12.create('segment',[A12,H],{strokeColor:'gray',strokeWidth:1,dash:1});
var t1 = board12.create('text',[-1,1.6,function(){var l=Math.sqrt(Math.pow(M12.X()-A12.X(),2)+Math.pow(M12.Y()-A12.Y(),2));return 'AM = '+l;}]);
</script>

Bissectrice

 
<div id='boxBis' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script> 
var board = JXG.JSXGraph.initBoard('boxBis', {boundingbox: [-1.5, 2.3, 1.5, -0.2], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); 
var A = board.create('point', [1, 0] ,{visible:false,fixed:true});
var B = board.create('point', [-1, 0], {label:{offset:[-15,5]},visible:false,fixed:true} ); 
var C = board.create('point', [-0.5, 1.3], {visible:false,fixed:true});
var l1 = board.create('line',[B,A],{straightFirst:false});
var l2 = board.create('line',[B,C],{straightFirst:false});
var a1 = board.create('angle',[A,B,C],{name:'',label:{fontSize:0}});
var bB = board.create('bisector', [A, B, C],{straightFirst:false}); 
var M = board.create('point', [1.1, 0], {slideObject: bB,name:'M',label:{offset:[-5,10]}});
var p1 = board.create('perpendicular',[l1,M],{straightFirst:false,visible:false});
var M1 = board.create('intersection',[l1,p1],{name:'M_1',label:{offset:[5,-10]}});
var s1 = board.create('segment',[M,M1],{dash:2,strokeColor:'gray',strokeWidth:1});
var p2 = board.create('perpendicular',[l2,M],{straightFirst:false,visible:false});
var M2 = board.create('intersection',[l2,p2],{name:'M_2',label:{offset:[-22,5]}});
var s2 = board.create('segment',[M,M2],{dash:2,strokeColor:'gray',strokeWidth:1});
var t1 = board.create('text',[-1.45,2.1,function(){var l=Math.sqrt(Math.pow(M.X()-M1.X(),2)+Math.pow(M.Y()-M1.Y(),2));return 'MM_1 = '+l;}]);
var t2 = board.create('text',[-1.45,1.9,function(){var l=Math.sqrt(Math.pow(M.X()-M2.X(),2)+Math.pow(M.Y()-M2.Y(),2));return 'MM_2 = '+l;}]);
</script>

Bissectrices

 
<div id='boxTriangleBis' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script> 
var board = JXG.JSXGraph.initBoard('boxTriangleBis', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}}); 
var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, -0.65], {label:{offset:[-15,5]}} ); 
var C = board.create('point', [0.2, 1.47]);
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); 
var bB = board.create('bisector', [A, B, C],{straightFirst:true,strokeWidth:1,dash:2}); 
var bC = board.create('bisector', [B, C, A],{straightFirst:true,strokeWidth:1,dash:2}); 
var bA = board.create('bisector', [C, A, B],{straightFirst:true,strokeWidth:1,dash:2}); 
var Ib = board.create('intersection',[bB,bA],{name:'I'});
var pAB = board.create('perpendicular',[pol.borders[0],Ib],{visible:false});
var I1b = board.create('intersection',[pol.borders[0],pAB],{name:'I_1',visible:true,label:{offset:[-2,-15]}});
var s1 = board.create('segment',[I1b,Ib],{strokeWidth:0.5,strokeColor:'red'});
var pAC = board.create('perpendicular',[pol.borders[2],Ib],{visible:false});
var I2b = board.create('intersection',[pol.borders[2],pAC],{name:'I_2',visible:true,label:{offset:[15,-5]}});
var s2 = board.create('segment',[I2b,Ib],{strokeWidth:0.5,strokeColor:'red'});
var pBC = board.create('perpendicular',[pol.borders[1],Ib],{visible:false});
var I3b = board.create('intersection',[pol.borders[1],pBC],{name:'I_3',visible:true,label:{offset:[-15,-5]}});
var s3 = board.create('segment',[I3b,Ib],{strokeWidth:0.5,strokeColor:'red'});
var cercleI = board.create('circle',[Ib,I1b]);
</script>

Droite d'Euler

 
<div id='box' class='jxgbox' style='width:400px; height:400px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script type='text/javascript'>
    (function () {
        var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false});
        var cerise = {strokeColor: '#901B77',fillColor: '#CA147A'},
            grass = {
                strokeColor: '#009256',
                fillColor: '#65B72E',
                visible: true,
                withLabel: true
            },
            perpendicular = {
                strokeColor: 'black',
                dash: 1,
                strokeWidth: 1,
                point: JXG.deepCopy(cerise, {
                    visible: true,
                    withLabel: true
                })
            },
            median = {
                strokeWidth: 1,
                strokeColor: '#333333',
                dash:2
            },
            A = board.create('point', [1, 0], cerise),
            B = board.create('point', [-1, 0], cerise),
            C = board.create('point', [0.2, 1.5], cerise),
            pol = board.create('polygon',[A,B,C], {
                fillColor: '#FFFF00',
                lines: {
                    strokeWidth: 2,
                    strokeColor: '#009256'
                }
            });
        var pABC, pBCA, pCAB, i1;
        perpendicular.point.name = 'H_c';
        pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
        perpendicular.point.name = 'H_a';
        pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
        perpendicular.point.name = 'H_b';
        pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
        grass.name = 'H';
        i1 = board.create('intersection', [pABC, pCAB, 0], grass);
        var mAB, mBC, mCA;
        cerise.name = 'M_c';
        mAB = board.create('midpoint', [A, B], cerise);
        cerise.name = 'M_a';
        mBC = board.create('midpoint', [B, C], cerise);
        cerise.name = 'M_b';
        mCA = board.create('midpoint', [C, A], cerise);
        var ma, mb, mc, i2;
        ma = board.create('segment', [mBC, A], median);
        mb = board.create('segment', [mCA, B], median);
        mc = board.create('segment', [mAB, C], median);
        grass.name = 'S';
        i2 = board.create('intersection', [ma, mc, 0], grass);
        var c;
        grass.name = 'U';
        c = board.create('circumcircle',[A, B, C], {
            strokeColor: '#000000',
            dash: 3,
            strokeWidth: 1,
            center: grass
        });
        var euler;
        euler = board.create('line', [i1, i2], {
            strokeWidth: 2,
            strokeColor:'#901B77'
        });
board.update();
    })();
</script>

Quadrilatère

 
<div id='jxgbox1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script type='text/javascript'>
var brdqu = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-10, 10, 10, -10], showCopyright:false});
var aq = brdqu.create('point', [-2, 1]);
var bq = brdqu.create('point', [-4, -5]);
var cq = brdqu.create('point', [3, -6]);
var dq = brdqu.create('point', [2, 3]);
var pq = brdqu.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: true});
</script>

Quadrilatère (repère)

 
<div id='jxgboxq' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script type='text/javascript'>
var brdq = JXG.JSXGraph.initBoard('jxgboxq', {boundingbox:[-2,2,2,-2], axis:true, showCopyright:false});
var pq = [];
for (var i=0; i<4; i++) {
    pq.push(brdq.create('point', [Math.random()*3.6-1.8, Math.random()*3.6-1.8]));
}
var pol = brdq.create('polygon',pq,{
    withLines:true,
    withLabel: false,
    label: {offset:[-200,100]}           // Pixel values
});
</script>

Optimisation

 
<div id='grr2' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script> 
var board2 = JXG.JSXGraph.initBoard('grr2', {boundingbox: [-10, 10, 10, -10], showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A2 = board2.create('point',[-8,-8],{fixed: true, name:'A',label:{offset:[-10,-10]}})
var B2 = board2.create('point',[8,-8],{fixed: true, name:'B',label:{offset:[10,-10]}})
var C2 = board2.create('point',[8,8],{fixed: true, name:'C',label:{offset:[10,10]}})
var D2 = board2.create('point',[-8,8],{fixed: true, name:'D',label:{offset:[-10,10]}})
board2.create('segment',[A2,B2])
board2.create('segment',[C2,B2])
board2.create('segment',[C2,D2])
board2.create('segment',[A2,D2])
var M2 = board2.create('point',[-5,-8],{name:'M',label:{offset:[-5,-15]}});
var H2 = board2.create('point',[function (){return M2.X()},function (){return M2.X()}],{name:'',size:0})
var I2 = board2.create('point',[-8,function (){return M2.X()}],{name:'',size:0})
var J2 = board2.create('point',[function (){return (M2.X()+8)/2},function (){return M2.X()}],{name:'',size:0})
board2.create('segment',[B2,J2])
board2.create('segment',[M2,J2])
board2.create('segment',[M2,H2])
board2.create('segment',[I2,H2])
board2.on('move',function (){
	if( M2.X()>-8 && M2.X()<8 ){
		M2.moveTo( [ M2.X() , -8 ] )
        }
    if( M2.X()<=-8){ 
    	M2.moveTo( [ -8 , -8 ] )
        }
    if( M2.X()>=8){ 
    	M2.moveTo( [ 8 , -8 ] )
        }
})
</script>

<div id='grr1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div> 
<script> 
var board1 = JXG.JSXGraph.initBoard('grr1', {boundingbox: [-10, 10, 10, -10], showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A = board1.create('point',[-8,-8],{fixed: true, name:'A',label:{offset:[-10,-10]}})
var B = board1.create('point',[8,-8],{fixed: true, name:'B',label:{offset:[10,-10]}})
var C = board1.create('point',[8,8],{fixed: true, name:'C',label:{offset:[10,10]}})
var D = board1.create('point',[-8,8],{fixed: true, name:'D',label:{offset:[-10,10]}})
board1.create('segment',[A,B])
board1.create('segment',[C,B])
board1.create('segment',[C,D])
board1.create('segment',[A,D])
var d1 = board1.create('segment',[B,D])
var M = board1.create('point',[-5,5],{name:'M',label:{offset:[-20,0]}});
var H = board1.create('point',[8,function (){return M.Y()}],{name:'H'})
board1.create('polygon',[A,B,H,M],{dash:2,strokeColor:'black',fillColor:'blue'})
board1.create('polygon',[C,D,M],{dash:2,strokeColor:'black',fillColor:'pink'})
board1.create('segment',[M,H],{dash:2,strokeColor:'black'})
board1.create('segment',[M,C],{dash:2,strokeColor:'black'})
board1.create('segment',[M,A],{dash:2,strokeColor:'black'})

board1.on('move',function (){
	if( M.X()>-8 && M.X()<8 ){
		M.moveTo( [ M.X() , -M.X() ] )
        }
    if( M.X()<=-8){ 
    	M.moveTo( [ -8 , 8 ] )
        }
    if( M.X()>=8){ 
    	M.moveTo( [ 8 , -8 ] )
        }
})
</script>

Vecteurs

 
<div id='jxgboxq6' class='jxgbox' style='width:300px; height:300px;margin:auto;margin-top:20px;margin-bottom:20px;'></div> 
<script type='text/javascript'> 
var brdq = JXG.JSXGraph.initBoard('jxgboxq6', {boundingbox:[-5,5,5,-5], axis:false, showCopyright:false,showNavigation:false}); 
var s = brdq.create('slider',[[-4.8,-4.1],[3.5,-4.1],[-6,2,6]],{name:'λ',snapWidth:0.1});
var pA = brdq.create('point',[-0.5,0],{fixed:false,name:'A',size:0.1,label:{offset:[-15,10]}});
var pB = brdq.create('point',[0.5,0],{fixed:false,name:'B',size:0.1,label:{offset:[15,10]}});
var vU = brdq.create('arrow',[pA,pB],{size:4,withLabel:true,name:function(){return '$\\vec{u}$';},label:{offset:[10,-10]}});
var pI = brdq.create('point',[0,-1],{visible:false});
var pC = brdq.create('point',[function(){return 0+(pB.X()-pA.X())*s.Value()},function(){return -1+(pB.Y()-pA.Y())*s.Value()}],{size:0.1,trace:false,strokeColor:'black',name:'C',visible:false});
var vV = brdq.create('arrow',[pI,pC],{size:4,withLabel:true,name:function(){return '$\\vec{v} = \\lambda\\vec{u}$';},label:{offset:[10,-20]}});
</script>

Canon

 
<div id='jxgbox2' class='jxgbox' style='width:400px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script type='text/javascript'>
    (function () {
        var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),
            bottom = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),
            muzzle = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),
            shoot = board.create('text', [11, 9.5, '<button id="shoot">Shoot</button>']),
            reset = board.create('text', [15, 9.5, '<button id="reset">Reset</button>']),
            rot, rp, cp, cc, cannonball, cbanim, solution, velocity,
            animTime = function () {
                return 3000;
            },
            fAngle = function () {
                return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());
            },
            fSolution = function (x) {
                var b = fAngle(),
                    g = 9.81/2;
                return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();
            },
            fAnim = function (t) {
                var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,
                    s = NaN;
                if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {
                    s = solution.points[i].usrCoords.slice(1);
                }
                return s;
            };
        board.options.animationDelay = 50;
        velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});
        cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});
        cc = board.create('circle', [cp, 1.25], {visible: false});
        rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});
        rot = board.create('transform', [fAngle, cp], {type: 'rotate'});
        rot.bindTo(muzzle);
        cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});
        cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});
        rot.bindTo(cannonball);
        solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});
        JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {
            cannonball.setProperty({
                visible: false
            });
            cbanim.setProperty({
                visible: true
            });
            cbanim.moveTo([cannonball.X(), cannonball.Y()]);
            cbanim.moveAlong(fAnim, animTime(), {
                callback: function () {
                    // this is executed when the animation is finished
                }
            });
        }, this);
        JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {
            board.stopAllAnimation();
            cbanim.setProperty({visible: false});
            cannonball.setProperty({visible: true});
        }, this);
    })();
</script>

Angles adjacents

 
<div id="jxgbox7" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;margin-bottom: 10px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox7', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: false});
JXG.Options.text.useMathJax = true;
var pA = board.create('point',[-2.2,0], {name:'$A$',withLabel: true, label:{ offset:[-20,-10] },size:1 });
var pB = board.create('point',[1.8,-1.9],{name:'B',size:1});
var pC = board.create('point',[-0.2,2.9],{name:'C',size:1});
var pU = board.create('point',[1,0],{name:'',size:0});
var vectU = board.create('arrow',[ pA,pU ], {label:'u', strokeColor: 'black', strokeWidth:3});
var tu = board.create('text',[ function () {return (pA.X()+pU.X())/2;}, function () {return (pA.Y()+pU.Y())/2-0.2;}  ,function() { 
    return '$\\vec{u}$';
  }], {fontSize:12}); 
var vectAB = board.create('arrow',[ pA,pB ], {label:'u', strokeColor: 'black', strokeWidth:3});
var vectAC = board.create('arrow',[ pA,pC ], {label:'u', strokeColor: 'black', strokeWidth:3});
var tangle3 = board.create('angle', [pB,pA,pC], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:1.2, fillColor : 'rgba(0,0,255,0.5)'});
var tangle1 = board.create('angle', [pB,pA,pU], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.7, fillColor : 'green'});
var tangle2 = board.create('angle', [pU,pA,pC], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.7, fillColor : 'red'});
</script>

Approximation de l'aire du disque

 
<div id='jxgboxdi' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script type='text/javascript'>
        var board3 = JXG.JSXGraph.initBoard('jxgboxdi', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true, showCopyright:false});
        var N = board3.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
        var circ = board3.createElement('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3});
        var c = board3.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2}); 
        c.updateDataArray = function() {
                var r = 1, n = Math.floor(N.Value()), 
                    x = [0], y = [0],
                    phi = Math.PI/n,
                    h = r*Math.cos(phi),
                    s = r*Math.sin(phi),
                    i, j, 
                    px = 0, py = 0, sgn = 1, 
                    d = 16, 
                    dt = phi/d, 
                    pt;               
                for (i=0;i<n;i++) {
                    for (j=-d;j<=d;j++) {
                        pt = dt*j;
                        x.push(px+r*Math.sin(pt));
                        y.push(sgn*r*Math.cos(pt)-(sgn-1)*h*0.5);
                    }
                    px += s;
                    sgn *= (-1);
                }
                x.push((n-1)*s);
                y.push(h+(sgn-1)*h*0.5);
                this.dataX = x;
                this.dataY = y;
            }
        var c2 = board3.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1}); 
        c2.updateDataArray = function() {
                var r = 1, n = Math.floor(N.Value()), 
                    px = circ.midpoint.X(), py = circ.midpoint.Y(),  
                    x = [px], y = [py],
                    phi = Math.PI/n,
                    s = r*Math.sin(phi),
                    i, j, 
                    d = 16, 
                    dt = phi/d, 
                    pt = Math.PI*0.5+phi;                    
                for (i=0;i<n;i++) {
                    for (j=-d;j<=d;j++) {
                        x.push(px+r*Math.cos(pt));
                        y.push(py+r*Math.sin(pt));
                        pt -= dt;
                    }
                    x.push(px);
                    y.push(py);
                    pt += dt;
                }
                this.dataX = x;
                this.dataY = y;
            }
            board3.update();
</script>