Spotlight posts will explore selected Cavalry effects — what they can do and how they work. This time we are focusing on the Dithering filter. I’m a big fan of this look, so I was pleased to see them integrated into Cavalry.
Related resources to this post are in the box below:
In computer graphics, dithering is a technique that uses noise to help overcome the visual limitations of a restricted colour palette. Mathematical patterns are used to trick the eye into seeing graded shading (particularly at a small scale).
Clockwise from top-left: Base image, Atkinson, Burkes, 4×4 Bayer. These examples were created using the Photoshop plugin Dithertone by Doron Supply.
Early computers could only display 2, 4, 16, or 256 colours. In video games, for example, dithering could be deployed to add texture and tonal blends which defied these small palettes.
Clockwise from top-left: Base image, Nintendo Game Boy (4 colour), Sinclair ZX Spectrum (8 colour), Commodore 64 (16 colour). These examples were created using Dither Me This by doodad.dev; each was exported at a width of 147px and then upscaled x4 to illustrate the patterns.
Static .gifs have never produced smooth gradations like a .jpg file can; but their dithering capabilites can achieve tiny file sizes, which was very advantageous when working with limited bandwidth or memory.
Dithering Filter
Note that you can apply this filter to bitmap assets and static vectors (including Cavalry shapes). Import or draw something onto your scene, press Cmd/Ctrl+. and search for ‘dithering’. Double click on the Dithering Filter result to drop it into your layer stack. Now connect it to your graphic layer.
For this post I am going to use a test card image like this:
Test card.
As you can see, it will demonstrate a vividly coloured photograph, solid tones, simple patterns, and also a graded blend.
The Dithering filter attribute window will look something like this.
Let’s run through some of the editable attributes before we experiment with the filter.
Blend Mode
Here you can choose blending modes such as Overlay, Multiply, and Screen; as in Photoshop and in CSS. This is setting how the filter interacts with the image file. The default is Replace, where it literally only shows the reinterpreted pixels — we will stick with that.
Mode
The default here is Blend. Not to be confused with the option above! But as you can imagine, the result is a mixture of the filter and the source graphic or image. For me, things get much more interesting when you change the Mode to Classic or to Greyscale. Note that you can change the input colours on the Colour Palette sub-panel, so for example your greyscale output can be set to two colours of your choice.
You will see that the Greyscale mode has some distinct sub-styles of its own.
The colour palette subsection.
Pattern
Bayer is the dithering pattern that you will be most familiar with here, but the others such as Bricks, and Stripes can also give some interesting results and are worth experimenting with.
Size, Contrast, and Bias
These settings influence the noise levels and how pixel values are rounded off compared to their neighbours. Remember that you can keyframe these values!
Static experiments
Here we are demonstrating how manipulating some of the attributes affects the visual output. The noted values are based upon a scene of 1920×1080 pixels. Note these videos have been exported at 50%.
Adjusting Contrast
Test card static image. Mode: Classic / Size: 4 / Contrast: 0.5–1.0–1.5 / Bias: 1.0.
Adjusting Bias
Test card static image. Mode: Classic / Size: 4 / Contrast: 0.75 / Bias: 0.5–1.0–1.5.
Adjusting Size
Test card static image. Mode: Greyscale / Size: 3–9–12 / Contrast: 0.9 / Bias: 1.0.
Footage experiments
It&rsuo;s really fun to play with this filter on video footage. If we bring the Size value down a little you can see the patterns a bit better. Adjust the Contrast and Bias values to your taste. You may also find it useful to add a Levels filter to your footage, to adjust the tones of your footage and see how that affects things in real-time.
Video footage. Mode: Classic / Size: 2 / Contrast: 0.9 / Bias: 1.0.
Greyscale mode footage
Video footage. Mode: Greyscale (Average) / Size: 2 / Contrast: 1.0 / Bias: 0.8.
—
More details on this and other effects (filters and shaders) can be found on the Cavalry documentation site. The test image photograph is by Josué Sánchez on Unsplash and the original video file is by Pavel Danilyuk on Pexels.
