Chapter 73

グレースケール

miku
miku
2021.11.19に更新

実行例


解説

画像を無彩色な状態にする、つまり灰色の明暗だけで表現した形式にすることをグレースケールと呼ぶ。この灰色の明暗には白や黒も含まれる。無彩色というのはRGBで考えると、R, G, Bそれぞれの値が同じで、白(#ffffff), 黒(#000000)、灰色(#232323 や #777777 など) が該当する。

例えば #123456 という色が入っているとして、それをグレースケールのアルゴリズムで変換すると、#333333 のような無彩色に変わる。

グレースケールのアルゴリズムは色々と存在するが、ここでは 2 つの手法を紹介する。

単純平均

(R + G + B) / 3

RGBの平均値をRGBそれぞれに代入する方法。グレースケールとしての性能は低いが、計算方法自体は単純である。

ITU-R BT.601

0.299 * R + 0.587 * G + 0.114 * B

ITU-R BT.601はテレビ放送用の規格で、グレースケールの変換には上記の定数が使用される。

コード例

let img;

function preload() {
  img = loadImage("./0.png");
}

function setup() {
  createCanvas(img.width, img.height);

  img.loadPixels();

  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      const pixel = getPixel(x, y);
      const r = red(pixel);
      const g = green(pixel);
      const b = blue(pixel);

      const gray = 0.299 * r + 0.587 * g + 0.114 * b;

      setPixel(x, y, [gray, gray, gray]);
    }
  }

  img.updatePixels();
  image(img, 0, 0);
}

function getPixel(x, y) {
  const i = (y * img.width + x) * 4;
  return [
    img.pixels[i],
    img.pixels[i + 1],
    img.pixels[i + 2],
    img.pixels[i + 3],
  ];
}

function setPixel(x, y, pixel) {
  const i = (y * img.width + x) * 4;
  img.pixels[i + 0] = pixel[0];
  img.pixels[i + 1] = pixel[1];
  img.pixels[i + 2] = pixel[2];
}