# RiemannSum and AreaUnder
> RiemannSum draws Riemann rectangles with each width of dxs in turn, cross-fading from one to the next, and can write the sum.
Page: https://fframes-kit.pages.dev/docs/math/riemann-sum-and-area-under/
Cargo feature: `math` (`fframes-kit = { version = "..", features = ["math"] }`)
`RiemannSum` draws Riemann rectangles with each width of `dxs` in turn, cross-fading from
one to the next, and can write the sum. `AreaUnder` reveals the area under a graph from
left to right and writes the integral of the part shown so far. Build their `rects` and
`area` with `axes.riemann_rectangles` and `axes.area`. `integral(f, g, a, b, n)` is the
trapezoid rule they use. Gallery scenes: `RiemannSum`, `AreaUnder`, `Area`, `RiemannRectangles`.
Gallery clip of `RiemannSum`: https://fframes-kit.pages.dev/media/scenes/RiemannSum-4d8aa677.mp4
Gallery clip of `AreaUnder`: https://fframes-kit.pages.dev/media/scenes/AreaUnder-941ff31b.mp4
Gallery clip of `Area`: https://fframes-kit.pages.dev/media/scenes/Area-7c7c71b7.mp4
Gallery clip of `RiemannRectangles`: https://fframes-kit.pages.dev/media/scenes/RiemannRectangles-69f74c8e.mp4
```rust
use fframes_kit::prelude::*;
fn figure<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
let axes = Axes {
x_range: Range::new(0.0, 3.0, 1.0),
y_range: Range::new(0.0, 4.0, 1.0),
..ui.defaults()
};
let f = |x: f64| 0.4 * x * x;
let rects = RiemannRectangles { ..axes.riemann_rectangles(ui, f, (0.0, 2.0), 0.5) };
let region = Area { ..axes.area(ui, f, (2.0, 3.0)) };
let sum = ui.show(RiemannSum {
rects,
dxs: vec![0.5, 0.25, 0.1, 0.05],
sum: Some(Label { text: "sum = ".into(), x: 1400.0, y: 300.0, ..ui.defaults() }),
..ui.defaults()
});
let area = ui.show(AreaUnder {
area: region,
delay: 1.0,
value: Some(Label { text: "area = ".into(), x: 1400.0, y: 360.0, ..ui.defaults() }),
..ui.defaults()
});
let graph = ui.show(axes.plot(ui, f));
let axes = ui.show(axes);
svgr!({axes}{sum}{area}{graph})
}
// the integral of 0.4 x² from 0 to 3 is 0.4 * 27 / 3
let area = fframes_kit::kits::math::integral(|x| 0.4 * x * x, None, 0.0, 3.0, 256);
assert!((area - 3.6).abs() < 1e-3);
```
`Area` and `RiemannRectangles` also draw directly, without the animated wrappers:
```rust
use fframes_kit::prelude::*;
fn figure<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
let axes = Axes {
x_range: Range::new(0.0, 3.0, 1.0),
y_range: Range::new(0.0, 4.0, 1.0),
..ui.defaults()
};
let f = |x: f64| 0.4 * x * x;
let rects = ui.show(axes.riemann_rectangles(ui, f, (0.0, 2.0), 0.5));
let area = ui.show(axes.area(ui, f, (2.0, 3.0)));
let graph = ui.show(axes.plot(ui, f));
let axes = ui.show(axes);
svgr!({axes}{rects}{area}{graph})
}
```
## API
Components are plain structs. Set the fields you need and fill the rest with `..ui.defaults()`: the defaults below come from the current theme (`theme.` values are fields of `Theme`).
### RiemannSum
Riemann rectangles that get finer: `rects` is drawn with each width of `dxs` in turn, `hold` seconds each, cross-fading to the next over `crossfade` seconds, from `delay`. `sum` writes the Riemann sum after its text with `decimals`, fading with the rectangles. Build `rects` with `Axes::riemann_rectangles`.
| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `rects` | `RiemannRectangles` | `RiemannRectangles::themed(theme)` | The rectangles, built with `Axes::riemann_rectangles`; their width is replaced by each of `dxs` in turn. |
| `dxs` | `Vec` | `vec![0.5, 0.25, 0.1]` | Rectangle widths, in the x units of the axes, shown one after the other (finer each time). |
| `delay` | `f32` | `0.0` | Seconds after the container's start before the first set of rectangles appears. |
| `hold` | `f32` | `1.0` | Seconds each set of rectangles stays before the next begins to replace it. |
| `crossfade` | `f32` | `theme.motion.duration.base` | Seconds one set takes to fade into the next. |
| `sum` | [`Option