Introduction
In order to achieve better traffic recommendations for short video campaigns, it is crucial to avoid duplication to prevent the system from flagging the content as non-original.
This requires deduplicating the video. Common methods include flipping, cropping, and overlaying materials.
Recently, I encountered a similar requirement, and after thinking it over, I realized that I could use an algorithmic filter to process each frame of the video. This approach is much more efficient than overlaying other video frames with 1% transparency.
So, I decided to explore the algorithmic filter built into Pixi.js’s ColorMatrixFilter. This filter works by altering the color of the image through matrix transformations, which is quite different from filters like blur or mosaic.
I checked the official documentation, and there are more than 20 built-in methods. The variety is quite broad, but there are no visual examples, just simple text descriptions, which are not very helpful.
This isn’t beginner-friendly, and for me, it made it harder to decide which filter effect to use.
As a result, I spent some time creating a demo to showcase the general effect of each filter.
Loading and Displaying an Image
The following content is based on the latest version of Pixi.js, version 8.x.
This article will focus on introducing the ColorMatrixFilter, so the section on how to set up PixiJS will be brief. You can copy the following HTML into any IDE and open it in a browser.
<!doctype html>
<html>
<head>
<script src="https://pixijs.download/release/pixi.min.js"></script>
</head>
<body>
<script type="module">
const url = "https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg"
const width = 640;
const height = 360;
// Create the application helper and add its render target to the page
const app = new PIXI.Application();
await app.init({ width, height })
document.body.appendChild(app.canvas);
// Create the sprite and add it to the stage
await PIXI.Assets.load(url);
let sprite = PIXI.Sprite.from(url);
sprite.width = width;
sprite.height = height;
app.stage.addChild(sprite);
const filter = new PIXI.ColorMatrixFilter();
sprite.filters = [filter];
// Apply effect
filter.blackAndWhite();
</script>
</body>
</html>
In the code above, we applied a black-and-white effect. What is blackAndWhite effect? well, it just is the black-and-white effect, which is quite straightforward to understand. If everything is set up correctly, you should see the result as shown below:
Example Usage of ColorMatrixFilter
There’s not much to say about common filters like greyscale, brightness, contrast, hue, saturate, and sepia.
I’ll explain a few of the more unique filter methods that are less commonly seen.
Now, we will showcase them one by one. What you need to do is replace the code in the HTML (filter.blackAndWhite();) with the code for each case below.
greyscale
filter.greyscale(1);
greyscale is not purely black and white, nor is it the same as the grayscale() filter effect in CSS.
In Pixi.js, greyscale doesn’t transition between color and grayscale but instead displays grayscale images with varying brightness levels.
The greyscale(1) effect looks like this—it appears a bit too bright.
Meanwhile, the closer the value set is to 0, the closer the image will be to black. If the value is set to 0, the image will be completely black.
browni
filter.browni(true);
The “Brownie” effect usually refers to a vintage filter effect with a brownish tint, giving the image the look of an old photo or a nostalgic feel. This effect works by adjusting the image’s colors to add warm tones—typically shades of brown, yellow, and red—to mimic the look of old film.
When using this method, set the parameter to true, or the image will appear completely red.
kodachrome
filter.kodachrome(true);
The Kodachrome filter is a digital effect that emulates the look of Kodachrome film, a classic color reversal film introduced by Kodak in the 1930s and known for its rich, vibrant colors, high contrast, and unique warmth.
When using this method, set the parameter to true, or the image will appear completely white.
lsd
filter.lsd();
The lsd is a digital effect inspired by the visual distortions associated with psychedelic or hallucinogenic experiences, often aiming to create a vibrant, surreal, and mind-bending look. LSD (lysergic acid diethylamide) is a psychedelic substance, and an LSD-inspired filter emulates some of the visual effects often described by users, such as heightened colors, intense contrast, unusual color shifts, and kaleidoscopic patterns. This effect is commonly used in graphic design, music videos, and digital art to convey a trippy or dreamlike atmosphere.
polaroid
filter.polaroid();
A Polaroid filter is a digital effect that replicates the look and feel of images taken with classic Polaroid instant cameras. Polaroid photos are known for their characteristic aesthetic, which includes soft colors, a slight fade, high contrast, and sometimes a slight vignette or blur. Polaroid filters are often used to give photos a vintage, nostalgic, and instantly recognizable feel.
technicolor
filter.technicolor(true);
A Technicolor filter is a digital effect that simulates the look of films produced with the classic Technicolor process, a color motion picture technology famous for its vivid, saturated colors, especially prominent from the 1930s to the 1950s. This look is characterized by bold, highly saturated colors, particularly in reds, greens, and blues, with high contrast and an almost “painted” appearance. It’s commonly used to give digital images or videos a nostalgic, old-Hollywood look.
When using this method, set the parameter to true, or the image will appear completely pink.
vintage
filter.vintage(true);
A vintage filter is a digital effect that gives photos or videos a retro, old-fashioned look, mimicking the style of aged film or photographs from previous decades. Vintage filters are commonly used to evoke nostalgia, add character, or give digital media a unique, antique quality.
When using this method, set the parameter to true, or the image will appear completely white.
What does the multiply parameter mean?
In all filter methods, there is a parameter called multiply, which indicates whether to combine the filter effects.
For example, in the code below, brightness and contrast are applied together
filter.brightness(1);
filter.contrast(1, true);
While in the code below, the contrast filter will completely override the previously applied brightness filter.
filter.brightness(1);
filter.contrast(1);
Interactive Demo
Finally, I’ve provided an interactive demo below for you to explore.