Difference between revisions of "Approximation of the circle area"

The underlying JavaScript code

<jsxgraph width="700" height="500">

JXG.Options.text.useASCIIMathML = true;

board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true});
var N = board.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
var circ = board.createElement('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff13'});

var c = board.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 = board.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;
}
board.update();

board.create('text',[3,1,'sum_(i=0)^n i^2']);
</jsxgraph>