# Difference between revisions of "Shade region bounded by curves"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) (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>") |
A WASSERMANN (talk | contribs) |
||

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