{"id":15043257,"url":"https://github.com/cdaein/vite-plugin-ssam-timelapse","last_synced_at":"2026-02-13T02:02:19.995Z","repository":{"id":65932143,"uuid":"602756446","full_name":"cdaein/vite-plugin-ssam-timelapse","owner":"cdaein","description":"Export a Canvas image at each file save. Use it with Ssam or other Canvas libraries","archived":false,"fork":false,"pushed_at":"2025-02-25T03:52:08.000Z","size":226,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T12:14:19.344Z","etag":null,"topics":["canvas","creative-coding","generative-art","ssam","timelapse","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cdaein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-16T21:55:04.000Z","updated_at":"2025-02-25T03:52:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"e9726160-cc97-48b2-bc8e-b19482a3b3c1","html_url":"https://github.com/cdaein/vite-plugin-ssam-timelapse","commit_stats":{"total_commits":31,"total_committers":1,"mean_commits":31.0,"dds":0.0,"last_synced_commit":"de3d9562c48b6c505c957894223ad0901390b0f2"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-timelapse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-timelapse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-timelapse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-timelapse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdaein","download_url":"https://codeload.github.com/cdaein/vite-plugin-ssam-timelapse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788867,"owners_count":21161726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","creative-coding","generative-art","ssam","timelapse","vite","vite-plugin"],"created_at":"2024-09-24T20:48:46.480Z","updated_at":"2026-02-13T02:02:19.989Z","avatar_url":"https://github.com/cdaein.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-ssam-timelapse\n\nThis plugin is created to be used with [Ssam](https://github.com/cdaein/ssam) to create a visual documentation of your sketch over time. It may also be used with other libraries if you can get a Canvas object reference.\n\n## Install\n\n```sh\nnpm i -D vite-plugin-ssam-timelapse\n```\n\n## How it works\n\nWhen the plugin detects a change in the sketch source code, it will export a PNG image with sequential numbering into `timelapse` directory. If the directory doesn't exist, it will make one for you. You can later convert the resulting image sequence into a video to create a visual documentation of your sketch. When you close the Vite server and later come back to the same sketch, it will continue incrementing image filenames from where you left off.\n\n\u003e ✋ If you use Git, you may want to include `timelapse` directory in `.gitignore`.\n\n## How to set up\n\nIn Vite config:\n\n```js\nimport { ssamTimelapse } from \"vite-plugin-ssam-timelapse\";\n\nexport default defineConfig({\n  plugins: [ssamTimelapse()],\n  // ...\n});\n```\n\n## With Ssam\n\nIn your Ssam sketch source code:\n\n```js\nimport { ssam } from \"ssam\";\n\nconst sketch = ({ wrap, canvas }) =\u003e {\n  if (import.meta.hot) {\n    import.meta.hot.on(\"ssam:timelapse-changed\", () =\u003e {\n      import.meta.hot?.send(\"ssam:timelapse-newframe\", {\n        image: canvas.toDataURL(),\n      });\n    });\n  }\n\n  wrap.render = () =\u003e {\n    // your drawing code\n  };\n};\n\nconst settings = {\n  dimensions: [800, 800],\n};\n\nssam(sketch, settings);\n```\n\n## With Vanilla JS\n\nYou can use the plugin with Vanilla JS or other Canvas libraries as long as you can get a reference to the Canvas object.\n\n```js\nconst canvas = document.createElement(\"canvas\");\ncanvas.width = canvas.height = 600;\ndocument.body.appendChild(canvas);\nconst ctx = canvas.getContext(\"2d\")!;\n\n// make changes to drawing code and save\nctx.fillStyle = `gray`;\nctx.fillRect(0, 0, 600, 600);\nctx.beginPath();\nctx.arc(300, 300, 300, 0, Math.PI * 2);\nctx.fillStyle = `white`;\nctx.fill();\n\n// at each save, canvas image will be exported\nif (import.meta.hot) {\n  import.meta.hot.on(\"ssam:timelapse-changed\", () =\u003e {\n    import.meta.hot?.send(\"ssam:timelapse-newframe\", {\n      image: canvas.toDataURL(),\n    });\n  });\n}\n```\n\n## Default Options\n\n```js\nssamTimelapse({\n  // detect changes in the src directory\n  watchDir: \"./src\",\n  // will create the directory if it does not exist\n  outDir: \"./timelapse\",\n  // overwrite existing files\n  overwrite: false,\n  // ignore dotfiles. empty files are ignored by default.\n  // you can use regex, string or string[]\n  ignored: /(^|[\\/\\\\])\\../\n  // how quickly plugin responds to file change (in milliseconds). see Chokidar documentation\n  stabilityThreshold: 10_000,\n  // how many zeros to pad to filename\n  padLength: 5,\n  // console logging in browser\n  log: true,\n});\n```\n\nWhen `overwrite` is set to `true`, every time the Vite server restarts, it will overwrite existing files on the `outDir`.\n\nTo avoid too frequent image exports, the default `stabilityThreshold` is set to 10 seconds, meaning the plugin will wait 10 seconds for all file changes to be settled.\n\n## Convert to MP4\n\nUse a video editing program to convert the image sequence into a video file. If you have `ffmpeg` installed, it is as simple as running the following command:\n\n```sh\nffmpeg -framerate 5 -pattern_type glob -i '*.png' -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -y output.mp4\n```\n\nNote that `ffmpeg` expects the filenames to be sequential. From my testing on Mac, `'*.png'` will continue to work even if some images are missing, but if you get an error, you will need to rename them before running the ffmpeg command.\n\n## To Dos\n\n- [ ] It generates duplicate images often when editing code not related to visual. The plugin may first compare the image before saving a new one.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaein%2Fvite-plugin-ssam-timelapse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdaein%2Fvite-plugin-ssam-timelapse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaein%2Fvite-plugin-ssam-timelapse/lists"}