Chapter 76

疑似カラー

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

実行例


解説

  1. ピクセルの色から明るさを計算する。
  2. 計算した明るさの範囲を色相(青から赤)の範囲に変換し、ピクセルの色としてセットし直す。

画像の明るさを確認する場合、たとえばグレースケールの画像に変換するという方法がある。

ただ、グレースケールの画像だと微妙な明るさの違いが分かりづらいので、その明るさから更に色相のようなカラーパターンで色を置き換える疑似カラーという手法を紹介する。

各ピクセルをグレースケールに変換後、その明るさに応じて色相上の色に置き換えるのだが、色相の範囲を最小~最大にしてしまうと、暗い色も明るい色も赤色となり、明暗の区別が付かなくなるので、色相の範囲は赤~青までに設定する。

暗い色を青に、明るい色を赤にすると疑似カラーとして見やすいので、明るさが小さいほど色相の値を大きく、明るさが大きいほど色相の値を小さくする。

コード例

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;
      const hue = floor(map(gray, 0, 255, 240, 0));
      const hsb = color(`hsb(${hue}, 100%, 100%)`);
      setPixel(x, y, [red(hsb), green(hsb), blue(hsb)]);
    }
  }

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