{"id":51294362,"url":"https://github.com/golanlevin/plottimation","last_synced_at":"2026-06-30T13:02:04.990Z","repository":{"id":344374823,"uuid":"1179737052","full_name":"golanlevin/plottimation","owner":"golanlevin","description":"Tool for Generating Animated GIFs from Photos of Frame Sheets","archived":false,"fork":false,"pushed_at":"2026-05-31T20:53:44.000Z","size":75923,"stargazers_count":31,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-31T22:20:42.255Z","etag":null,"topics":["animation","gif","pen-plotters","plotter-art","risograph","tool","workshop"],"latest_commit_sha":null,"homepage":"https://golanlevin.github.io/plottimation/","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/golanlevin.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-12T10:27:53.000Z","updated_at":"2026-05-31T20:53:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"b8fb7917-7890-44fc-9116-fb1b9622e96a","html_url":"https://github.com/golanlevin/plottimation","commit_stats":null,"previous_names":["golanlevin/plottimation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/golanlevin/plottimation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golanlevin%2Fplottimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golanlevin%2Fplottimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golanlevin%2Fplottimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golanlevin%2Fplottimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/golanlevin","download_url":"https://codeload.github.com/golanlevin/plottimation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golanlevin%2Fplottimation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34967636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animation","gif","pen-plotters","plotter-art","risograph","tool","workshop"],"created_at":"2026-06-30T13:02:00.665Z","updated_at":"2026-06-30T13:02:04.981Z","avatar_url":"https://github.com/golanlevin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plottimation Tool\n\n[**This free tool**](https://golanlevin.github.io/plottimation/) builds a looping GIF from a scan or photograph of an animation contact-sheet. It automatically aligns the frames; works both with or without alignment markers; and can even work with casual photographs. You can find the tool [**here**](https://golanlevin.github.io/plottimation/).\u003cbr/\u003e\nVersion 1.17 • By @GolanLevin, Spring 2026.\n\n* [**Plottimation Tool Online Here**](https://golanlevin.github.io/plottimation/)\n* [**Quickstart Instructions**](#quickstart-instructions)\n* [**Documentation**](documentation.md)\u003cbr /\u003e—\u003cbr/\u003e\n* [p5.js Design Templates](templates/README.md)\n* [Demonstration Video](https://www.youtube.com/watch?v=MOXB63DgItQ)\n* [GIF Gallery](#plottimation-gif-gallery)\n\n[![plottimation_ui.png](doc/plottimation_spinnyrect.gif)](https://golanlevin.github.io/plottimation/)\n\n---\n\n## Quickstart Instructions\n\n1. **Create** a \"frame sheet\" of your animation. You can work in either of two ways:\n   - **With Markers.** Make a marker-based sheet, with frames separated by small crosses (`+`) or filled circular dots (`●`), rendered in a high-contrast ink. [Here's a p5.js sketch](https://editor.p5js.org/golan/sketches/_ZMbagYFc) to get started. Using markers gives the most accurate frame alignment.\u003cbr/\u003e\u003cimg src=\"doc/marker-page-examples.png\" width=\"400\"\u003e\n   - **Or, Without Markers.** Create a markerless sheet, with frames separated by empty gutters. *Note:* depending on your design, the markerless pipeline may produce more jittery animations.\u003cbr/\u003e\u003cimg src=\"doc/markerless-page-example.png\" height=\"131\"\u003e\n2. **Photograph or scan** your frame sheet. It's OK to use a casual photo, but your page must have good contrast against a plain background. For example, a light-colored sheet should be completely surrounded by a uniform dark background, as shown [here](demo/1_dmawer_crosses.jpg) and below. It is *strongly recommended* to keep the resolution of your frame sheet under 8000×8000 pixels.\u003cbr/\u003e\u003cimg src=\"doc/page-photo-recommendations.png\"\u003e\n3. **Open** the [**Plottimation Tool**](https://golanlevin.github.io/plottimation/) in a browser, from [**here**](https://golanlevin.github.io/plottimation).\n4. **Load** the image of your frame sheet into the Plottimation Tool. You can do this by dragging your image file onto the Tool's load target (where it says \"Drop a photo or scan here\"), or by clicking the target to load a file.\n5. Under the *Layout* tab, **set** `Frame Columns` and `Frame Rows` to match the layout of your sheet's grid of frames. You should also set your sheet's orientation (landscape or portrait) and page size (11×8.5, etc.).\n6. It's time to **detect** your page and **extract** its grid of frames. **Adjust** the `Page Detection Threshold` slider in the *Page \u0026 Grid Detection* tab until you see a bright green frame around your page in the `Page Corners` panel. You may also need to adjust other settings, such as `Grid Search Inset X` and `Grid Search Inset Y`. If your sheet uses light ink on dark paper, enable `Light-on-dark design`. If necessary you can specify the page corners manually in the Page Corners panel.\u003cbr\u003e\u003cimg src=\"doc/page-rectification.png\" height=\"250\"\u003e\n7. **Choose** the correct `Alignment Pipeline` for your frame sheet:\n   - `Markers (crosses, dots)` for marker-separated sheets, or \n   - `Markerless (gutters, frames)` for gutter-separated sheets without registration marks\n8. If you select `Markerless`, you will probably want to **enable stabilization** in the *Stabilization* tab. \n9. According to your taste, **adjust** the settings under the *Appearance* and *Crop \u0026 Geometry* tabs. Changes to these settings are reflected in the animation shown in the *Preview \u0026 Export* panel.\n10. To generate and download your GIF animation, **click** `↓GIF` in the *Preview \u0026 Export* panel. You can also download your animation as an MP4 movie or a zipped folder of frames. There are advanced settings in the *Export Options* tab for adjusting output dimensions, compression quality, and playback modes.\n11. You can also **save** your animations' settings file to save time later; find a button for doing this at the bottom of the *Export Options* tab.\n\n---\n\n## Plottimation GIF Gallery\n\n*All animations are © their respective authors, and are used in this project with permission.*\n\n![Plot by Golan Levin (@golanlevin)](doc/2_plot_concentric.gif) \n[![2_plot_concentric_i.jpg](doc/2_plot_concentric_i.jpg)](demo/2_plot_concentric.jpg)\n\u003cbr\u003ePlot by Golan Levin (@golanlevin)\n\n![Plot by Julien Gachadoat (@julienv3ga)](doc/4_plot_julienv3ga.gif) \n[![4_plot_julienv3ga.jpg](doc/4_plot_julienv3ga_i.jpg)](demo/4_plot_julienv3ga.jpg)\n\u003cbr\u003ePlot by Julien Gachadoat ([@julienv3ga](https://www.instagram.com/julienv3ga/))\n\n![Intagio by Golan Levin (@golanlevin)](doc/5_intaglio_bubblewalker_3614.gif) \n[![5_intaglio_bubblewalker_3614.gif](doc/5_intaglio_bubblewalker_3614_i.jpg)](demo/5_intaglio_bubblewalker_3614_i.jpg)\n\u003cbr\u003e\"Bubblewalker 3614\" Intaglio by Golan Levin (@golanlevin)\n\n![Plot by Golan Levin (@golanlevin)](doc/5_plot_bubblewalker_3626.gif) \n[![5_plot_bubblewalker_3626.gif](doc/5_plot_bubblewalker_3626_i.jpg)](demo/5_plot_bubblewalker_3628_i.jpg)\n\u003cbr\u003e\"Bubblewalker 3626\" Plot by Golan Levin (@golanlevin)\n\n![Plot by Golan Levin (@golanlevin)](doc/5_plot_bubblewalker_3628.gif) \n[![5_plot_bubblewalker_3628.gif](doc/5_plot_bubblewalker_3628_i.jpg)](demo/5_plot_bubblewalker_3628_i.jpg)\n\u003cbr\u003e\"Bubblewalker 3628\" Plot by Golan Levin (@golanlevin)\n\n![Riso by Alex Barsky (@zinehug)](doc/6_riso_zinehug_anim.gif) \n[![6_riso_zinehug_workshop_i.jpg](doc/6_riso_zinehug_workshop_i.jpg)](demo/6_riso_zinehug_workshop.jpg) \n\u003cbr\u003eRisograph by Alex Barsky ([@zinehug](https://www.instagram.com/zinehug))\n\n![Riso by Alex Barsky (@zinehug)](doc/7_riso_zinehug_clay.gif) \n[![7_riso_zinehug_clay_i.png](doc/7_riso_zinehug_clay_i.png)](demo/7_riso_zinehug_clay.png)\n\u003cbr\u003eRisograph by Alex Barsky ([@zinehug](https://www.instagram.com/zinehug))\n\n![Riso by Zack Lydon (@zinehug)](doc/8_riso_zinehug_summoner.gif) \n[![8_riso_zinehug_summoner_i.jpg](doc/8_riso_zinehug_summoner_i.jpg)](demo/8_riso_zinehug_summoner.jpg)\n\u003cbr\u003e\"Summoner\" Risograph by Zack Lydon ([@zinehug](https://www.instagram.com/zinehug))\n\n![Riso by Kelli Anderson (@kellianderson)](doc/9_riso_kellianderson.gif) \n[![9_riso_kellianderson_i.jpg](doc/9_riso_kellianderson_i.jpg)](demo/9_riso_kellianderson.jpg)\n\u003cbr\u003e\"A\" Risograph by Kelli Anderson ([@kellianderson](https://www.instagram.com/kellianderson/))  \n\n![Cyanotype by Kelli Anderson (@kellianderson)](doc/10_cyano_kellianderson.gif)\n[![10_cyano_kellianderson_i.png](doc/10_cyano_kellianderson_i.png)](demo/10_cyano_kellianderson.png)\n\u003cbr\u003eCyanotype by Kelli Anderson ([@kellianderson](https://www.instagram.com/kellianderson/)) \n\n\u003c!-- \n\nReferences: \n\n* [Spectrolite Riso Animation](https://spectrolite.app/how-to/art-and-animation/riso-animation)\n\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgolanlevin%2Fplottimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgolanlevin%2Fplottimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgolanlevin%2Fplottimation/lists"}