Circle approximation

The underlying JavaScript code

<jsxgraph width="600" height="600" box="box">
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, grid:true, unitX: 50, unitY: 50});
var n = brd.createElement('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});

var p0 = brd.createElement('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});
var p1 = brd.createElement('point',[4,0],{strokeColor:'black',fillColor:'white',name:''});
var rot = brd.createElement('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'});  // angle, rotation center
var ptmp = brd.createElement('point',[0,0],{visible:false,withLabel:false});  // dummy point for the rotation
var cOut = brd.createElement('curve',[[],[]],{fillColor:'#5e9abf',highlightFillColor:'#5e9abf',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});
var circ = brd.createElement('circle',[p0,p1],{fillColor:'#fefd4c',highlightFillColor:'#fefd4c',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});
var cIn = brd.createElement('curve',[[],[]],{fillColor:'#d769a3',highlightFillColor:'#d769a3',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});

var tCirc = brd.createElement('text',[-5,-4.0,function(){
}],{fontSize:'20px'});
var tIn = brd.createElement('text',[-5,-4.5,function(){
return 'Area of the inscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (n.Value()*circ.getRadius()*circ.getRadius()*Math.sin(Math.PI/n.Value())).toFixed(4);
}],{fontSize:'20px'});
var tOut = brd.createElement('text',[-5,-5,function(){
return 'Area of the circumscribed  ' +n.Value().toFixed(0)+ '-polygon = ' + (n.Value()*circ.getRadius()*circ.getRadius()*Math.tan(Math.PI/n.Value())).toFixed(4);
}],{fontSize:'20px'});

cIn.updateDataArray = function() {
var i, len = n.Value();
this.dataY = [p0.Y()];
for (i=0;i<len;i++) {
rot.applyOnce(ptmp);
this.dataX.push(ptmp.X());
this.dataY.push(ptmp.Y());
}
}

cOut.updateDataArray = function() {
var i, len = n.Value();
this.dataX = [p0.X()+s];
this.dataY = [p0.Y()];
ptmp.setPositionDirectly(JXG.COORDS_BY_USER, p0.X()+s,p0.Y());
for (i=0;i<len;i++) {
rot.applyOnce(ptmp);
this.dataX.push(ptmp.X());
this.dataY.push(ptmp.Y());
}
}

brd.update();

</jsxgraph>