Circle approximation

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});

// Slider that controls the number n of vertices of the two polygons
var n = brd.createElement('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});

// p0, p1 define the circle 'circ'
var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});
var p1 = brd.create('point',[4,0],{strokeColor:'black',fillColor:'white',name:''});

// With the help of the rotational transform  'rot' we will compute the vertices
// of the polygons
var rot = brd.create('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'});  // angle, rotation center
var ptmp = brd.create('point',[0,0],{visible:false,withLabel:false});  // dummy point for the rotation

// Two curves cOut and cIn defining the inner and outer polygon. They both contain dummy paths, 
// the correct paths will be computed later.
var cOut = brd.create('curve',[[0],[0]],{fillColor:'#5e9abf',highlightFillColor:'#5e9abf',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});

// Construction of the circle
var circ = brd.create('circle',[p0,p1],{fillColor:'#fefd4c',highlightFillColor:'#fefd4c',fillOpacity:0.5,highlightFillOpacity:0.5,strokeColor:'black',highlightStrokeColor:'black'});
var cIn = brd.create('curve',[[0],[0]],{fillColor:'#d769a3',highlightFillColor:'#d769a3',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});

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

// In the updateDataArray methods of the curves cIn and cOut the correct paths are computed.
// updateDataArray() is called during the update of the curve. By default, this method
// is empty, but it can be overwritten.
//
// What is done in these methods? We set the dummy point ptmp to the position of one vertex of the
// regular polygon. Then we apply n-times the rotational transform to this point. In every step we read the new
// coordinates of the points and add them to the path of the curve.
cIn.updateDataArray = function() {
  var i, len = n.Value();
  this.dataX = [p0.X()+circ.getRadius()];
  this.dataY = [p0.Y()];
  ptmp.setPositionDirectly(JXG.COORDS_BY_USER,p0.X()+circ.getRadius(),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();
  var s = circ.getRadius()/Math.cos(Math.PI/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();