# Circulation

> Circulation draws double circulation: the four chambers of the heart, with the lungs above and the body below.

Page: https://fframes-kit.pages.dev/docs/biology/circulation/
Cargo feature: `biology` (`fframes-kit = { version = "..", features = ["biology"] }`)

`Circulation` draws double circulation: the four chambers of the heart, with the lungs above
and the body below. The right side of the heart sits on the viewer's left, as in a textbook.

- **Path:** the vessels follow the blood. It leaves the right ventricle, goes up the
  pulmonary artery to the lungs, back down the pulmonary vein to the left atrium, through the
  left ventricle, then along the aorta to the body and up the vena cava to the right atrium.
  The vena cava passes over the pulmonary artery with a gap of `gap_color`.
- **Colour:** each vessel is coloured by the blood in it, from `deoxygenated` to
  `oxygenated`. The blood turns red across the lungs and blue across the body.
- **Motion:** from `delay` the chambers appear and the vessels draw along the loop. Each name
  fades in as the line reaches it. Then blood cells run round at `speed` pixels a second,
  passing under the chambers, and the heart beats `bpm` times a minute, atria first.
- **Labels:** with `labels`, the lungs, the body and the four vessels are named.

Gallery scene: `Circulation`.

Gallery clip of `Circulation`: https://fframes-kit.pages.dev/media/scenes/Circulation-f1b6b45f.mp4

```rust
use fframes_kit::prelude::*;

fn heart<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    ui.show(Circulation {
        delay: 0.5,
        bpm: 90.0,      // a faster beat
        labels: false,  // only the chambers' names
        ..ui.defaults()
    })
}
```

## 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`).

### Circulation

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `delay` | `f32` | `0.0` | Seconds after the container's start before the chambers appear and the vessels begin to draw. |
| `center` | `(f64, f64)` | `(0.0, -0.15)` | The middle of the heart, in units of `ui.space`. |
| `scale` | `f64` | `1.0` | Size factor on the figure; `1.0` is about 860 by 820 pixels. |
| `speed` | `f32` | `260.0` | Speed of the blood cells along the loop, in pixels per second. |
| `bpm` | `f32` | `70.0` | Heartbeats per minute; the atria contract first, then the ventricles. |
| `labels` | `bool` | `true` | Names the lungs, the body and the vessels when `true`. |
| `oxygenated` | `Color` | `Color::hex("#ff6b6b")` | Colour of oxygen-rich blood (left side, aorta, pulmonary vein). |
| `deoxygenated` | `Color` | `Color::hex("#4dabf7")` | Colour of oxygen-poor blood (right side, vena cava, pulmonary artery). |
| `chamber_color` | `Color` | `Color::hex("#2a1c2e")` | Fill of the four heart chambers. |
| `bed_color` | `Color` | `Color::hex("#1b2735")` | Fill of the capillary beds in the lungs and the body. |
| `gap_color` | `Color` | `theme.colors.background` | Colour of the gap cut into a vessel where another crosses it; match the background. |
| `label_style` | `TextStyle` | `theme.typography.caption` | The font of the lung, body and vessel names: family, size in pixels and weight. |
| `chamber_style` | `TextStyle` | `chamber_style` | The font of the chamber names (`RA`, `RV`, `LA`, `LV`): family, size in pixels and weight. |
| `text_color` | `Color` | `theme.colors.text` | Colour of all the text. |
| `enter` | `Option<FadeIn>` | `None` | Fade in at the start; `None` for none. |
| `exit` | `Option<FadeOut>` | `None` | Fade out before the end; `None` for none. |

Feature `biology` · [Source](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/biology/circulation.rs#L118)