# Computer science kit

> The computer science kit is the cs feature of fframes-kit (fframes-kit = { .., features = ["cs"] }).

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

The computer science kit is the `cs` feature of `fframes-kit`
(`fframes-kit = { .., features = ["cs"] }`). It brings one crate,
[`rust-sugiyama`](https://crates.io/crates/rust-sugiyama), for the layered graph layout of
`layout::layered`. It builds for wasm32, so every figure here also runs in the editor. Every
entry names its scene in the components gallery
(`cargo run --release -p components-gallery -- strip <Scene> -n 8`).

- **Recorded once.** An algorithm runs once, in a constructor or a `OnceLock`, and records
  its steps. The figures sample the steps by time (`delay`, then one step every `step_time`
  seconds), so nothing runs again per frame, and every frame is a pure function of the steps.
- **Placement.** A figure is placed in units of `ui.space` (Manim's frame: 8 units tall, `y`
  up, the origin in the middle). Its sizes are in pixels: cell sizes, gaps, bar areas.
- **No jumps.** A change of state blends over a fraction of the step: colours, the dimming of
  cells out of range, pointers sliding to their next cell and notes fading from one to the
  next.

- [Layouts](https://fframes-kit.pages.dev/docs/computer-science/layouts.md): Two layouts in fframes_kit::layout place the nodes of the tree and graph figures.
- [ArrayTrace](https://fframes-kit.pages.dev/docs/computer-science/array-trace.md): ArrayTrace holds the steps of an array algorithm.
- [ArrayView and BinarySearch](https://fframes-kit.pages.dev/docs/computer-science/array-view-and-binary-search.md): ArrayView draws a trace as a row of cells, cell pixels wide and gap apart, with the index under each cell.
- [SortVisualizer](https://fframes-kit.pages.dev/docs/computer-science/sort-visualizer.md): SortVisualizer draws a sort's trace as bars, width by height pixels, each as tall as its value.
- [ListTrace](https://fframes-kit.pages.dev/docs/computer-science/list-trace.md): ListTrace holds the steps of a linked list, a stack or a queue.
- [LinkedList, Stack and Queue](https://fframes-kit.pages.dev/docs/computer-science/linked-list-stack-and-queue.md): LinkedList draws a ListTrace as boxes with a value and a link cell, node by height pixels and gap apart.
- [VariableBox](https://fframes-kit.pages.dev/docs/computer-science/variable-box.md): VariableBox is manim-dsa's MVariable with a label: name above a box with the variable's value, width by height pixels, widening to fit a longer value.…
- [TreeTrace and TreeView](https://fframes-kit.pages.dev/docs/computer-science/tree-trace-and-tree-view.md): TreeTrace holds the steps of a binary tree.
- [Graph, GraphTrace and GraphView](https://fframes-kit.pages.dev/docs/computer-science/graph-graph-trace-and-graph-view.md): Graph holds named nodes and edges, directed or not.
- [HashTrace and HashTable](https://fframes-kit.pages.dev/docs/computer-science/hash-trace-and-hash-table.md): HashTrace::record(buckets, &keys) starts a table with separate chaining: a key goes to bucket key mod buckets (Euclidean, so negative keys land in a…
- [Machine, MachineTrace and StateMachine](https://fframes-kit.pages.dev/docs/computer-science/machine-machine-trace-and-state-machine.md): Machine::new(&states, &transitions, start, &accepting) is a finite state machine.
- [CallTrace, CallStack and RecursionTree](https://fframes-kit.pages.dev/docs/computer-science/call-trace-call-stack-and-recursion-tree.md): CallTrace records a recursion: every call and every return takes a step.
- [ComplexityPlot](https://fframes-kit.pages.dev/docs/computer-science/complexity-plot.md): ComplexityPlot races growth rates on the same axes. n sweeps along n_range in duration seconds from delay, and each Growth in growths grows with it, a…
- [CodeBlock](https://fframes-kit.pages.dev/docs/computer-science/code-block.md): CodeBlock shows source code on a panel in a monospaced style (JetBrains Mono by default, ship it in media/), with line numbers and colours from a small…
- [SequenceDiagram](https://fframes-kit.pages.dev/docs/computer-science/sequence-diagram.md): SequenceDiagram draws participants as boxes along the top, spacing pixels apart, with dashed lifelines below, and sends one of messages every step_time…