I'm playing with webcam filters in HTML5. Got an Atkinson dither working pretty well for that old-school Mac feeling.
Now I'm trying to make a Bayer ordered dithering option for a 1989 Gameboy feeling.
I read up on the algorithm, but I'm having trouble converting this pseudocode to JavaScript:
for each y
for each x
oldpixel := pixel[x][y] + threshold_map_4x4[x mod 4][y mod 4]
newpixel := find_closest_palette_color(oldpixel)
pixel[x][y] := newpixel
Are there any examples out there in AS3, PHP, or JS? Could you explain what is happening with threshold_map_4x4[x mod 4][y mod 4]?
(made with the Meemoo Gameboy GIFerizer)
Figured it out. In Wikipedia it says "For example, in monochrome rendering, if the value of the pixel (scaled into the 0-9 range) is less than the number in the corresponding cell of the matrix, plot that pixel black, otherwise, plot it white." In js I got good results by averaging the current pixel (0-255) and the map's value (15-240) and comparing it to the threshold (normally 129):
var map = (imageData.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2;
imageData.data[currentPixel] = (map < threshold) ? 0 : 255;
Here is my whole monochrome function with different algorithms:
var bayerThresholdMap = [
[ 1