CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/12/01 14:00

解説

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

 画像を合成する(重ね合わせる)際に、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>
出力結果
出力結果
フィードバックお待ちしております!

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



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5