canvas-film

Open source, MIT

Write a short film
in JavaScript.

Canvas frames in, MP4 with a synthesized score out. No editor, no assets, no build step. The picture below is not a video: it is a dozen lines of code, drawing live.

0.0 / 8.0 s
Get it on GitHub Watch the full 60 s film 
npm i && npx canvas-film render film.html --out film.mp4

How it works

  1. 1

    draw(t)

    Each shot is a function of time. Paint the frame with cel-shaded sky, dunes, rigs and type.

  2. 2

    Headless Chromium

    The CLI steps render(t) frame by frame, so the result is exact, not recorded.

  3. 3

    ffmpeg

    JPEG frames stream into libx264. Same page, same pixels, every run.

  4. 4

    numpy score

    Your cue list drives a Python synth: koto, flute, pads, choir, taiko, reverb. Mux and ship.

The whole minimal example

This is the exact file the canvas above is running (examples/minimal/film.js).

Loading the example source...