Difference between revisions of "Circle approximation"

From JSXGraph Wiki
Jump to navigationJump to search
 
(65 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', {axis:true, originX: 300, originY: 300, grid:true, unitX: 50, unitY: 50});
+
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 6, 6, -6], grid: true});
var n = brd.createElement('slider',[[0,3],[3,3],[3,4,20]],{name:'n',snapWidth:1});
+
var n = brd.create('slider',[[-5,5],[4.5,5],[3,4,96]],{name:'n',snapWidth:1});
  
var p0 = brd.createElement('point',[0,0]);
+
var p0 = brd.create('point',[0,0],{strokeColor:'black',fillColor:'white',name:''});
var p1 = brd.createElement('point',[2,0]);
+
var p1 = brd.create('point',[4,0],{strokeColor:'black',fillColor:'white',name:''});
var circ = brd.createElement('circle',[p0,p1]);
+
var rot = brd.create('transform', [function() {return Math.PI*2.0/n.Value();},p0], {type:'rotate'});  // angle, rotation center
var rot = brd.createElement('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 ptmp = brd.createElement('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 c = brd.createElement('curve',[[],[]],{fillColor:'#ff3300',opacity:0.5}));
+
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'});
  
c.updateDataArray = function() {
+
var tCirc = brd.create('text',[-5,-4.0,function(){
   var i;
+
    return 'Area of the circle = ' + (0.0625*circ.getRadius()*circ.getRadius()*Math.PI).toFixed(5);
   this.dataX = [p1.X()];
+
  }],{fontSize:20});
   this.dataY = [p1.Y()];
+
var tIn = brd.create('text',[-5,-4.5,function(){
   ptmp.setPositionDirectly(JXG.COORDS_BY_USER,p1.X(),p1.Y());
+
    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);
   for (i=0;i<n.Value();i++) {
+
  }],{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);
 
     rot.applyOnce(ptmp);
 
     this.dataX.push(ptmp.X());
 
     this.dataX.push(ptmp.X());
Line 21: Line 32:
 
   }
 
   }
 
}
 
}
 +
 +
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();
 
brd.update();
  
 
</jsxgraph>
 
</jsxgraph>
  
===The underlying JavaScript code===
+
===The JavaScript code===
<source lang="xml">
+
<source lang="javascript">
 +
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();
 +
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Geometry]]
 
[[Category:Calculus]]
 
[[Category:Calculus]]

Latest revision as of 15: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();