webgbcam

A simple Game Boy Camera-style filter made in HTML5 and JavaScript

Play with it here!

Disclaimer

As of this commit, this is simply a direct copy of the files currently in my webserver. Eventually, I will clean things up and make improvements to the code, but since there has been interest in looking at the code, I'm mirroring the files here.

A quick explanation of how it all works

The concept of Bayer dithering was hard for me to grasp at first, but after a few different projects getting acquainted with it, I've found an easy way to apply it, which can be used in a procedural setting like JS Canvas filters, or shaders.

Basically, you start with an array of pixels, then grayscale them and optionally apply simple arithmetics to apply gamma and contrast adjustments. Then, you offset those by the value in the Bayer matrix corresponding to that pixel, giving it a patterned look. Finally, you divide and quantize the values until all pixels each have only one of four possible values. This will give you a dithered pixel art look. After this, my code applies a palette swap for those 4 values back to RGB space.

Acknowledgements

Thanks to Christine Love for making the Interstellar Selfie Station back in 2014. It helped me a lot with my dysphoria and was the inspiration to learning how Bayer dithering works in order to remake her camera app once it was no longer available in app stores.

Thanks to Joel Yliluoma's arbitrary-palette positional dithering algorithm page, which was the first analysis of ordered dithering that I found comprehensible and used to implement the filter in different applications.

Thanks to lospec.com for making a list of palettes available, many of which were used in this project.

Thanks to gbdev.io for information on the Game Boy Camera hardware, used for accurate filtering.