雨の日の窓の風景をJavascriptで再現する方法

ガラス窓に落ちる雨のしずくが、やがてその向うの風景をデフォルメさせつつ流れ落ちていく雨の日の情景をJavascriptだけで再現しています。

デモはこちらからどうぞ。
http://maroslaw.github.io/rainyday.js/demo1.html

仕組みとしては元の画像からぼやかしたレイヤを作り、そこに凹レンズのエフェクトをかけた雨粒を乗せているというものです。

その他サンプルはこちらから見ることができます。ソースコードはこちらのGitHubで公開されています。
rainyday.js

関連記事

映画「マトリックス」の「あの画面」を600バイト以下のJavascriptで再現 - DNA

あのトラウマがよみがえる……！Internet Explorerの「あのエラー」をJavaScriptで見事に再現 - DNA

スタイリッシュでインタラクティブなワードクラウドを実現するJavascript「d3-cloud」 - DNA

HTML・CSS・JSを駆使してスター・ウォーズのオープニングを完全再現 - DNA

Webコンテンツのメインを張るのはFlashかそれともHTML5か、とうとうブラウザ上で「直接対決」が実現 - DNA

ケン（ストリートファイターⅡ）の必殺技をCSS3で完全再現 - DNA