Difference between revisions of "Approximation of the circle area"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 63: | Line 63: | ||
<source lang="xml"> | <source lang="xml"> | ||
<jsxgraph width="700" height="500"> | <jsxgraph width="700" height="500"> | ||
− | board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[- | + | 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 N = board.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1}); | ||
− | board.createElement('circle',[[ | + | 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() { | c.updateDataArray = function() { | ||
var r = 1, n = Math.floor(N.Value()), | var r = 1, n = Math.floor(N.Value()), | ||
Line 92: | Line 91: | ||
x.push((n-1)*s); | x.push((n-1)*s); | ||
y.push(h+(sgn-1)*h*0.5); | 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.dataX = x; | ||
this.dataY = y; | this.dataY = y; |
Revision as of 13:34, 9 September 2009
The underlying JavaScript code
<jsxgraph width="700" height="500">
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();
</jsxgraph>