plottimation

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 38 Open GitHub ↗

Tool for Generating Animated GIFs from Photos of Frame Sheets

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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)

[![plottimation_ui.png](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/plottimation_spinnyrect.gif)](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. <img src="doc/marker-page-examples.png" width="400">
 - **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. <img src="doc/markerless-page-example.png" height="131">
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. <img src="doc/page-photo-recommendations.png">
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. <img src="doc/page-rectification.png" height="250">
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.*

![Plot by Golan Levin (@golanlevin)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/2_plot_concentric.gif) 
[![2_plot_concentric_i.jpg](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/2_plot_concentric_i.jpg)](demo/2_plot_concentric.jpg)
 Plot by Golan Levin (@golanlevin)

![Plot by Julien Gachadoat (@julienv3ga)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/4_plot_julienv3ga.gif) 
[![4_plot_julienv3ga.jpg](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/4_plot_julienv3ga_i.jpg)](demo/4_plot_julienv3ga.jpg)
 Plot by Julien Gachadoat ([@julienv3ga](https://www.instagram.com/julienv3ga/))

![Intagio by Golan Levin (@golanlevin)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/5_intaglio_bubblewalker_3614.gif) 
[![5_intaglio_bubblewalker_3614.gif](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/5_intaglio_bubblewalker_3614_i.jpg)](demo/5_intaglio_bubblewalker_3614_i.jpg)
 "Bubblewalker 3614" Intaglio by Golan Levin (@golanlevin)

![Plot by Golan Levin (@golanlevin)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/5_plot_bubblewalker_3626.gif) 
[![5_plot_bubblewalker_3626.gif](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/5_plot_bubblewalker_3626_i.jpg)](demo/5_plot_bubblewalker_3628_i.jpg)
 "Bubblewalker 3626" Plot by Golan Levin (@golanlevin)

![Plot by Golan Levin (@golanlevin)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/5_plot_bubblewalker_3628.gif) 
[![5_plot_bubblewalker_3628.gif](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/5_plot_bubblewalker_3628_i.jpg)](demo/5_plot_bubblewalker_3628_i.jpg)
 "Bubblewalker 3628" Plot by Golan Levin (@golanlevin)

![Riso by Alex Barsky (@zinehug)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/6_riso_zinehug_anim.gif) 
[![6_riso_zinehug_workshop_i.jpg](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/6_riso_zinehug_workshop_i.jpg)](demo/6_riso_zinehug_workshop.jpg) 
 Risograph by Alex Barsky ([@zinehug](https://www.instagram.com/zinehug))

![Riso by Alex Barsky (@zinehug)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/7_riso_zinehug_clay.gif) 
[![7_riso_zinehug_clay_i.png](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/7_riso_zinehug_clay_i.png)](demo/7_riso_zinehug_clay.png)
 Risograph by Alex Barsky ([@zinehug](https://www.instagram.com/zinehug))

![Riso by Zack Lydon (@zinehug)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/8_riso_zinehug_summoner.gif) 
[![8_riso_zinehug_summoner_i.jpg](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/8_riso_zinehug_summoner_i.jpg)](demo/8_riso_zinehug_summoner.jpg)
 "Summoner" Risograph by Zack Lydon ([@zinehug](https://www.instagram.com/zinehug))

![Riso by Kelli Anderson (@kellianderson)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/9_riso_kellianderson.gif) 
[![9_riso_kellianderson_i.jpg](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/9_riso_kellianderson_i.jpg)](demo/9_riso_kellianderson.jpg)
 "A" Risograph by Kelli Anderson ([@kellianderson](https://www.instagram.com/kellianderson/))

![Cyanotype by Kelli Anderson (@kellianderson)](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/10_cyano_kellianderson.gif)
[![10_cyano_kellianderson_i.png](https://raw.githubusercontent.com/golanlevin/plottimation/main/doc/10_cyano_kellianderson_i.png)](demo/10_cyano_kellianderson.png)
 Cyanotype by Kelli Anderson ([@kellianderson](https://www.instagram.com/kellianderson/))

<!--

References:

* [Spectrolite Riso Animation](https://spectrolite.app/how-to/art-and-animation/riso-animation)

-->

plottimation

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README