「ブレンドモード」
～マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典（89）

解説

　ブレンドモードは、画像の合成方法です。描画モードや、合成モードなどとも呼ばれます。画像編集ソフトによく見られる機能です。

　画像を合成する（重ね合わせる）際に、2つの画像の画素を、どのように計算して合成するか。その方法は、いろいろあります。単純に上の画像の画素だけを採用する方法。明るい方の画素を採用する方法。暗い方法の画素を採用する方法。そういった単純な方式だけでなく、計算によって画素を求める方法が多数存在しています。

• 上の画像の画素の値をX
• 下の画像の画素の値をY
• 画素の値を0～1とする

通常の合成

計算式　x

比較（暗）

計算式　x < y ? x : y

比較（明）

計算式　x > y ? x : y

　有名な方法としては、暗くなる乗算、明るくなるスクリーンなどがあります。

乗算

計算式　x * y

スクリーン

計算式　1 - (1 - x) * (1 - y)

サンプル

　ブレンドモードを体験するコードを、JavaScriptで簡単に書いてみます（※このソースコードはUTF-8形式で保存してください）。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>「ブレンドモード」のサンプル</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script type="text/javascript">
        // 変数の初期化
        var sz = 5, SZ = sz * sz * 3;
        var bg = [];
        for (var i = 0; i < SZ;) {
            bg[i] =   0 + (255 * i / SZ) | 0; i ++;
            bg[i] =   0 + (255 * i / SZ) | 0; i ++;
            bg[i] =   0 + (255 * i / SZ) | 0; i ++;
        }
        var frnt = [];
        for (var i = 0; i < SZ;) {
            frnt[i] = (255 * i / sz) % 256 | 0; i ++;
            frnt[i] = (127 * i / sz) % 256 | 0; i ++;
            frnt[i] = ( 63 * i / sz) % 256 | 0; i ++;
        }

        // 比較(暗) 
        var dark = [];
        for (var i = 0; i < SZ; i ++) {
            dark[i] = bg[i] < frnt[i] ? bg[i] : frnt[i];
        }

        // 比較(明) 
        var light = [];
        for (var i = 0; i < SZ; i ++) {
            light[i] = bg[i] > frnt[i] ? bg[i] : frnt[i];
        }

        // 乗算
        var mlt = [];
        for (var i = 0; i < SZ; i ++) {
            mlt[i] = (bg[i] * frnt[i] / 255) | 0;
        }

        // スクリーン
        var scrn = [];
        for (var i = 0; i < SZ; i ++) {
            var b = bg[i] / 255;
            var f = frnt[i] / 255;
            scrn[i] = ((1 - (1 - b) * (1 - f)) * 255) | 0;
        }

        // DOM準備後に出力
        $(function() {
            out(bg,    "背景");
            out(frnt,  "前景");
            out(dark,  "比較(暗)");
            out(light, "比較(明)");
            out(mlt,   "乗算");
            out(scrn,  "スクリーン");
        });

        // 出力用関数
        function out(arr, nm) {
            // canvasを作成
            var cnvs = $('<canvas width=5 height=5>').get(0);
            var ctx = cnvs.getContext("2d");

            // 画素の取得
            var idt = ctx.getImageData(0, 0, sz, sz);
            var d = idt.data;

            // 描画
            for (var i = 0; i < 25; i ++) {
                var P = i * 4, p = i * 3;
                d[P + 0] = arr[p + 0];
                d[P + 1] = arr[p + 1];
                d[P + 2] = arr[p + 2];
                d[P + 3] = 255;
            }

            // 画素の反映
            ctx.putImageData(idt, 0, 0);

            // 表示
            $("body")
            .append($(cnvs).css({width: "50px", height: "50px"}))
            .append(" " + nm + "<br>");
        }
    </script>
    <style>
    /* ドット絵風表示 */
    canvas {
      -ms-interpolation-mode:nearest-neighbor;
      image-rendering:-webkit-optimize-contrast;
      image-rendering:-moz-crisp-edges;
      image-rendering:-o-crisp-edges;
      image-rendering:pixelated;
    }
    </style>
  </head>
  <body></body>
</html>

出力結果

フィードバックお待ちしております！

　ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。