← Back to my site

Modular Modifier

Drag and drop a GIF or image onto the page,
or click here to open the file selector.



Effects

Click a button above to add an effect.

How-To

Click buttons in the Effects palette to add modifiers to the processing sequence. Once an image is loaded, the Process button will run the sequence on it from top to bottom and display the result. The original image is kept so you can adjust the sequence without having to keep uploading - pressing Process again will re-process the original.

Many of the modifiers are designed to work with animated images. If you've uploaded a static image, you can use Duplicate Frame to get more frames to work with, though this may not produce any visible effect with some modifiers as they're designed with motion in mind.

This tool is designed for modern browsers and may be resource-intensive. Internet Explorer won't work, but Edge should be fine.

Performance

Each modifier receives and processes the output from the previous modifier. The less image data each one has to work with, the faster the processing will go, so in some cases the order of modifiers can be optimized.

Also, while I've tried to add checks to prevent the tool from being overloaded by too much image data, it's best to start with fewer modifiers and then add more gradually.

Credits

Libraries and resources used: omggif, by Dean McNamee; gif.js, by Johan Nordberg; JSZip, by Stuart Knightley, David Duponchel, Franz Buchinger, and António Afonso; FileSaver.js, by Eli Grey; Javascript JPEG Encoder, by Adobe Systems Incorporated and Andreas Ritter; C64 TrueType, by Style; IBM VGA8, by VileR; Terminal Vector, by Bitstream Inc. and George Yohng.