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 |
||
(30 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<jsxgraph width=" | <jsxgraph width="809" height="500"> | ||
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true}); | 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}); | ||
var circ = board. | var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3}); | ||
var c = 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()), | var r = 1, n = Math.floor(N.Value()), | ||
Line 32: | Line 32: | ||
} | } | ||
var c2 = board. | var c2 = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1}); | ||
c2.updateDataArray = function() { | c2.updateDataArray = function() { | ||
var r = 1, n = Math.floor(N.Value()), | var r = 1, n = Math.floor(N.Value()), | ||
Line 42: | Line 42: | ||
d = 16, | d = 16, | ||
dt = phi/d, | dt = phi/d, | ||
pt = 0; | pt = Math.PI*0.5+phi; | ||
for (i=0;i< | for (i=0;i<n;i++) { | ||
for (j=-d;j<=d;j++) { | for (j=-d;j<=d;j++) { | ||
x.push(px+r*Math. | x.push(px+r*Math.cos(pt)); | ||
y.push(py+r*Math. | y.push(py+r*Math.sin(pt)); | ||
pt | pt -= dt; | ||
} | } | ||
x.push(px); | x.push(px); | ||
y.push(py); | y.push(py); | ||
pt += dt; | |||
} | } | ||
this.dataX = x; | this.dataX = x; | ||
Line 57: | Line 58: | ||
} | } | ||
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()), | var r = 1, n = Math.floor(N.Value()), | ||
Line 91: | 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();