Circle approximation: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 11: | Line 11: | ||
var cIn = brd.createElement('curve',[[],[]],{fillColor:'#ff3300',highlightFillColor:'#ff3300',fillOpacity:0.5,highlightFillOpacity:0.5}); | var cIn = brd.createElement('curve',[[],[]],{fillColor:'#ff3300',highlightFillColor:'#ff3300',fillOpacity:0.5,highlightFillOpacity:0.5}); | ||
var tCirc = brd.createElement('text',[-5,-4.0,function(){ | |||
return 'Area of the circle = ' + (circ.getRadius()*circ.getRadius()*Math.PI).toFixed(4); | |||
}],{fontSize:'20px'}); | |||
var tIn = brd.createElement('text',[-5,-4.5,function(){ | var tIn = brd.createElement('text',[-5,-4.5,function(){ | ||
return 'Area of the inscribed polygon = ' + (0.5*circ.getRadius()*circ.getRadius()*Math.cos(Math.PI/n.Value())).toFixed(4); | return 'Area of the inscribed polygon = ' + (0.5*circ.getRadius()*circ.getRadius()*Math.cos(Math.PI/n.Value())).toFixed(4); | ||
Line 60: | Line 63: | ||
var cIn = brd.createElement('curve',[[],[]],{fillColor:'#ff3300',highlightFillColor:'#ff3300',fillOpacity:0.5,highlightFillOpacity:0.5}); | var cIn = brd.createElement('curve',[[],[]],{fillColor:'#ff3300',highlightFillColor:'#ff3300',fillOpacity:0.5,highlightFillOpacity:0.5}); | ||
var tCirc = brd.createElement('text',[-5,-4.0,function(){ | |||
return 'Area of the circle = ' + (circ.getRadius()*circ.getRadius()*Math.PI).toFixed(4); | |||
}],{fontSize:'20px'}); | |||
var tIn = brd.createElement('text',[-5,-4.5,function(){ | var tIn = brd.createElement('text',[-5,-4.5,function(){ | ||
return 'Area of the inscribed polygon = ' + (0.5*circ.getRadius()*circ.getRadius()*Math.cos(Math.PI/n.Value())).toFixed(4); | return 'Area of the inscribed polygon = ' + (0.5*circ.getRadius()*circ.getRadius()*Math.cos(Math.PI/n.Value())).toFixed(4); |
Revision as of 09:59, 24 June 2009
The underlying JavaScript code
var brd = JXG.JSXGraph.initBoard('box', {axis:true, originX: 300, originY: 300, grid:true, unitX: 50, unitY: 50});
var n = brd.createElement('slider',[[0,5],[3,5],[3,4,20]],{name:'n',snapWidth:1});
var p0 = brd.createElement('point',[0,0]);
var p1 = brd.createElement('point',[4,0]);
var circ = brd.createElement('circle',[p0,p1]);
var rot = brd.createElement('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'}); // angle, rotation center
var ptmp = brd.createElement('point',[0,0],{visible:false,withLabel:false}); // dummy point for the rotation
var cOut = brd.createElement('curve',[[],[]],{fillColor:'#0033ff',highlightFillColor:'#0033ff',fillOpacity:0.5,highlightFillOpacity:0.5});
var cIn = brd.createElement('curve',[[],[]],{fillColor:'#ff3300',highlightFillColor:'#ff3300',fillOpacity:0.5,highlightFillOpacity:0.5});
var tCirc = brd.createElement('text',[-5,-4.0,function(){
return 'Area of the circle = ' + (circ.getRadius()*circ.getRadius()*Math.PI).toFixed(4);
}],{fontSize:'20px'});
var tIn = brd.createElement('text',[-5,-4.5,function(){
return 'Area of the inscribed polygon = ' + (0.5*circ.getRadius()*circ.getRadius()*Math.cos(Math.PI/n.Value())).toFixed(4);
}],{fontSize:'20px'});
var tOut = brd.createElement('text',[-5,-5,function(){
return 'Area of the circumscribed polygon = ' + (0.5*circ.getRadius()*circ.getRadius()/Math.cos(Math.PI/n.Value())).toFixed(4);
}],{fontSize:'20px'});
cIn.updateDataArray = function() {
var i;
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<n.Value();i++) {
rot.applyOnce(ptmp);
this.dataX.push(ptmp.X());
this.dataY.push(ptmp.Y());
}
}
cOut.updateDataArray = function() {
var i;
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<n.Value();i++) {
rot.applyOnce(ptmp);
this.dataX.push(ptmp.X());
this.dataY.push(ptmp.Y());
}
}
brd.update();