Difference between revisions of "Approximation of the circle area"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
(51 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | <jsxgraph width=" | + | <jsxgraph width="809" 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. | + | var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1}); |
− | board. | + | var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3}); |
− | |||
− | |||
+ | var c = board.create('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 29: | Line 28: | ||
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.create('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; | ||
} | } | ||
board.update(); | board.update(); | ||
+ | |||
</jsxgraph> | </jsxgraph> | ||
===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||
− | <source lang=" | + | <source lang="javascript"> |
− | + | board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true}); | |
− | board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[- | + | var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1}); |
− | var N = board. | + | var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff13'}); |
− | board. | ||
− | |||
− | |||
+ | var c = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2}); | ||
c.updateDataArray = function() { | c.updateDataArray = function() { | ||
− | var r = 1, n = Math.floor(N.Value()), x = [0], y = [0], | + | var r = 1, n = Math.floor(N.Value()), |
− | h = r*Math.cos( | + | x = [0], y = [0], |
− | s = r*Math.sin( | + | phi = Math.PI/n, |
− | i, j, px = 0, py = 0, sgn = 1, | + | h = r*Math.cos(phi), |
− | d = 16, dt = | + | 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 (i=0;i<n;i++) { | ||
Line 55: | Line 84: | ||
pt = dt*j; | pt = dt*j; | ||
x.push(px+r*Math.sin(pt)); | x.push(px+r*Math.sin(pt)); | ||
− | + | y.push(sgn*r*Math.cos(pt)-(sgn-1)*h*0.5); | |
− | |||
} | } | ||
px += s; | px += s; | ||
Line 63: | 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.create('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; | ||
} | } | ||
board.update(); | board.update(); | ||
− | |||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Geometry]] | [[Category:Geometry]] |
Latest revision as of 12:56, 17 March 2020
The underlying JavaScript code
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true});
var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff13'});
var c = board.create('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.create('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();