This is a simple port to Javascript from the Glitch-This cli-program made by TotallyNotChase.
The ImageGlitcher class holds all the original methods and require only changes on the pixels buffers parameters.
I just though it was fun to have it applied to an HTML5 video object , so the glitch is applied per-frame on realtime.
You could just change the default Big Buck Bunny video to your own, as long as it is browser-valid, and change the glitch values on the fly.
Have fun ;)
Live browser demo can be checked in the Github Pages.
The ImageGlitcher methods expect a Javascript object as:
let image_data = {
input : ctx_a.ImageData.getImageData(0,0,w,h), // ImageData object obtained from Source canvas context
output: ctx_b.ImageData.getImageData(0,0,w,h),// ImageData object obtained from Destination canvas context
width : w, // Width of the source image
height: h // Height of the source image
};
The functions overwrite the pixel data on the output variable.
If running on Big Buck Bunny we will go from this:
To this glitched outcome:
