<regionBetweenCurves>

<regionBetweenCurves> is a Graphical component that renders a shaded region on a graph between a specified function and the $x$-axis.

Attributes and Properties

Example: Render shading between two functions

The <regionBetweenCurves> component shades in the region between two functions $f$ and $g$ over a specified interval.

Attribute Example: flipFunctions

The flipFunctions attribute reflects the functions considered for the shading of the region about the line $y=x$. The original functions remain unchanged.

Note: In order to render the reference function as “flipped”, you must use the <curve> component with the flipFunction attribute, as shown in the second graph.

Attribute Example: boundaryValues

<slider name="upperLimit" from="-2pi" to="2pi" step="pi/8"/>
 
<graph size="small" xmin="-2pi" xmax="2pi" ymin="-2" ymax="2" xTickScaleFactor="pi">
  <function name="f" variable="t">sin(t)</function>
  <function name="g" variable="t">-sin(t)</function>
  <regionBetweenCurves 
    name="shadedRegion"
    boundaryValues="-2pi $upperLimit">
    $f $g
  </regionBetweenCurves>
</graph>     
 
<p><c>boundaryValues</c> = $shadedRegion.boundaryValues</p>

The boundaryValues attribute accepts a list of $x$-values or numerical references that define the endpoints of the shaded interval.

Attribute Example: styleNumber

The <regionBetweenCurves> component accepts the styleNumber attribute. Default styleNumbers range from $1$ to $6$.

Property Example: styleDescription/ styleDescriptionWithNoun

Since users can override styles and so may see different colors and line styles, don’t directly refer to the colors and line styles you create. Instead, use the properties styleDescription and styleDescriptionWithNoun. With those properties, the text will change to match the displayed styles.