Reels: turn a sketch into a video

using DanaProcessing.Reels;   // opt in: hidden from the video

// @reel title: Particles that chase your mouse
// @reel format: vertical
// @reel result: 8 caption="Move to steer · click to burst"

// @reel scene "Every frame, each one steers toward the mouse" effect=type
public override void Draw()
{
    // @reel pause 0.4
    pull.SetMag(0.35f);   // @mark  (highlighted once typed)
    // @reel hide
    ...bookkeeping you don't want on screen
    // @reel show
}

// @reel drag 100,100 -> 500,400 at=2 dur=1.5

Reel settings → // @reel key: value

Put these anywhere, usually at the top. All are optional.

// @reel scene "caption"

• // @reel scene "caption" → a code card

The code from this marker to the next one is one card, with its caption underneath. Options: effect=type|lines|fade|instant (typed with a caret, line by line, all at once with a fade, or already there), transition=slide|fade|zoom|wipe|none, speed=, hold= (seconds the finished card stays), typos= (this card's own typo rate), and the word keep to continue the previous card instead of starting a new one. A scene with a caption and no code becomes a full-screen statement card. Indentation is normalized per card. A line too long for the card wraps onto extra rows (shown with a dot instead of a line number), the way an editor soft-wraps, instead of shrinking the code until a phone can't read it.

Inside a scene → pause · caption · @mark · hide/show

// @reel pause 0.5 stops typing for a moment before the next line. // @reel caption: … changes the caption when the next line starts appearing. Ending a code line with // @mark highlights it once the scene is shown and dims the rest. Lines between // @reel hide and // @reel show still compile and run, but never appear in the video.

Simulated interaction → move · drag · click · key

During the result part the sketch receives real input events (MousePressed(), MouseDragged(), KeyPressed()…), and the video draws the cursor, click ripples and a keycap. Points are in sketch pixels and times in seconds since the result started: // @reel move 10,10 -> 200,200 -> 300,50 at=1 dur=2, // @reel drag 100,100 -> 400,300 at 3s over 1.5s, // @reel click 300,200 at=2, // @reel key space at=4 (also enter, arrow keys, or any single character). With no scripted mouse, a sketch that reads the mouse gets a natural-looking path automatically, plus clicks and a drag if it overrides those methods.

A whole video in one sketch → result: N full

With result: 60 full and no scenes, the reel is just your sketch, edge to edge, with its sound. That's enough for a complete promo: one sketch that changes shot as time goes by and plays its own soundtrack with [LiveLoop]s. Put // @reel hide right after using DanaProcessing.Reels; so none of the code is typed on screen, and // @reel audio: on so its music is recorded (hidden loops don't count as "makes sound"). Time the shots with Beat() rather than Millis(): it follows what you hear, so cuts land on the music. One detail: loops that start from silence put their first downbeat on the next bar line, so Beat() is 4, not 0, when the music starts. Count from the bar of the first note (OnNote), as the example does. Examples → Promo · 60 s, music included is DanaProcessing's own promo built this way: open it, then Sketch → Create reel → Export.

using DanaProcessing.Reels;
// @reel hide
// @reel format: landscape
// @reel result: 61 full
// @reel outro: off
// @reel audio: on
public class Promo : Sketch
{
    public override void Setup() { Size(1920, 1080); Bpm = 120; }
    double start = -1;   // the bar the music started on
    bool heard;
    public override void OnNote(NoteEvent e) => heard = true;
    public override void Draw()
    {
        if (heard && start < 0) start = Math.Floor(Beat() / 4) * 4;
        float seconds = (float)(Beat() - Math.Max(0, start)) / 2;   // 2 beats a second at 120 BPM
        if (seconds < 6) Title(); else Visuals();
    }
    // ...Title(), Visuals() and the [LiveLoop]s that play the music
}

Export

• Export → MP4 · GIF · PNG

The preview window plays the reel and lets you scrub and jump to any part. Export renders frame by frame in video time, not real time, so a heavy sketch still comes out smooth, and Millis() follows video time. MP4 (H.264, full resolution) needs ffmpeg; the window finds it or lets you pick it. GIF uses DanaProcessing's own encoder and needs nothing else. PNG writes one image per frame for your own editor. If the sketch makes sound, it's recorded in step with the video: live loops run in video time, so every beat lands on the same frame as in the preview, and the MP4 gets an AAC track (PNG export drops an audio.wav next to the frames; GIF has no sound). The sound is measured the way YouTube measures it and brought to -14 LUFS, so a quiet sketch isn't lost next to other videos and a loud one doesn't clip; change it with // @reel loudness:. YouTube thumbnail… saves a 1280×720 PNG with the reel's title, a frame of the running sketch and the reel's theme, so the video and its thumbnail match.

Reel.IsActive · Reel.IsExporting

• Reel.IsActive → bool
• Reel.IsExporting → bool

True while your sketch's code is running inside a reel (preview or export), or while a reel is being written to a file. Use them to skip a slow intro or hide debug text in the video. Reel.Parse(source) returns the parsed ReelScript (scenes, inputs, warnings) if you want to build tooling on top.

Runnable example

A complete sketch using this section. Test in Dana opens it in the IDE, or paste it into a new tab and press Run.

// @reel title: A circle that follows you
// @reel format: vertical
// @reel result: 6 caption="Move the mouse"
// @reel scene "Every frame, ease toward the mouse" effect=type
public class FollowReel : Sketch
{
    float x = 200, y = 200;

    public override void Setup() => Size(400, 400);

    public override void Draw()
    {
        Background(25, 28, 40);
        x = Lerp(x, MouseX, 0.1f);   // @mark
        y = Lerp(y, MouseY, 0.1f);   // @mark
        Fill(255, 180, 120); NoStroke();
        Circle(x, y, 60);
    }
}
// Open it, then Sketch > Create reel... to preview and export the video.