# johnheibel/pdoomvideo architecture

> Architecture diagram of the GitHub repository johnheibel/pdoomvideo, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/johnheibel/pdoomvideo
- Repository: https://github.com/johnheibel/pdoomvideo

## Overview

This repository contains a hand-painted, lyric-driven music video: the browser studio renders time-indexed scenes, and the renderer captures frames and can combine them with the included song. The main creative workflow moves through nine timed chapters, with recurring characters, stage props, and shared drawing helpers supporting them. The README documents the studio and export workflow; sampled source confirms character and rendering responsibilities, but does not expose all chapter registration or browser wiring, so those links are kept at subsystem level.

Main entry points: [`src/timeline.js`](https://github.com/johnheibel/pdoomvideo/blob/main/src/timeline.js) (Scene timeline), [`render.mjs`](https://github.com/johnheibel/pdoomvideo/blob/main/render.mjs) (Frame renderer), [`src/ch`](https://github.com/johnheibel/pdoomvideo/tree/main/src/ch) (Chapters 4–6), [`studio.html`](https://github.com/johnheibel/pdoomvideo/blob/main/studio.html) (Studio page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_creative["Video scenes"]
  node_timeline["Scene timeline<br/>[timeline.js]"]
  node_lyrics["Lyrics timing<br/>[lyrics.js]"]
  node_early_chapters["Chapters 1–3"]
  node_middle_chapters["Chapters 4–6"]
  node_late_chapters["Chapters 7–9"]
end

subgraph group_shared["Shared visuals"]
  node_clawd["Clawd character<br/>[clawd.js]"]
  node_researcher["Researcher character<br/>[cast.js]"]
  node_props["Stage and props<br/>[props.js]"]
  node_render_core["Paint and timing helpers<br/>[core.js]"]
end

subgraph group_studio["Browser studio"]
  node_studio_page["Studio page<br/>[studio.html]"]
end

subgraph group_export["Frame and video export"]
  node_render_cli["Frame renderer<br/>[render.mjs]"]
  node_frames["Rendered frames"]
  node_video["Encoded music video"]
end

node_viewer(("Video creator"))
node_song["Included song<br/>[pdoom.mp3]"]
node_browser["Chrome browser"]
node_ffmpeg["FFmpeg encoder"]

node_viewer -->|"opens"| node_studio_page
node_studio_page -->|"renders scenes"| node_timeline
node_timeline -->|"uses timing"| node_lyrics
node_timeline -->|"dispatches"| node_early_chapters
node_timeline -->|"dispatches"| node_middle_chapters
node_timeline -->|"dispatches"| node_late_chapters
node_early_chapters -->|"draws"| node_clawd
node_middle_chapters -->|"draws"| node_researcher
node_middle_chapters -->|"draws"| node_props
node_late_chapters -->|"draws"| node_props
node_render_cli -->|"opens page"| node_browser
node_browser -->|"renders frames"| node_studio_page
node_render_cli -->|"writes"| node_frames
node_render_cli -->|"encodes with"| node_ffmpeg
node_render_cli -->|"reads audio"| node_song
node_ffmpeg -->|"reads"| node_frames
node_ffmpeg -->|"writes"| node_video

click node_studio_page "https://github.com/johnheibel/pdoomvideo/blob/main/studio.html"
click node_timeline "https://github.com/johnheibel/pdoomvideo/blob/main/src/timeline.js"
click node_lyrics "https://github.com/johnheibel/pdoomvideo/blob/main/src/lyrics.js"
click node_early_chapters "https://github.com/johnheibel/pdoomvideo/tree/main/src/ch"
click node_middle_chapters "https://github.com/johnheibel/pdoomvideo/tree/main/src/ch"
click node_late_chapters "https://github.com/johnheibel/pdoomvideo/tree/main/src/ch"
click node_clawd "https://github.com/johnheibel/pdoomvideo/blob/main/src/clawd.js"
click node_researcher "https://github.com/johnheibel/pdoomvideo/blob/main/src/cast.js"
click node_props "https://github.com/johnheibel/pdoomvideo/blob/main/src/props.js"
click node_render_core "https://github.com/johnheibel/pdoomvideo/blob/main/src/core.js"
click node_render_cli "https://github.com/johnheibel/pdoomvideo/blob/main/render.mjs"
click node_song "https://github.com/johnheibel/pdoomvideo/blob/main/assets/pdoom.mp3"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_timeline,node_lyrics,node_early_chapters,node_middle_chapters,node_late_chapters,node_browser toneBlue
class node_clawd,node_researcher,node_props,node_render_core toneAmber
class node_studio_page toneMint
class node_render_cli,node_frames,node_video toneRose
class node_viewer,node_ffmpeg toneIndigo
class node_song toneTeal
```

## Components

### Video scenes

- [Scene timeline](https://github.com/johnheibel/pdoomvideo/blob/main/src/timeline.js): `src/timeline.js`
- [Lyrics timing](https://github.com/johnheibel/pdoomvideo/blob/main/src/lyrics.js): `src/lyrics.js`
- [Chapters 1–3](https://github.com/johnheibel/pdoomvideo/tree/main/src/ch): `src/ch`
- [Chapters 4–6](https://github.com/johnheibel/pdoomvideo/tree/main/src/ch): `src/ch`
- [Chapters 7–9](https://github.com/johnheibel/pdoomvideo/tree/main/src/ch): `src/ch`

### Shared visuals

- [Clawd character](https://github.com/johnheibel/pdoomvideo/blob/main/src/clawd.js): `src/clawd.js`
- [Researcher character](https://github.com/johnheibel/pdoomvideo/blob/main/src/cast.js): `src/cast.js`
- [Stage and props](https://github.com/johnheibel/pdoomvideo/blob/main/src/props.js): `src/props.js`
- [Paint and timing helpers](https://github.com/johnheibel/pdoomvideo/blob/main/src/core.js): `src/core.js`

### Browser studio

- [Studio page](https://github.com/johnheibel/pdoomvideo/blob/main/studio.html): `studio.html`

### Frame and video export

- [Frame renderer](https://github.com/johnheibel/pdoomvideo/blob/main/render.mjs): `render.mjs`
- **Rendered frames**
- **Encoded music video**

### Other components

- **Video creator**
- [Included song](https://github.com/johnheibel/pdoomvideo/blob/main/assets/pdoom.mp3): `assets/pdoom.mp3`
- **Chrome browser**
- **FFmpeg encoder**

## Connections

- Video creator → Studio page: opens
- Studio page → Scene timeline: renders scenes
- Scene timeline → Lyrics timing: uses timing
- Scene timeline → Chapters 1–3: dispatches
- Scene timeline → Chapters 4–6: dispatches
- Scene timeline → Chapters 7–9: dispatches
- Chapters 1–3 → Clawd character: draws
- Chapters 4–6 → Researcher character: draws
- Chapters 4–6 → Stage and props: draws
- Chapters 7–9 → Stage and props: draws
- Frame renderer → Chrome browser: opens page
- Chrome browser → Studio page: renders frames
- Frame renderer → Rendered frames: writes
- Frame renderer → FFmpeg encoder: encodes with
- Frame renderer → Included song: reads audio
- FFmpeg encoder → Rendered frames: reads
- FFmpeg encoder → Encoded music video: writes