# StatesOfMatter

> Particles in a box going from from to to (MatterState::Solid, Liquid or Gas) over duration seconds after at:

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

Particles in a box going from `from` to `to` (`MatterState::Solid`, `Liquid` or `Gas`) over
`duration` seconds after `at`:

- in a solid they vibrate on a lattice at the bottom;
- in a liquid they spread over the floor and wander past each other;
- in a gas they fly across the whole box and bounce off its walls.

Between two states the motions blend and the particles turn from `cold_color` to `hot_color`.
The positions are a function of the time and `seed` only, not a stepped simulation, so any
frame renders on its own and comes out the same everywhere. `positions(seconds)` gives them.
With `labels` the state, or the change under way ("melting", "boiling", "condensing",
"freezing"), is written under the box. Gallery scene: `StatesOfMatter` (solid to gas).

Gallery clip of `StatesOfMatter`: https://fframes-kit.pages.dev/media/scenes/StatesOfMatter-6246045e.mp4

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

fn figure<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    ui.show(StatesOfMatter {
        seed: 3,
        from: MatterState::Gas,
        to: MatterState::Solid,
        at: 1.0,
        duration: 4.0,
        ..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`).

### StatesOfMatter

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `seed` | `u64` | `1` | Seed of the particles' motion; the same seed gives the same picture on every frame and machine. |
| `columns` | `usize` | `8` | Particles per row of the starting lattice. |
| `rows` | `usize` | `4` | Rows of particles in the starting lattice. |
| `from` | `MatterState` | `MatterState::Solid` | State the particles start in. |
| `to` | `MatterState` | `MatterState::Gas` | State the particles end in. |
| `at` | `f32` | `1.0` | Seconds after the container's start when the change begins. |
| `duration` | `f32` | `4.0` | Seconds the change from `from` to `to` takes. |
| `center` | `(f64, f64)` | `(0.0, 0.0)` | The middle of the box, in units of `ui.space`. |
| `width` | `f32` | `760.0` | Width of the box in pixels. |
| `height` | `f32` | `520.0` | Height of the box in pixels. |
| `radius` | `f32` | `18.0` | Radius of a particle in pixels. |
| `labels` | `bool` | `true` | Writes the state, or the change under way, under the box; `false` for none. |
| `box_color` | `Color` | `theme.colors.muted` | Colour of the box outline. |
| `cold_color` | `Color` | `Color::hex("#4dabf7")` | Colour of the particles in a solid; they blend to `hot_color` as the state warms. |
| `hot_color` | `Color` | `Color::hex("#ff6b6b")` | Colour of the particles in a gas. |
| `text_color` | `Color` | `theme.colors.text` | Colour of the state label. |
| `stroke_width` | `f32` | `theme.stroke.regular` | Width in pixels of the box outline. |
| `enter` | `Option<EnterAnim>` | `None` | How the box draws; `None` shows it from the start. |
| `exit` | `Option<ExitAnim>` | `None` | How the box leaves at the end of the container; `None` stays. |
| `parts_enter` | `Option<FadeIn>` | `None` | Fade in of the particles and the label; `None` for none. |
| `parts_exit` | `Option<FadeOut>` | `None` | Fade out of the particles and the label before the end; `None` for none. |

Methods:

- `fn level(&self, seconds: f32) -> f64`: The particles' level at `seconds`: 0 a solid, 1 a liquid, 2 a gas.
- `fn positions(&self, seconds: f32) -> Vec<Vec2>`: The particles' centres at `seconds`, from the box's middle in pixels (y down).

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