Approximation of the circle area: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(54 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 = 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 17: | Line 21: | ||
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 25: | 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 = 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 51: | 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 59: | 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 10: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();