How-to Guides
Bind code to simulations
Link a line of code to a running diagram with s.link() so they animate together.
Goal
Make a diagram respond to the code beside it — when a line is reached, its simulation comes alive.
The link primitive
s.link(code, line, sim, start, dur);code— a node froms.code(...)line— the 1-based line that drives the simulationsim— a simulation node (s.terrain(...),s.pathfind(...), …)start,dur— when the linked animation plays, as frames or helpers such assec(3)/ms(900)
A worked example
Show a pathfinding algorithm next to its code, and drive the search from the line that calls it:
let s = scene("A* Pathfinding", sec(7.33));
let code = s.code(read("src/astar.rs"), "rust", 96, 160);
code.font_size(30).fade_in(0, ms(400)).typewriter(ms(200), ms(2667));
let grid = s.pathfind(700, 150, 440, 420);
grid.seed(11).cells(24, 18).wall_density(0.28);
// When line 9 (the search call) is reached, run the search beside it
s.link(code, 9, grid, sec(3.33), sec(3));Files that made this video
An A* grid simulation bound to the loop that explores neighbors.
codescene.toml
Project manifest: output size, theme, scene order, transitions, and shader names.
scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"
[episode]
title = "How Rivers Form"
[output]
fps = 30
width = 1280
height = 720
[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"
[transition]
kind = "crossfade"
frames = 18The clip is not a black box: expand Files that made this video to see the
exact scenes/pathfind.ccs script and src/astar.rs source file. Copy those
first, then change one parameter at a time.
Works with every simulation
The same pattern drives all six simulation types. Just create the simulation, configure it, and link the relevant line:
Files that made this video
A terrain simulation bound to the line of code that computes a height value.
codescene.toml
Project manifest: output size, theme, scene order, transitions, and shader names.
scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"
[episode]
title = "How Rivers Form"
[output]
fps = 30
width = 1280
height = 720
[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"
[transition]
kind = "crossfade"
frames = 18Files that made this video
A particle stream showing packets moving from code to server.
codescene.toml
Project manifest: output size, theme, scene order, transitions, and shader names.
scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"
[episode]
title = "How Rivers Form"
[output]
fps = 30
width = 1280
height = 720
[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"
[transition]
kind = "crossfade"
frames = 18Files that made this video
A breadth-first traversal spreading across a graph.
codescene.toml
Project manifest: output size, theme, scene order, transitions, and shader names.
scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"
[episode]
title = "How Rivers Form"
[output]
fps = 30
width = 1280
height = 720
[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"
[transition]
kind = "crossfade"
frames = 18Files that made this video
Conway's Game of Life bound to the neighbor-counting logic.
codescene.toml
Project manifest: output size, theme, scene order, transitions, and shader names.
scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"
[episode]
title = "How Rivers Form"
[output]
fps = 30
width = 1280
height = 720
[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"
[transition]
kind = "crossfade"
frames = 18Tips
- Link the call site, not the definition — the line a viewer reads as “this is where it runs.”
- Match
start/durto your narration so the diagram peaks as you explain it. - Use a spotlight on the same line so code and diagram are obviously connected.
Reference
Use the source bundles above when learning the pattern. Use Simulations reference afterward for the complete parameter list and color legends.