Difference between revisions of "Shade region bounded by curves"

From JSXGraph Wiki
Jump to navigationJump to search
(Created page with "Somewhere in the WWW the question was asked how to shade the region bounded by the following curves: :<math> x \mapsto \sqrt(x^2-1) </math>")
 
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
Somewhere in the WWW the question was asked how to shade the region bounded by the following curves:
+
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>
 
:<math>
x \mapsto \sqrt(x^2-1)
+
\begin{eqnarray*}
 +
x & \mapsto & \sqrt{x^2-1} \\
 +
x & \mapsto & 0.707 x \\
 +
x & \mapsto & 0 \\
 +
\end{eqnarray*}
 
</math>
 
</math>
 +
 +
Here is the solution:
 +
 +
<jsxgraph width="400" height="400" box='jxgbox'>
 +
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();
 +
</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();