Difference between revisions of "Arc length"

From JSXGraph Wiki
Jump to navigationJump to search
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<jsxgraph width="800" height="400" box="box">
 
<jsxgraph width="800" height="400" box="box">
var brd = JXG.JSXGraph.initBoard('box', {axis:true, originX: 400, originY: 300, grid:true, unitX: 50, unitY: 50});
+
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 6, 8, -2]});
var n = brd.createElement('slider',[[1,3],[5,3],[1,10,50]],{name:'n'});
+
var n = brd.create('slider',[[1,3],[6,3],[1,10,70]],{name:'n',snapWidth:1});
 
var f = function(x){ return 0.2*x*x+2.0*Math.sin(x); }
 
var f = function(x){ return 0.2*x*x+2.0*Math.sin(x); }
var plot = brd.createElement('functiongraph',[f]);
+
var plot = brd.create('functiongraph',[f], {strokeWidth:1,strokeOpacity:0.3});
 
var start = -3.0;
 
var start = -3.0;
 
var end = 5.0;
 
var end = 5.0;
var sc = brd.createElement('curve',[[0],[0]]);
+
var sc = brd.create('curve',[[0],[0]],{dash:1,strokeWidth:1,strokeColor:'red'});
 
sc.updateDataArray = function() {
 
sc.updateDataArray = function() {
 
   var i;
 
   var i;
 
   var m = n.Value();
 
   var m = n.Value();
  m = Math.floor(m);
 
 
   var d = (end-start)/m;
 
   var d = (end-start)/m;
 
   this.dataX = [];
 
   this.dataX = [];
Line 23: Line 22:
 
   }   
 
   }   
 
}
 
}
var approx = brd.createElement('curve',[[0],[0]], {strokeColor:'red'});
+
var approx = brd.create('curve',[[0],[0]], {strokeColor:'red'});
 
approx.updateDataArray = function() {
 
approx.updateDataArray = function() {
 
   var i;
 
   var i;
 
   var m = n.Value();
 
   var m = n.Value();
  m = Math.floor(m);
 
 
   var d = (end-start)/m;
 
   var d = (end-start)/m;
 
   this.dataX = [];
 
   this.dataX = [];
Line 39: Line 37:
 
}
 
}
  
 
+
brd.create('text',[-6,-1,function(){  
 
+
  var i,s,f0,f1;
brd.createElement('text',[-6,-1,function(){ return 'Length='; }]);
+
  var m = n.Value();
 +
  var d = (end-start)/m;
 +
  s = 0.0;
 +
  f0 = f(start);
 +
  for (i=1;i<=m;i++) {
 +
    f1 = f(start+i*d);
 +
    s += Math.sqrt(d*d+(f1-f0)*(f1-f0));
 +
    f0 = f1;
 +
  } 
 +
  return 'Length='+s.toFixed(4); }]);
 +
brd.update(); 
 
</jsxgraph>
 
</jsxgraph>
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
<source lang="xml">
+
<source lang="javascript">
 +
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 6, 8, -2]});
 +
var n = brd.create('slider',[[1,3],[6,3],[1,10,70]],{name:'n',snapWidth:1});
 +
var f = function(x){ return 0.2*x*x+2.0*Math.sin(x); }
 +
var plot = brd.create('functiongraph',[f], {strokeWidth:1,strokeOpacity:0.3});
 +
var start = -3.0;
 +
var end = 5.0;
 +
var sc = brd.create('curve',[[0],[0]],{dash:1,strokeWidth:1,strokeColor:'red'});
 +
sc.updateDataArray = function() {
 +
  var i;
 +
  var m = n.Value();
 +
  var d = (end-start)/m;
 +
  this.dataX = [];
 +
  this.dataY = [];
 +
  this.dataX[0] = start; 
 +
  this.dataY[0] = f(start); 
 +
  for (i=1;i<=m;i++) {
 +
    this.dataX.push(start+i*d); 
 +
    this.dataY.push(f(start+(i-1)*d)); 
 +
    this.dataX.push(start+i*d); 
 +
    this.dataY.push(f(start+i*d)); 
 +
  } 
 +
}
 +
var approx = brd.create('curve',[[0],[0]], {strokeColor:'red'});
 +
approx.updateDataArray = function() {
 +
  var i;
 +
  var m = n.Value();
 +
  var d = (end-start)/m;
 +
  this.dataX = [];
 +
  this.dataY = [];
 +
  this.dataX[0] = start; 
 +
  this.dataY[0] = f(start); 
 +
  for (i=1;i<=m;i++) {
 +
    this.dataX.push(start+i*d); 
 +
    this.dataY.push(f(start+i*d)); 
 +
  } 
 +
}
 +
 
 +
brd.create('text',[-6,-1,function(){
 +
  var i,s,f0,f1;
 +
  var m = n.Value();
 +
  var d = (end-start)/m;
 +
  s = 0.0;
 +
  f0 = f(start);
 +
  for (i=1;i<=m;i++) {
 +
    f1 = f(start+i*d);
 +
    s += Math.sqrt(d*d+(f1-f0)*(f1-f0));
 +
    f0 = f1;
 +
  } 
 +
  return 'Length='+s.toFixed(4); }]);
 +
brd.update(); 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Calculus]]
 
[[Category:Calculus]]

Latest revision as of 17:40, 14 January 2012

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 6, 8, -2]});
var n = brd.create('slider',[[1,3],[6,3],[1,10,70]],{name:'n',snapWidth:1});
var f = function(x){ return 0.2*x*x+2.0*Math.sin(x); }
var plot = brd.create('functiongraph',[f], {strokeWidth:1,strokeOpacity:0.3});
var start = -3.0;
var end = 5.0;
var sc = brd.create('curve',[[0],[0]],{dash:1,strokeWidth:1,strokeColor:'red'});
sc.updateDataArray = function() {
   var i;
   var m = n.Value();
   var d = (end-start)/m;
   this.dataX = [];
   this.dataY = [];
   this.dataX[0] = start;   
   this.dataY[0] = f(start);   
   for (i=1;i<=m;i++) {
     this.dataX.push(start+i*d);   
     this.dataY.push(f(start+(i-1)*d));   
     this.dataX.push(start+i*d);   
     this.dataY.push(f(start+i*d));   
   }  
}
var approx = brd.create('curve',[[0],[0]], {strokeColor:'red'});
approx.updateDataArray = function() {
   var i;
   var m = n.Value();
   var d = (end-start)/m;
   this.dataX = [];
   this.dataY = [];
   this.dataX[0] = start;   
   this.dataY[0] = f(start);   
   for (i=1;i<=m;i++) {
     this.dataX.push(start+i*d);   
     this.dataY.push(f(start+i*d));   
   }  
}

brd.create('text',[-6,-1,function(){ 
   var i,s,f0,f1;
   var m = n.Value();
   var d = (end-start)/m;
   s = 0.0;
   f0 = f(start);
   for (i=1;i<=m;i++) {
     f1 = f(start+i*d);
     s += Math.sqrt(d*d+(f1-f0)*(f1-f0));
     f0 = f1;
   }  
   return 'Length='+s.toFixed(4); }]);
brd.update();