Chapter 82

ハーフトーン

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

実行例


解説

ハーフトーンは画像内の範囲ピクセル、たとえば10x10ピクセルのような範囲の明るさ平均を算出し、その値をもとに特定の形で描画し直す処理である。上記画像では明るさが大きいほど、大きい白円を描く仕組みになっている。少ない色で多くの色があるように見えるディザリングの一種でもある。ハーフトーンのアルゴリズムは、原理的にはモザイクとほぼ同じになる。

コード例

const range = 10;
let img;

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

function setup() {
  createCanvas(windowWidth, windowHeight);
  img.loadPixels();

  for (let y = 0; y < img.height; y += range) {
    for (let x = 0; x < img.width; x += range) {
      let v = 0;
      let count = 0;

      for (let yy = 0; yy < range; yy++) {
        for (let xx = 0; xx < range; xx++) {
          const ty = y + yy;
          const tx = x + xx;
          if (ty < img.height && tx < img.width) {
            const color = getPixel(tx, ty);
            const r = red(color);
            const g = green(color);
            const b = blue(color);
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;
            v += gray;
            count++;
          }
        }
      }

      v /= count;

      const d = map(v, 0, 255, 0, range);
      circle(x + range / 2, y + range / 2, d);
    }
  }
}

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