https://github.com/golanlevin/plottimation
Tool for Generating Animated GIFs from Photos of Frame Sheets
https://github.com/golanlevin/plottimation
animation gif pen-plotters plotter-art risograph tool workshop
Last synced: 26 days ago
JSON representation
Tool for Generating Animated GIFs from Photos of Frame Sheets
- Host: GitHub
- URL: https://github.com/golanlevin/plottimation
- Owner: golanlevin
- License: mit
- Created: 2026-03-12T10:27:53.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-05-31T20:53:44.000Z (about 2 months ago)
- Last Synced: 2026-05-31T22:20:42.255Z (about 2 months ago)
- Topics: animation, gif, pen-plotters, plotter-art, risograph, tool, workshop
- Language: JavaScript
- Homepage: https://golanlevin.github.io/plottimation/
- Size: 72.4 MB
- Stars: 31
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Plottimation Tool
[**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/).
Version 1.17 • By @GolanLevin, Spring 2026.
* [**Plottimation Tool Online Here**](https://golanlevin.github.io/plottimation/)
* [**Quickstart Instructions**](#quickstart-instructions)
* [**Documentation**](documentation.md)
—
* [p5.js Design Templates](templates/README.md)
* [Demonstration Video](https://www.youtube.com/watch?v=MOXB63DgItQ)
* [GIF Gallery](#plottimation-gif-gallery)
[](https://golanlevin.github.io/plottimation/)
---
## Quickstart Instructions
1. **Create** a "frame sheet" of your animation. You can work in either of two ways:
- **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.
- **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.
2. **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.
3. **Open** the [**Plottimation Tool**](https://golanlevin.github.io/plottimation/) in a browser, from [**here**](https://golanlevin.github.io/plottimation).
4. **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.
5. 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.).
6. It's time to **detect** your page and **extract** its grid of frames. **Adjust** the `Page Detection Threshold` slider in the *Page & 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.
7. **Choose** the correct `Alignment Pipeline` for your frame sheet:
- `Markers (crosses, dots)` for marker-separated sheets, or
- `Markerless (gutters, frames)` for gutter-separated sheets without registration marks
8. If you select `Markerless`, you will probably want to **enable stabilization** in the *Stabilization* tab.
9. According to your taste, **adjust** the settings under the *Appearance* and *Crop & Geometry* tabs. Changes to these settings are reflected in the animation shown in the *Preview & Export* panel.
10. To generate and download your GIF animation, **click** `↓GIF` in the *Preview & 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.
11. 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.
---
## Plottimation GIF Gallery
*All animations are © their respective authors, and are used in this project with permission.*
[](demo/2_plot_concentric.jpg)
Plot by Golan Levin (@golanlevin)
[](demo/4_plot_julienv3ga.jpg)
Plot by Julien Gachadoat ([@julienv3ga](https://www.instagram.com/julienv3ga/))
[](demo/5_intaglio_bubblewalker_3614_i.jpg)
"Bubblewalker 3614" Intaglio by Golan Levin (@golanlevin)
[](demo/5_plot_bubblewalker_3628_i.jpg)
"Bubblewalker 3626" Plot by Golan Levin (@golanlevin)
[](demo/5_plot_bubblewalker_3628_i.jpg)
"Bubblewalker 3628" Plot by Golan Levin (@golanlevin)
[](demo/6_riso_zinehug_workshop.jpg)
Risograph by Alex Barsky ([@zinehug](https://www.instagram.com/zinehug))
[](demo/7_riso_zinehug_clay.png)
Risograph by Alex Barsky ([@zinehug](https://www.instagram.com/zinehug))
[](demo/8_riso_zinehug_summoner.jpg)
"Summoner" Risograph by Zack Lydon ([@zinehug](https://www.instagram.com/zinehug))
[](demo/9_riso_kellianderson.jpg)
"A" Risograph by Kelli Anderson ([@kellianderson](https://www.instagram.com/kellianderson/))
[](demo/10_cyano_kellianderson.png)
Cyanotype by Kelli Anderson ([@kellianderson](https://www.instagram.com/kellianderson/))