Lost your Modular Modifier tab? Click here to go back.

Modular Modifier Examples

Making a picture trippy

Input and output

Effects sequence

[{"id":"duplicate-frame","options":{"frames":"32"}},{"id":"palette-cycle","options":{"palette":"rainbowStrobe","steps":"16","reverse":false,"keepBlack":false,"brightnessAdjust":"0"}}]

Explanation

Palette Cycle works by converting frames to greyscale and then cycling colors across each band of brightness. The number of colors in the palette is the same as the number of frames, so after the animation loops the colors end up where they were at the start.

The image here works great because there's a very defined gradient from bright to dark. Because it's a still image, we need additional frames to work with, otherwise the palette would only have 1 color. 32 frames will give us 32 colors, which is pretty smooth looking.

A good place to start with brightness steps is 16. And since the palette we're using has black in it already, we don't want to keep the very brightest areas black during the entire animation.

Carlton dancing, forever

Input and output

Effects sequence

[{"id":"travel","options":{"horizontal":"0","vertical":"-1"}},{"id":"bipolarize","options":{"diameter":"400","centerpointPositions":"50","scale":"8","preserveHorizontals":false}}]

Explanation

Bipolarize projects an image onto a bipolar coordinate plane. To make it look like the input image is traveling through the plane, we can use Travel:

With the image now looping upward through its animation, when projected it will look like it is circling the two foci. Even "scale" values will result in the centermost rings diverging, while odd values will result in one center ring that goes directly upward.

Low centerpoint position %s will require higher scale values to compensate. If you set it near 0-1, you'll likely need a scale in the 500+ range.

Checkerboard spiralizing a GIF

Input and output

Effects sequence

[{"id":"palette-cycle","options":{"palette":"retro","steps":"16","reverse":false,"keepBlack":true,"brightnessAdjust":"0"}},{"id":"double","options":{"direction":"3","count":"2","mirror":false,"frameOffset":"32"}},{"id":"double","options":{"direction":"1","count":"2","mirror":false,"frameOffset":"32"}},{"id":"spiralize","options":{"diameter":"500","tightness":"3","invert":false}}]

Explanation

First the GIF is run through Palette Cycle to get a rainbow effect. We want to run it through Spiralize, but this would result in a spiral of "COOL" turning into a spiral of "BEANS", and it would be mildly more interesting if the words weren't the same throughout:

So what we can do is use Double twice, once to the right and once downward, each time offsetting the animation by 32 frames (half the animation length). This results in the word animations being 2x2 checkerboarded and alternating:

When this gets fed to Spiralize, the desired effect is accomplished.

ASCII-fying a rare pepe

Input and output

Effects sequence

[{"id":"ascii-fy","options":{"lineLength":"40","style":"c64","backgroundMode":"2","drawFrame":true}}]

Explanation

This is just the ASCII-fy effect, so the process is straightforward. With a line length of 40, our input image is scaled down to 40 pixels wide, and for each pixel, the ASCII block that looks the closest from a distance is placed in the output.

Glitching a rotating orb GIF

Input and output

Effects sequence

[{"id":"slit-scan","options":{"mode":"1","reverse":false,"stripsPerFrame":"2"}},{"id":"rgb-shuffle","options":{"shufflePercent":"50","maxShuffleDistance":"3"}}]

Explanation

Slit-Scan provides a similar effect to when you record a propeller with a cell phone. The frame is divided into a number of "strips", where the first strip will take from frame 1, the next from 2, then 3, and so on. On the next frame it's 2, 3, 4. When a last frame is hit, the next strip gets pulled from the first frame again. So this can create a weirdly distorted animation.

After that's done, RGB Shuffle is run, which takes random red/green/blue subframes and swaps them with the subframes in nearby frames. This creates a glitchy effect, as if a video data stream is being scrambled.

Whisking away a McPoyle brother

Input and output

Effects sequence

[{"id":"slit-scan","options":{"mode":"1","reverse":true,"stripsPerFrame":"4"}}]

Explanation

This GIF works great for Slit-Scan because the background is static and the motion stays in the same area of the frame. This results in wispy hands and a distorted, screaming face. Nice!

Shaking a picture excessively

Input and output

Effects sequence

[{"id":"duplicate-frame","options":{"frames":"10"}},{"id":"shake","options":{"distance":"10","cropMode":"1"}},{"id":"box-swap","options":{"glitchPercent":"100","maxGlitches":"500","maxGlitchSize":"50","maxGlitchDistance":"25"}}]

Explanation

Shake requires multiple frames, so with a still image we can use Frame Duplicate to get a handful of frames to work with. Then Shake does its thing, with the crop set to crop empty areas. This makes it look more like the camera or object in the image is shaking, and not the image itself.

Then Box Swap runs, which takes random areas of the image and swaps boxes of pixels between them. The max swaps is set to 500, which makes it look pretty glitchy.

Spiralizing a standing wave

Input and output

Effects sequence

[{"id":"spiralize","options":{"diameter":"800","tightness":"5","invert":false}},{"id":"resize","options":{"longestSide":"400"}}]

Explanation

GIFs that can be tiled work really well with Spiralize, since the spiral transform keeps them tiled. For a bit of anti-aliasing, we create the spiral image at 800px, then use Resize to bring it down to 400px.