Your first simulation

CineCode's superpower is the living diagram: an algorithm that runs on screen, in sync with the code that describes it. In this lesson you'll add a procedurally generated terrain and link it to a line of code.

Step 1 — Add a simulation

Simulations are scene elements, just like text and code. Create a new scene scenes/terrain.ccs:

let s = scene("Generating Terrain", sec(6));

s.text("Procedural terrain", 96, 64).font_size(48).fade_in(0, ms(533));

// A terrain heightmap, positioned on the right half of the frame
let t = s.terrain(680, 160, 500, 400);
t.seed(7).frequency(3.0).octaves(4).cells(48, 32).mode("heightmap");

// Reveal it growing in, starting after the first third of a second
t.reveal(ms(333), sec(1.67));

Then register the scene in your manifest:

scenes = ["scenes/intro.ccs", "scenes/terrain.ccs"]

Render and you'll see the terrain build itself:

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 = 18

Expand Files that made this video under the clip. The important pair is scenes/terrain.ccs and src/terrain.rs: the scene script places and animates the terrain, while the Rust file is the code shown beside it.

Step 2 — Show the code beside it

A diagram is more powerful next to the code that produces it. Add a code block on the left:

let code = s.code(read("src/terrain.rs"), "rust", 96, 160);
code.font_size(34).fade_in(0, ms(467)).typewriter(ms(200), sec(2.33));

let t = s.terrain(680, 160, 500, 400);
t.seed(7).frequency(3.0).octaves(4).cells(48, 32).mode("heightmap");
t.reveal(sec(2.67), sec(1.33));

Step 3 — Bind code to the simulation

Now the magic. s.link(code, line, sim, start, dur) ties a line of code to the simulation, so when that line is active the diagram responds:

// When line 4 (the noise call) is reached, drive the terrain
s.link(code, 4, t, sec(3), sec(2));

This is the same mechanism the example uses across all six simulation types:

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 = 18

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 = 18

Step 4 — Try the other simulations

Every simulation is configured the same way — create it, set parameters with a fluent chain, then reveal or run it. Swap s.terrain(...) for any of:

• s.pathfind(...) — A* search on a grid
• s.particles(...) — particle streams
• s.graph(...) — graph traversal (BFS/DFS)
• s.life(...) — Conway's Game of Life
• s.boids(...) — flocking

Each video on this page includes the scene script and source file that produced it. Once you can read those files, use the Simulations reference as a dictionary for extra parameters.

You did it

You have a living diagram bound to its code. Next, you'll combine everything into a polished, multi-scene documentary.