映画や CM の CG でお馴染みのモルフィングの簡易版で、 全自動で輪郭のワープと内側のディゾルブを行います (普通のモルフィングは制御線の設定が必要です) 。 そのため、適切な画像を用意するだけでモルフィング (もどき？) が簡単にできる反面、意図した通りに変形しない、 そのため変形がぎこちないという欠点はあります。 尚、ディゾルブ機能の方は普通のディゾルブです。
一括ダウンロードをクリックすると、ZIP形式の圧縮ファイルがダウンロードできます。 解凍して使ってください。 含まれているファイルは、以下のものです。
このプログラムを使うには、
を用意します。
HTMLファイルは、サンプルページをコピーして書き換えると良いでしょう。
プログラムの呼び出し部分は以下のようになっています。
window.addEventListener('load',function(){
initMorphing(['ron.jpg','foo.jpg'],
{waitTime:2000,morphTime:5000,threshold:40,type:'morphing'});
});
順に説明します。| パラメータ | 内容 |
|---|---|
| initMorphing | Morphing.js内の初期化関数です。 |
| 第1引数 | 画像ファイルの名称を格納した配列です。 変形は1→2→・・・（最後）→1→・・・と変化します。 |
| 第2引数 | 以下の各種パラメータを連想配列の形で指定します。 |
| waitTime | 変形と変形の間で画像を保持する時間 (単位はミリ秒) です。 この場合、２秒待ってから次の変換を始めることになります。 設定しない場合のデフォルト値は2000です。 |
| morphTime | 1回の変形にかける時間です。 設定しない場合のデフォルト値は2000です。 |
| threshold | 背景色を識別するためのの閾値です。
JPEGでは画像に誤差が生じ輪郭がぼやけるため、少々凝った判別をしています。
このプログラムでは画像の左上の隅の色を背景色とします。
それぞれの画素について、 sqrt((画素の Red - 背景の Red)2 + (画素の Green - 背景の Green)2 + (画素の Blue - 背景の Blue)2) を計算します（ Red, Green, Blue はそれぞれ 0 〜 255 ）。 この値がthresholdより小さい部分を背景、 大きい部分を対象内部と判定します。 設定しない場合のデフォルト値は40です。 また、ディゾルブの場合はこの値は関係ありません。 |
| type | モルフィングとディゾルブを切り替えるものです。 morphingでモルフィング、dissolvingでディゾルブになります。 設定しない場合のデフォルトはモルフィングです。 |
モルフィングの場合、対象物と背景を分ける必要があります
（ディゾルブでは必要無し）。
プログラムでは左上の隅の色を背景色として認識しますので、
対象の周りを同じ色で包む必要があります。
thresholdを調節すれば、多少背景色が変化しても大丈夫ですが、
基本は背景は単一色だと思って下さい。
また、背景色には対象物に含まれない色を使ってください。
例えば車の背景を黒くすると、
タイヤは背景と認識される可能性が高くなります。
２つの画像の大きさは、そろえた方が見た目が良いでしょう。
必ず一致させる必要があるわけではありませんが、見た目は悪くなります
(サンプルでも幅が少し違います) 。