# Shade region bounded by curves: Difference between revisions

From JSXGraph Wiki

A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||

(7 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> | ||

Line 8: | Line 8: | ||

\end{eqnarray*} | \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 14:07, 18 June 2020

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();
```