PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility. As a framework, PixiJS is a fantastic tool for authoring interactive content.
Pixi.js is a large and powerful library that gives you the ability to manipulate WebGL filters and shaders to give your projects next-level visual fidelity and performance. In a project that I built recently, I wrote functions that enable the user to manipulate and distort images in a small side-scrolling minigame in real time.
I will not be diving into the specifics that are already covered by the Pixi docs in this piece. You can find the steps to begin your own Pixi project here.
Assuming you have your PIXI.Application set and rendered on your page. You’ll want to create a set of variables min, max, list and increment. These variables will inform the function later on how to distort the images.
What animateRGB() does when it’s called is that it passes filter names into the ticker. You’ll want to create functions to create and destroy the tickers to pass in your animation filters.
I will continue to update this post in the future as I uncover more ways to manipulate images in Pixi’s powerful WebGL renderer.
