Shade region bounded by curves

From JSXGraph Wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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

[math]\displaystyle{ \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();