javascriptで画像処理(10)～水面に反射するような効果を画像に加えよう〜

いつの間にか10回目です。
ぶっちゃけるとすっかり更新を忘れるところでした。
３回目ぐらいで飽きるかと思ったんですが更新してない時も10アクセスぐらいは毎日あるみたいなんであと２～３回は頑張れたらいいなぁと思うやら思わないやら。

例によってOpenCVjsを使った画像処理です。
久しぶりなんで一応OpenCVjsの説明はこちらにあると知らせておきます。

書くネタが思いつかないんで以前にもやった「javascript 画像処理」で検索して、自分のブログより前にヒットするjavascriptの記事をマネして「それ、OpenCVjsでも出来るお！」って言ってやろうというひがみブログです。

今回のターゲットサイトはこちら。
ご覧の通り「水面に反射するような効果を画像に加える」処理です。

・
・
・
・

それ、OpenCVjsでも出来るお！

やってみたらこんな感じになりました。

reflection

ソースコードは以下です。

javascript部

function Reflection(imgId, iplImage){
//新しい画像領域 縦幅を読み込んだ画像の1.3倍にする
var newIplImage = cvCreateImage(iplImage.width, iplImage.height * 1.3);
var s = newIplImage.height - iplImage.height; //差分
var ys = 0.5; //y切片
var a = -ys/s; //傾き
for(var i = 0 ; i < newIplImage.height ; i++){
for(var j = 0 ; j < newIplImage.width ; j++){
for(var c = 0 ; c < 3 ; c++){
//そのままの座標の画素を取得
if(i < iplImage.height ){
newIplImage.RGBA[c + (j + i * newIplImage.width) * CHANNELS] =
iplImage.RGBA[c + (j + i * newIplImage.width) * CHANNELS];
}
//反転した座標の画素を取得
else{
var y = (i - iplImage.height); 
var nv = (a * y + ys) * iplImage.RGBA[c + (j + (iplImage.height - 1 - y) * newIplImage.width) * CHANNELS];
newIplImage.RGBA[c + (j + i * newIplImage.width) * CHANNELS] = nv;
}
}
}
}
//imgIdで指定したimgタグに画像を転送
cvShowImage(imgId, newIplImage);
}

久々なのでhtml部も載せます。

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="UTF-8">
        <title>OpenCVjs</title>
        <script type="text/javascript" charset="UTF-8" src = "javascript/opencv.js"></script>
        <script type="text/javascript" charset="UTF-8" src = "javascript/image_filter.js"></script>
                
        <script type="text/javascript" charset="UTF-8">
        DMY_IMG = "javascript/dmy.jpg";
        var iplImage = new IplImage();
</script>
    </head>
    
    <body>
    <h1>OpenCVjs</h1>
    <hr />
    <input type="file" id="file1" onClick="cvLoadImagePre(event, 'file1')" onchange="cvLoadImage(event, 'dispImage', iplImage, 800)">
    <br />
<input type="button" value="Reflection" onClick="Reflection('dispImage', iplImage)" />
<hr />
<img id="dispImage" src="">
</body>
</html>

一応コメントも書いてますけど、傾きだ～y切片～だと中二っぽいあたりが分かり辛いかもしれません。
ただ図を書いて説明するにはすでに眠いので今回はとりあえずマネできたということで…
質問とかあればいつでもして連絡ください。