javascript - JavaScript 中的单色抖动 (Bayer, Atkinson, Floyd–Steinberg)

Question

我正在玩 HTML5 中的网络摄像头过滤器。得到一个Atkinson dither非常适合那种老式 Mac 的感觉。

Live | Code

现在我正在尝试为 1989 Gameboy 的感觉制作拜耳有序抖动选项。

我read up on the algorithm ，但我无法将此伪代码转换为 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

有没有 AS3、PHP 或 JS 的示例？你能解释一下 threshold_map_4x4[x mod 4][y mod 4] 发生了什么吗？

---

(用 Meemoo Gameboy GIFerizer 制作)

想通了。在维基百科中它说“例如，在单色渲染中，如果像素值(缩放到 0-9 范围内)小于矩阵相应单元格中的数字，则将该像素绘制为黑色，否则，将其绘制为白色”在 js 中，我通过平均当前像素 (0-255) 和 map 的值 (15-240) 并将其与阈值(通常为 129)进行比较得到了很好的结果:

var map = (imageData.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2;
imageData.data[currentPixel] = (map < threshold) ? 0 : 255;

这是我使用不同算法的整个单色函数:

var bayerThresholdMap = [
  [  15, 135,  45, 165 ],
  [ 195,  75, 225, 105 ],
  [  60, 180,  30, 150 ],
  [ 240, 120, 210,  90 ]
];

var lumR = [];
var lumG = [];
var lumB = [];
for (var i=0; i<256; i++) {
  lumR[i] = i*0.299;
  lumG[i] = i*0.587;
  lumB[i] = i*0.114;
}

function monochrome(imageData, threshold, type){

  var imageDataLength = imageData.data.length;

  // Greyscale luminance (sets r pixels to luminance of rgb)
  for (var i = 0; i <= imageDataLength; i += 4) {
    imageData.data[i] = Math.floor(lumR[imageData.data[i]] + lumG[imageData.data[i+1]] + lumB[imageData.data[i+2]]);
  }

  var w = imageData.width;
  var newPixel, err;

  for (var currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {

    if (type === "none") {
      // No dithering
      imageData.data[currentPixel] = imageData.data[currentPixel] < threshold ? 0 : 255;
    } else if (type === "bayer") {
      // 4x4 Bayer ordered dithering algorithm
      var x = currentPixel/4 % w;
      var y = Math.floor(currentPixel/4 / w);
      var map = Math.floor( (imageData.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2 );
      imageData.data[currentPixel] = (map < threshold) ? 0 : 255;
    } else if (type === "floydsteinberg") {
      // Floyd–Steinberg dithering algorithm
      newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
      err = Math.floor((imageData.data[currentPixel] - newPixel) / 16);
      imageData.data[currentPixel] = newPixel;

      imageData.data[currentPixel       + 4 ] += err*7;
      imageData.data[currentPixel + 4*w - 4 ] += err*3;
      imageData.data[currentPixel + 4*w     ] += err*5;
      imageData.data[currentPixel + 4*w + 4 ] += err*1;
    } else {
      // Bill Atkinson's dithering algorithm
      newPixel = imageData.data[currentPixel] < threshold ? 0 : 255;
      err = Math.floor((imageData.data[currentPixel] - newPixel) / 8);
      imageData.data[currentPixel] = newPixel;

      imageData.data[currentPixel       + 4 ] += err;
      imageData.data[currentPixel       + 8 ] += err;
      imageData.data[currentPixel + 4*w - 4 ] += err;
      imageData.data[currentPixel + 4*w     ] += err;
      imageData.data[currentPixel + 4*w + 4 ] += err;
      imageData.data[currentPixel + 8*w     ] += err;
    }

    // Set g and b pixels equal to r
    imageData.data[currentPixel + 1] = imageData.data[currentPixel + 2] = imageData.data[currentPixel];
  }

  return imageData;
}

我会很感激优化提示。

Answer 1

这是我所有的单色抖动函数，可用作网络 worker :https://github.com/meemoo/meemooapp/blob/master/src/nodes/image-monochrome-worker.js

使用网络摄像头进行现场演示:http://meemoo.org/iframework/#gist/3721129