Circle approximation: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(36 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<jsxgraph width="600" height="600" box="box"> | <jsxgraph width="600" height="600" box="box"> | ||
var brd = JXG.JSXGraph.initBoard('box', { | var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true}); | ||
var n = brd. | var n = brd.create('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1}); | ||
var p0 = brd. | var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''}); | ||
var p1 = brd. | var p1 = brd.create('point',[4,0],{strokeColor:'black',fillColor:'white',name:''}); | ||
var rot = brd.create('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'}); // angle, rotation center | |||
var rot = brd. | var ptmp = brd.create('point',[0,0],{visible:false,withLabel:false}); // dummy point for the rotation | ||
var ptmp = brd. | var cOut = brd.create('curve',[[0],[0]],{fillColor:'#5e9abf',highlightFillColor:'#5e9abf',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'}); | ||
var cOut = brd. | var circ = brd.create('circle',[p0,p1],{fillColor:'#fefd4c',highlightFillColor:'#fefd4c',fillOpacity:0.5,highlightFillOpacity:0.5,strokeColor:'black',highlightStrokeColor:'black'}); | ||
var cIn = brd. | var cIn = brd.create('curve',[[0,1,2],[0,1,2]],{fillColor:'#d769a3',highlightFillColor:'#d769a3',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'}); | ||
var tCirc = brd. | var tCirc = brd.create('text',[-5,-4.0,function(){ | ||
return 'Area of the circle = ' + (circ.getRadius()*circ.getRadius()*Math.PI).toFixed( | return 'Area of the circle = ' + (0.0625*circ.getRadius()*circ.getRadius()*Math.PI).toFixed(5); | ||
}],{fontSize: | }],{fontSize:20}); | ||
var tIn = brd. | var tIn = brd.create('text',[-5,-4.5,function(){ | ||
return 'Area of the inscribed polygon = ' + (n.Value()*circ.getRadius()*circ.getRadius()*Math.sin(Math.PI/n.Value())).toFixed( | return 'Area of the inscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625*n.Value()*circ.getRadius()*circ.getRadius()*Math.sin(Math.PI/n.Value())).toFixed(5); | ||
}],{fontSize: | }],{fontSize:20}); | ||
var tOut = brd. | var tOut = brd.create('text',[-5,-5,function(){ | ||
return 'Area of the circumscribed polygon = ' + (n.Value()*circ.getRadius()*circ.getRadius()*Math.tan(Math.PI/n.Value())).toFixed( | return 'Area of the circumscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625*n.Value()*circ.getRadius()*circ.getRadius()*Math.tan(Math.PI/n.Value())).toFixed(5); | ||
}],{fontSize: | }],{fontSize:20}); | ||
cIn.updateDataArray = function() { | cIn.updateDataArray = function() { | ||
var i; | var i, len = n.Value(); | ||
this.dataX = [p0.X()+circ.getRadius()]; | this.dataX = [p0.X()+circ.getRadius()]; | ||
this.dataY = [p0.Y()]; | this.dataY = [p0.Y()]; | ||
ptmp.setPositionDirectly(JXG.COORDS_BY_USER,p0.X()+circ.getRadius(),p0.Y()); | ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+circ.getRadius(), p0.Y()]); | ||
for (i=0;i< | for (i=0;i<len;i++) { | ||
rot.applyOnce(ptmp); | rot.applyOnce(ptmp); | ||
this.dataX.push(ptmp.X()); | this.dataX.push(ptmp.X()); | ||
Line 34: | Line 34: | ||
cOut.updateDataArray = function() { | cOut.updateDataArray = function() { | ||
var i; | var i, len = n.Value(); | ||
var s = circ.getRadius()/Math.cos(Math.PI/n.Value()); | var s = circ.getRadius()/Math.cos(Math.PI/n.Value()); | ||
this.dataX = [p0.X()+s]; | this.dataX = [p0.X()+s]; | ||
this.dataY = [p0.Y()]; | this.dataY = [p0.Y()]; | ||
ptmp.setPositionDirectly(JXG.COORDS_BY_USER, p0.X()+s,p0.Y()); | ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+s,p0.Y()]); | ||
for (i=0;i< | for (i=0;i<len;i++) { | ||
rot.applyOnce(ptmp); | rot.applyOnce(ptmp); | ||
this.dataX.push(ptmp.X()); | this.dataX.push(ptmp.X()); | ||
Line 50: | Line 50: | ||
</jsxgraph> | </jsxgraph> | ||
===The | ===The JavaScript code=== | ||
<source lang=" | <source lang="javascript"> | ||
var brd = JXG.JSXGraph.initBoard('box', { | var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true}); | ||
var n = brd. | var n = brd.create('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1}); | ||
var p0 = brd. | var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''}); | ||
var p1 = brd. | var p1 = brd.create('point',[4,0],{strokeColor:'black',fillColor:'white',name:''}); | ||
var rot = brd.create('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'}); // angle, rotation center | |||
var rot = brd. | var ptmp = brd.create('point',[0,0],{visible:false,withLabel:false}); // dummy point for the rotation | ||
var ptmp = brd. | var cOut = brd.create('curve',[[0],[0]],{fillColor:'#5e9abf',highlightFillColor:'#5e9abf',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'}); | ||
var cOut = brd. | var circ = brd.create('circle',[p0,p1],{fillColor:'#fefd4c',highlightFillColor:'#fefd4c',fillOpacity:0.5,highlightFillOpacity:0.5,strokeColor:'black',highlightStrokeColor:'black'}); | ||
var cIn = brd. | var cIn = brd.create('curve',[[0,1,2],[0,1,2]],{fillColor:'#d769a3',highlightFillColor:'#d769a3',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'}); | ||
var tCirc = brd. | var tCirc = brd.create('text',[-5,-4.0,function(){ | ||
return 'Area of the circle = ' + (circ.getRadius()*circ.getRadius()*Math.PI).toFixed( | return 'Area of the circle = ' + (0.0625*circ.getRadius()*circ.getRadius()*Math.PI).toFixed(5); | ||
}],{fontSize: | }],{fontSize:20}); | ||
var tIn = brd. | var tIn = brd.create('text',[-5,-4.5,function(){ | ||
return 'Area of the inscribed polygon = ' + (n.Value()*circ.getRadius()*circ.getRadius()*Math.sin(Math.PI/n.Value())).toFixed( | return 'Area of the inscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625*n.Value()*circ.getRadius()*circ.getRadius()*Math.sin(Math.PI/n.Value())).toFixed(5); | ||
}],{fontSize: | }],{fontSize:20}); | ||
var tOut = brd. | var tOut = brd.create('text',[-5,-5,function(){ | ||
return 'Area of the circumscribed polygon = ' + (n.Value()*circ.getRadius()*circ.getRadius()*Math.tan(Math.PI/n.Value())).toFixed( | return 'Area of the circumscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625*n.Value()*circ.getRadius()*circ.getRadius()*Math.tan(Math.PI/n.Value())).toFixed(5); | ||
}],{fontSize: | }],{fontSize:20}); | ||
cIn.updateDataArray = function() { | cIn.updateDataArray = function() { | ||
var i; | var i, len = n.Value(); | ||
this.dataX = [p0.X()+circ.getRadius()]; | this.dataX = [p0.X()+circ.getRadius()]; | ||
this.dataY = [p0.Y()]; | this.dataY = [p0.Y()]; | ||
ptmp.setPositionDirectly(JXG.COORDS_BY_USER,p0.X()+circ.getRadius(),p0.Y()); | ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+circ.getRadius(), p0.Y()]); | ||
for (i=0;i< | for (i=0;i<len;i++) { | ||
rot.applyOnce(ptmp); | rot.applyOnce(ptmp); | ||
this.dataX.push(ptmp.X()); | this.dataX.push(ptmp.X()); | ||
Line 86: | Line 86: | ||
cOut.updateDataArray = function() { | cOut.updateDataArray = function() { | ||
var i; | var i, len = n.Value(); | ||
var s = circ.getRadius()/Math.cos(Math.PI/n.Value()); | var s = circ.getRadius()/Math.cos(Math.PI/n.Value()); | ||
this.dataX = [p0.X()+s]; | this.dataX = [p0.X()+s]; | ||
this.dataY = [p0.Y()]; | this.dataY = [p0.Y()]; | ||
ptmp.setPositionDirectly(JXG.COORDS_BY_USER, p0.X()+s,p0.Y()); | ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+s,p0.Y()]); | ||
for (i=0;i< | for (i=0;i<len;i++) { | ||
rot.applyOnce(ptmp); | rot.applyOnce(ptmp); | ||
this.dataX.push(ptmp.X()); | this.dataX.push(ptmp.X()); | ||
Line 99: | Line 99: | ||
brd.update(); | brd.update(); | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Geometry]] | |||
[[Category:Calculus]] | [[Category:Calculus]] |
Latest revision as of 13:32, 3 March 2021
The JavaScript code
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});
var n = brd.create('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});
var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});
var p1 = brd.create('point',[4,0],{strokeColor:'black',fillColor:'white',name:''});
var rot = brd.create('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'}); // angle, rotation center
var ptmp = brd.create('point',[0,0],{visible:false,withLabel:false}); // dummy point for the rotation
var cOut = brd.create('curve',[[0],[0]],{fillColor:'#5e9abf',highlightFillColor:'#5e9abf',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});
var circ = brd.create('circle',[p0,p1],{fillColor:'#fefd4c',highlightFillColor:'#fefd4c',fillOpacity:0.5,highlightFillOpacity:0.5,strokeColor:'black',highlightStrokeColor:'black'});
var cIn = brd.create('curve',[[0,1,2],[0,1,2]],{fillColor:'#d769a3',highlightFillColor:'#d769a3',fillOpacity:1,highlightFillOpacity:1,strokeColor:'black',highlightStrokeColor:'black'});
var tCirc = brd.create('text',[-5,-4.0,function(){
return 'Area of the circle = ' + (0.0625*circ.getRadius()*circ.getRadius()*Math.PI).toFixed(5);
}],{fontSize:20});
var tIn = brd.create('text',[-5,-4.5,function(){
return 'Area of the inscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625*n.Value()*circ.getRadius()*circ.getRadius()*Math.sin(Math.PI/n.Value())).toFixed(5);
}],{fontSize:20});
var tOut = brd.create('text',[-5,-5,function(){
return 'Area of the circumscribed ' +n.Value().toFixed(0)+ '-polygon = ' + (0.0625*n.Value()*circ.getRadius()*circ.getRadius()*Math.tan(Math.PI/n.Value())).toFixed(5);
}],{fontSize:20});
cIn.updateDataArray = function() {
var i, len = n.Value();
this.dataX = [p0.X()+circ.getRadius()];
this.dataY = [p0.Y()];
ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+circ.getRadius(), p0.Y()]);
for (i=0;i<len;i++) {
rot.applyOnce(ptmp);
this.dataX.push(ptmp.X());
this.dataY.push(ptmp.Y());
}
}
cOut.updateDataArray = function() {
var i, len = n.Value();
var s = circ.getRadius()/Math.cos(Math.PI/n.Value());
this.dataX = [p0.X()+s];
this.dataY = [p0.Y()];
ptmp.setPositionDirectly(JXG.COORDS_BY_USER, [p0.X()+s,p0.Y()]);
for (i=0;i<len;i++) {
rot.applyOnce(ptmp);
this.dataX.push(ptmp.X());
this.dataY.push(ptmp.Y());
}
}
brd.update();