{"id":28092351,"url":"https://github.com/tapioca24/p5.save-frames","last_synced_at":"2025-05-13T13:09:41.457Z","repository":{"id":57317543,"uuid":"458475176","full_name":"tapioca24/p5.save-frames","owner":"tapioca24","description":"p5.js extension for capturing asequence of frames","archived":false,"fork":false,"pushed_at":"2022-02-17T12:04:23.000Z","size":2485,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-20T14:06:18.239Z","etag":null,"topics":["art","creative","creative-coding","p5","p5js","processing","sketch"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/tapioca24.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-12T09:23:54.000Z","updated_at":"2024-11-21T11:56:28.000Z","dependencies_parsed_at":"2022-08-25T21:12:02.508Z","dependency_job_id":null,"html_url":"https://github.com/tapioca24/p5.save-frames","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.save-frames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.save-frames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.save-frames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.save-frames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tapioca24","download_url":"https://codeload.github.com/tapioca24/p5.save-frames/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948416,"owners_count":21988954,"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":["art","creative","creative-coding","p5","p5js","processing","sketch"],"created_at":"2025-05-13T13:02:49.462Z","updated_at":"2025-05-13T13:09:41.446Z","avatar_url":"https://github.com/tapioca24.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# p5.save-frames\n\np5.js extension for capturing asequence of frames\n\n![Demo](./example/demo.gif)\n## Demo\n\nhttps://openprocessing.org/sketch/1481891\n\n## Why p5.save-frames?\n\np5.save-frames is similar to the built-in [`saveFrames`](https://p5js.org/reference/#/p5/saveFrames) function in that it captures a sequence of frames.\nThis can be useful for creating a movie offline using tools such as ffmpeg.\n\nHowever, the `saveFrames` function has some limitations:\n\n- Need to edit the code to save the frames\n- Need to specify the duration beforehand\n- Duration is limited to 15 seconds\n- Image files will be downloaded individually\n\np5.save-frames has the following features:\n\n- No need to add any code to your JavaScript file\n- GUI to control the start and stop of the capture\n- No duration limitation\n- Zip file download\n\nThus, you can easily add the ability to save frames to your sketches.\n\n## Installation\n\n### CDN\n\n[jsDelivr](https://www.jsdelivr.com/package/npm/p5.save-frames) is available.  \nAdd the script to your HTML file.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/p5.save-frames@latest/dist/p5.save-frames.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can also use the fixed version.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/p5.save-frames@2.0.0/dist/p5.save-frames.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n1. When the script is loaded, the GUI will appear in the upper left corner of the screen\n2. Press the button to start capturing\n3. Press the button again to stop capturing\n\nThat's it.  \nA sequence of frames will be downloaded as a zip file.\n\n### Control programmatically\n\nThe following functions can be used to programmatically control the capture.\n\n| Functions          | Description                                                             |\n| ------------------ | ----------------------------------------------------------------------- |\n| `startCapturing()` | Start capturing                                                         |\n| `stopCapturing()`  | Stop capturing                                                          |\n| `isCapturing()`    | Returns a boolean indicating whether a capture is currently in progress |\n\n```js\nfunction setup() {\n  createCanvas(400, 400, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  normalMaterial();\n  rotateX(frameCount * 0.02);\n  rotateY(frameCount * 0.03);\n  torus(width * 0.2, width * 0.1, 64, 64);\n}\n\nfunction mouseClicked() {\n  if (isCapturing()) {\n    stopCapturing();\n  } else {\n    startCapturing();\n  }\n}\n```\n\n### Async mode\n\nBy default, p5.save-frames runs the capture task in sync with the rendering frame rate of p5.js.\nIn async mode, it will periodically run the capture task asynchronously with the rendering frame rate.\nThis is useful if you want to set the rendering frame rate and capturing frame rate separately.\n\nHere is an example of using async mode.\n\n```js\nP5_SAVE_FRAMES_MODE = \"async\";\n\nfunction setup() {\n  createCanvas(400, 400, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  normalMaterial();\n  rotateX(frameCount * 0.02);\n  rotateY(frameCount * 0.03);\n  torus(width * 0.2, width * 0.1, 64, 64);\n}\n```\n\n## Configuration\n\nYou can change the behavior by specifying some global variables.\n\n| Variables                           | Default         | Description                                                                                      |\n| ----------------------------------- | --------------- | ------------------------------------------------------------------------------------------------ |\n| `P5_SAVE_FRAMES_MODE`               | `\"sync\"`        | Execution mode of the capture task. \"sync\" or \"async\"                                            |\n| `P5_SAVE_FRAMES_OVERRIDE_FRAMERATE` | `false`         | Override the rendering frame rate of p5.js with `P5_SAVE_FRAMES_FRAMERATE`                       |\n| `P5_SAVE_FRAMES_FRAMERATE`          | `30`            | Capturing frame rate. Used in async mode or with the `P5_SAVE_FRAMES_OVERRIDE_FRAMERATE` option. |\n| `P5_SAVE_FRAMES_EXTENSION`          | `\"png\"`         | Image format. \"png\" or \"jpg\"                                                                     |\n| `P5_SAVE_FRAMES_HIDE_UI`            | `false`         | If set to true, the GUI will be hidden                                                           |\n| `P5_SAVE_FRAMES_UI_PARENT`          | `document.body` | Parent element to overlay the GUI                                                                |\n\n## Limitations\n\np5.save-frames currently only supports [p5.js global mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).\n\n## License\n\nMIT. Copyright (c) tapioca24\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftapioca24%2Fp5.save-frames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftapioca24%2Fp5.save-frames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftapioca24%2Fp5.save-frames/lists"}