Timelapse Recording - cdaein/ssam GitHub Wiki

When you create a new Ssam sketch with npm create ssam@latest, it comes with the vite-plugin-ssam-timelapse plugin. The plugin automatically exports a PNG image of the canvas in the background whenever you update and save the files in the src directory. After you spend some time with the project, you will see an image sequence generated in the timelapse folder. You can then use tools like ffmpeg to convert the image sequence to an mp4 video file, which will give you an interesting look at the visual progress of your project.

Add the code below to your sketch function that handles the communication between the sketch and the server that generates image files:

import.meta.hot.on("ssam:timelapse-changed", () => {
  import.meta.hot?.send("ssam:timelapse-newframe", {
    image: canvas.toDataURL(),
  });
});

To learn more about the plugin and how to customize it, visit the plugin repo.

How to convert to MP4 video

Given you have ffmpeg installed on your machine, run the CLI command:

ffmpeg -framerate 5 -pattern_type glob -i '*.png' -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -y output.mp4

How To Disable

1. In vite.config.js/ts file, remove the plugin ssamTimelapse().
2. In sketch.js/ts, delete the import.meta.hot.on("ssam:timelapse-changed", ..) function call.
3. You can also run npm uninstall vite-plugin-ssam-timelapse.