{"id":28504719,"url":"https://github.com/tapioca24/p5.capture","last_synced_at":"2025-07-06T09:31:32.997Z","repository":{"id":39484554,"uuid":"460317594","full_name":"tapioca24/p5.capture","owner":"tapioca24","description":"🎬 super easy recording for p5.js animations","archived":false,"fork":false,"pushed_at":"2025-04-26T04:37:42.000Z","size":259,"stargazers_count":277,"open_issues_count":11,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-08T18:47:47.077Z","etag":null,"topics":["art","canvas","creative-coding","javascript","p5js","video"],"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/tapioca24.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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},"funding":{"github":"tapioca24","patreon":null,"open_collective":null,"ko_fi":"tapioca24","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://tzprofiles.com/view/mainnet/tz2PAo222y74mShW4wRon24BKaR5HcKhFqY8"}},"created_at":"2022-02-17T06:57:11.000Z","updated_at":"2025-06-03T04:24:04.000Z","dependencies_parsed_at":"2024-04-14T08:49:18.503Z","dependency_job_id":null,"html_url":"https://github.com/tapioca24/p5.capture","commit_stats":{"total_commits":145,"total_committers":1,"mean_commits":145.0,"dds":0.0,"last_synced_commit":"9d3b8ccd235be2833f0138f8c0370a05c8834551"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/tapioca24/p5.capture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.capture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.capture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.capture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.capture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tapioca24","download_url":"https://codeload.github.com/tapioca24/p5.capture/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tapioca24%2Fp5.capture/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263878163,"owners_count":23523912,"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","canvas","creative-coding","javascript","p5js","video"],"created_at":"2025-06-08T18:30:36.312Z","updated_at":"2025-07-06T09:31:32.985Z","avatar_url":"https://github.com/tapioca24.png","language":"TypeScript","readme":"\u003c!-- Do not edit this file directly because it was generated --\u003e\n\n![p5.capture](https://user-images.githubusercontent.com/67893738/155303598-97d0c558-27bb-4e28-8e0a-5ae810573696.gif)\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"npm\" href=\"https://badge.fury.io/js/p5.capture\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/p5.capture?style=for-the-badge\u0026labelColor=223843\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"build\" href=\"https://github.com/tapioca24/p5.capture/actions\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/tapioca24/p5.capture/check.yml?branch=main\u0026style=for-the-badge\u0026labelColor=223843\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"jsDelivr hits (npm)\" href=\"https://www.jsdelivr.com/package/npm/p5.capture\"\u003e\n    \u003cimg src=\"https://img.shields.io/jsdelivr/npm/hm/p5.capture?style=for-the-badge\u0026labelColor=223843\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"license\" href=\"https://github.com/tapioca24/p5.capture/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/p5.capture?style=for-the-badge\u0026labelColor=223843\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#about\"\u003eAbout\u003c/a\u003e • \u003ca href=\"#why-p5capture\"\u003eWhy p5.capture?\u003c/a\u003e • \u003ca href=\"#getting-started\"\u003eGetting started\u003c/a\u003e • \u003ca href=\"#api\"\u003eAPI\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"#options\"\u003eOptions\u003c/a\u003e • \u003ca href=\"#browser-compatibility\"\u003eBrowser compatibility\u003c/a\u003e • \u003ca href=\"#limitations\"\u003eLimitations\u003c/a\u003e • \u003ca href=\"#donation\"\u003eDonation\u003c/a\u003e\n\u003c/p\u003e\n\n## About\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/12683107/161574420-6ff4141c-affa-410e-877b-f1ff36d7cc0d.png\" width=\"300\"\u003e\n\u003c/p\u003e\n\nAssuming you would like to record [p5.js](https://p5js.org/) animations super easily, this package is the right choice for you.\n\n👇 Check out the demo:\n\n- [Demo on p5.js Web Editor](https://editor.p5js.org/tapioca24/sketches/gozcYyq4F)\n- [Demo on OpenProcessing](https://openprocessing.org/sketch/1494568)\n- [Demo on CodePen](https://codepen.io/tapioca24/pen/JjMdQMz)\n\n## Why p5.capture?\n\n### 🎩 Stable recording\n\nRecording p5.js animations with screen recording tools can cause jerky recordings.\nComplex animations can slow down the framerate and make recording unstable.\np5.capture hooks into the p5.js draw function and records the rendered frame, so it works like magic.\n\n### ✨ Keep your sketch clean\n\nAdding recording functionality to a sketch can be very tedious.\np5.capture provides a minimal GUI and is designed to add recording functionality without adding any code to your sketch.\nLet's focus on your creative coding.\nOf course, you can also use the API to integrate it into your code.\n\n### 🤹 Any format • One API\n\nTired of having to use different libraries for different formats?\np5.capture supports many export formats including WebM, GIF, MP4, PNG, JPG, and WebP.\nThere is sure to be something you want.\n\n## Getting started\n\n### Installation\n\nInsert a link to the p5.capture _after_ p5.js in your html file:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js\"\u003e\u003c/script\u003e\n\u003c!-- insert after p5.js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/p5.capture@1.6.0/dist/p5.capture.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can find all versions in the [jsDelivr](https://www.jsdelivr.com/package/npm/p5.capture).\n\n### Usage\n\nBasically, the GUI provided by p5.capture starts and stops recording.\n\n![usage](https://user-images.githubusercontent.com/12683107/157575470-f78c0ae2-ad6f-4656-95b3-7ad6469ed255.gif)\n\nThat's all 🎉\n\n#### Export formats\n\nSupported formats include:\n\n- WebM (default): export WebM video using [webm-writer-js](https://github.com/thenickdude/webm-writer-js)\n- GIF: export animated GIF using [gif.js](https://github.com/jnordberg/gif.js)\n- MP4: export MP4 video using [h264-mp4-encoder](https://github.com/TrevorSundberg/h264-mp4-encoder)\n- PNG: export PNG images in a ZIP file\n- JPG: export JPG images in a ZIP file\n- WebP: export WebP images in a ZIP file\n\n## API\n\nThe `P5Capture` class can be used to programmatically control recording.\n\n### Static methods\n\n#### `P5Capture.getInstance()`\n\nReturns a P5Capture instance.  \nUsed to access the P5Capture instance automatically created when p5.capture is initialized.\n\n#### `P5Capture.setDefaultOptions(options)`\n\nChange default options. These options affect both GUI and API recording.  \nMust be used _before_ p5.js initialization.\n\n```js\nP5Capture.setDefaultOptions({\n  format: \"gif\",\n  framerate: 10,\n  quality: 0.5,\n  width: 320,\n});\n\nfunction setup() {\n  // do something...\n}\n```\n\n### Instance methods\n\n#### `start(options?)`\n\nStart recording with the specified options.  \n`options` can be omitted.\n\n#### `stop()`\n\nStop recording and start encoding.  \nDownload files after encoding is complete.\n\n### Instance properties\n\n#### `state` (Read only)\n\nReturns the current recording state (`\"idle\"`, `\"capturing\"`, or `\"encoding\"`).\n\n### Examples\n\nThe following example shows how to record the first 100 frames and create a GIF video:\n\n```js\nfunction draw() {\n  if (frameCount === 1) {\n    const capture = P5Capture.getInstance();\n    capture.start({\n      format: \"gif\",\n      duration: 100,\n    });\n  }\n\n  // do something...\n}\n```\n\nThe following example shows how to add an event handler that starts and stops recording with a keystroke:\n\n```js\nfunction keyPressed() {\n  if (key === \"c\") {\n    const capture = P5Capture.getInstance();\n    if (capture.state === \"idle\") {\n      capture.start();\n    } else {\n      capture.stop();\n    }\n  }\n}\n```\n\n## Options\n\n| Name             | Default                                             | Description                                                                                                              |\n| ---------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\n| format           | `\"webm\"`                                            | export format. `\"webm\"`, `\"gif\"`, `\"mp4\"`, `\"png\"`, `\"jpg\"`, and `\"webp\"`                                                |\n| framerate        | `30`                                                | recording framerate                                                                                                      |\n| bitrate          | `5000`                                              | recording bitrate in kbps (only available for MP4)                                                                       |\n| quality          | see [Quality option](#quality-option)               | recording quality from `0` (worst) to `1` (best). (only available for WebM/GIF/JPG/WebP)                                 |\n| width            | canvas width                                        | output image width                                                                                                       |\n| height           | canvas height                                       | output image height                                                                                                      |\n| duration         | `null`                                              | maximum recording duration in number of frames                                                                           |\n| autoSaveDuration | `null`                                              | automatically downloads every n frames. convenient for long captures (only available for PNG/JPG/WebP)                   |\n| baseFilename     | see [Base filename option](#base-filename-option)   | function to customize the filename of a video or zip file. see [Base filename option](#base-filename-option) for details |\n| imageFilename    | see [Image filename option](#image-filename-option) | function to customize the filename of a image file. see [Image filename option](#image-filename-option) for details      |\n| beforeDownload   | `undefined`                                         | function called before file download. see [Before download option](#before-download-option) for details                  |\n| verbose          | `false`                                             | dumps info on the console                                                                                                |\n| disableUi        | `false`                                             | (only `P5Capture.setDefaultOptions()`) hides the UI                                                                      |\n| disableScaling   | `false`                                             | (only `P5Capture.setDefaultOptions()`) disables pixel scaling for high pixel density displays                            |\n\n### Quality option\n\nThe default value of the `quality` option is different for each format.\n\n| Format | Default |\n| ------ | ------- |\n| WebM   | `0.95`  |\n| GIF    | `0.7`   |\n| JPG    | `0.92`  |\n| WebP   | `0.8`   |\n\n### Base filename option\n\nYou can customize the filename of **a video or zip file** by specifying a function that returns a filename string.\nA [`Date`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date) object is passed as the first argument.\nThis object indicates the time the encoding was completed and is useful for making the filename unique.\n\nBy default, the following function is used to determine the filename.\n\n```js\nfunction baseFilename(date) {\n  const zeroPadding = (n) =\u003e n.toString().padStart(2, \"0\");\n  const years = date.getFullYear();\n  const months = zeroPadding(date.getMonth() + 1);\n  const days = zeroPadding(date.getDate());\n  const hours = zeroPadding(date.getHours());\n  const minutes = zeroPadding(date.getMinutes());\n  const seconds = zeroPadding(date.getSeconds());\n  return `${years}${months}${days}-${hours}${minutes}${seconds}`;\n}\n```\n\nNote that the extension is automatically assigned and is not included in the return value of the function.\n\n### Image filename option\n\nYou can customize the filename of **a image file** by specifying a function that returns a filename string.\nThe index of the recording frame is passed as the first argument.\nThis is useful for making the filename unique.\n\nBy default, the following function is used to determine the filename.\n\n```js\nfunction imageFilename(index) {\n  return index.toString().padStart(7, \"0\");\n}\n```\n\nNote that the extension is automatically assigned and is not included in the return value of the function.\n\n### Before download option\n\nYou can interrupt and add your own code before the file download.\n\n```js\nP5Capture.setDefaultOptions({\n  beforeDownload(blob, context, next) {\n    // call your own code to do before file download.\n    console.log(blob.size, context);\n\n    // calling `next` callback will start the file download.\n    // this can be omitted if not needed.\n    next();\n  },\n});\n```\n\nThe following arguments are passed:\n\n- `blob`: the generated [Blob](https://developer.mozilla.org/docs/Web/API/Blob) object\n- `context`: provides the context object\n  - `filename`: the filename expected when downloading\n  - `format`: output format\n- `next`: callback function to start the download\n\n## Browser compatibility\n\nIt may not work depending on your environment.  \nTested in the following environments:\n\n|      | Chrome | Edge | Firefox | Safari |\n| ---- | ------ | ---- | ------- | ------ |\n| WebM | ✅     | ✅   | ✅      | ❌     |\n| GIF  | ✅     | ✅   | ✅      | ✅     |\n| MP4  | ✅     | ✅   | ✅      | ✅     |\n| PNG  | ✅     | ✅   | ✅      | ✅     |\n| JPG  | ✅     | ✅   | ✅      | ✅     |\n| WebP | ✅     | ✅   | ✅      | ✅     |\n\nThe browser versions used for testing are\n\n- Chrome 98.0.4758.109\n- Edge 98.0.1108.62\n- Firefox 97.0.2\n- Safari 15.3\n\n## Limitations\n\n- Multiple instances is not supported\n  - In [p5.js instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode), only one instance can be used\n- Module bundlers is not supported\n\n## Donation\n\nThis project is open source and always will be, even if I don't get donations. That said, I know there are people out there that may still want to donate just to show their appreciation so this is for you guys. All donations will be used for sustainable software development. Thanks in advance!\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/J3J3E5YAN)  \n[Tezos Profile](https://tzprofiles.com/view/mainnet/tz2PAo222y74mShW4wRon24BKaR5HcKhFqY8)\n","funding_links":["https://github.com/sponsors/tapioca24","https://ko-fi.com/tapioca24","https://tzprofiles.com/view/mainnet/tz2PAo222y74mShW4wRon24BKaR5HcKhFqY8","https://ko-fi.com/J3J3E5YAN"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftapioca24%2Fp5.capture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftapioca24%2Fp5.capture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftapioca24%2Fp5.capture/lists"}