Chapter 75

セピア調

miku
miku
2021.11.19に更新
このチャプターの目次

実行例


解説

画像をレトロ風な茶褐色の色調に変える処理をセピア調と呼ぶ。

// セピア調として掛け合わせる定数
R = R * 0.393 + G * 0.769 + B * 0.189;
G = R * 0.349 + G * 0.686 + B * 0.168;
B = R * 0.272 + G * 0.534 + B * 0.131;

// 計算結果が色の最大値を超えないようにする
R = min(255, R);
G = min(255, G);
B = min(255, B);

セピア調としてよく利用される定数が上記で、RGB それぞれに掛け合わせて計算する。掛け合わせる定数の合計値が 1 を超えているので、色の最大値を超えないように調整を行う。

コード例

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 nr = min(255, r * 0.393 + g * 0.769 + b * 0.189);
      const ng = min(255, r * 0.349 + g * 0.686 + b * 0.168);
      const nb = min(255, r * 0.272 + g * 0.534 + b * 0.131);

      setPixel(x, y, [nr, ng, nb]);
    }
  }

  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];
}