Difference between revisions of "Shade region bounded by curves"

From JSXGraph Wiki
Jump to navigationJump to search
 
Line 9: Line 9:
 
</math>
 
</math>
  
Here it is:
+
Here is the solution:
  
 
<jsxgraph width="400" height="400" box='jxgbox'>
 
<jsxgraph width="400" height="400" box='jxgbox'>
Line 31: Line 31:
 
curve.updateDataArray = function() {
 
curve.updateDataArray = function() {
 
   // Start with (0, 0)
 
   // Start with (0, 0)
this.dataX = [0];
+
  this.dataX = [0];
 
   this.dataY = [0];
 
   this.dataY = [0];
 
    
 
    
Line 44: Line 44:
 
board.update();
 
board.update();
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="javascript">
 +
const board = JXG.JSXGraph.initBoard('jxgbox', {
 +
    boundingbox: [-1, 2, 2, -1], axis:true
 +
});
 +
 +
// 1. step: compute intersection of 'sqrt(x^2-1)' and '0.707*x'
 +
var diff = x => Math.sqrt(x * x - 1) -  0.707 * x;
 +
var x_intersect = JXG.Math.Numerics.root(diff, 1.5);
 +
 +
// 2. step: plot curves only up to the mutual intersections
 +
// We use JessieCode for the function terms
 +
var curve1 = board.create('functiongraph', ['0', 0, 1]);
 +
var curve2 = board.create('functiongraph', ['sqrt(x^2-1)', 1, x_intersect]);
 +
var curve3 = board.create('functiongraph', ['0.707*x', 0, x_intersect]);
 +
 +
// 3. step: plot a filled curve which starts at (0,0), contains all points of 'sqrt(x^2-1)'
 +
// and is closed by adding (0,0) at the end.
 +
var curve = board.create('curve', [[], []], {strokeWidth:3, fillColor:'yellow', fillOpacity: 0.3});
 +
curve.updateDataArray = function() {
 +
  // Start with (0, 0)
 +
  this.dataX = [0];
 +
  this.dataY = [0];
 +
 
 +
  // Copy all points from curve2
 +
  this.dataX = this.dataX.concat( curve2.points.map( p => p.usrCoords[1] ) );
 +
  this.dataY = this.dataY.concat( curve2.points.map( p => p.usrCoords[2] ) );
 +
 
 +
  // Close the curve by adding (0,0)
 +
  this.dataX.push(0);
 +
  this.dataY.push(0);
 +
};
 +
board.update();
 +
</source>
 +
 +
[[Category:Examples]]
 +
[[Category:Calculus]]
 +
[[Category:Curves]]

Latest revision as of 16:07, 18 June 2020

Somewhere in the WWW the question was asked how to shade the region bounded by the following curves, where [math]x\ge 0[/math]:

[math] \begin{eqnarray*} x & \mapsto & \sqrt{x^2-1} \\ x & \mapsto & 0.707 x \\ x & \mapsto & 0 \\ \end{eqnarray*} [/math]

Here is the solution:

The underlying JavaScript code

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-1, 2, 2, -1], axis:true
});

// 1. step: compute intersection of 'sqrt(x^2-1)' and '0.707*x'
var diff = x => Math.sqrt(x * x - 1) -  0.707 * x;
var x_intersect = JXG.Math.Numerics.root(diff, 1.5);

// 2. step: plot curves only up to the mutual intersections
// We use JessieCode for the function terms
var curve1 = board.create('functiongraph', ['0', 0, 1]);
var curve2 = board.create('functiongraph', ['sqrt(x^2-1)', 1, x_intersect]);
var curve3 = board.create('functiongraph', ['0.707*x', 0, x_intersect]);

// 3. step: plot a filled curve which starts at (0,0), contains all points of 'sqrt(x^2-1)'
// and is closed by adding (0,0) at the end.
var curve = board.create('curve', [[], []], {strokeWidth:3, fillColor:'yellow', fillOpacity: 0.3});
curve.updateDataArray = function() {
  // Start with (0, 0)
  this.dataX = [0];
  this.dataY = [0];
  
   // Copy all points from curve2
  this.dataX = this.dataX.concat( curve2.points.map( p => p.usrCoords[1] ) );
  this.dataY = this.dataY.concat( curve2.points.map( p => p.usrCoords[2] ) );
  
  // Close the curve by adding (0,0)
  this.dataX.push(0);
  this.dataY.push(0);
};
board.update();