programmatic-animations

Programmatic Animations

🆕 See also: https://programmatic-animations.tomorroworld.com/ (touch-art)

Make animations with canvas and JavaScript, and export as video.

Export as WebM video files* and then use e.g. VLC Media Player to convert WebM to MP4 (File → Convert/Stream, MP4/MOV and MPEG-4 format).
*Not supported in Safari

Uses CCapture.js for capturing video frames.

Examples

  1. Basic: drawing lines
    Example
  2. Basic physics using Matter.js
    Example
  3. Advanced animation using oCanvas
    Example
  4. Mouse position as input
    Example
  5. Image data
    Example
  6. Image data 2: lines
    Example
  7. City cars
    Example
  8. Using P5.js

Share your work!

If you make your own animations based on these examples, please share with the hashtag #programmaticanimations.

Learn more