Color detect

I originally set out to create a offset effect, where one color is slightly offset from the rest of the image, to mimic a misprint. I knew that I had to seperate colors and find a target, and found that l*a*b was the best color space to do that (rgb is too inconstant). In the end, I found three possible effects as well

original work


borrowed from Bailey and Cunningham, but helped me see how warp can be crated by sampling different parts of the same image.

2d Noise Warp

my first attempt at incorperating value noise into image processing: creates more of an effect where the image is 'bent' and blurred. Not that awesome :(. leans heavilty on noise functions borrowed from thebookofshaders.com


this code more or less takes the long way around to apply a blur matrix to an image, by defining all the offsets and sampling from each one manually to create the destination effect!!!


this one is pretty simple: just invert the colors on an image


i liked the effect of adding grain to an image, so I found some code to do that. not a lot of original stuff, but I fixed some problems with the original, like the fact that it created an image that was way too bright. also clamp doesn't seem to work as expected


Refined Version of Noise Warp

Pixel Art

creates pixel art like effect!!!

Special thanks to Graphics Shaders: Theroy and Practice (2nd ed.) by Bailey and Cunningham for reference and inspiration. Also to WebGlFundamentals for help with the WebGL pipeline