ブラウザに雨を降らすことができるrainyday.jsを使ってみたよ!

ちょっと前に話題になった「rainyday.js」というスクリプトを最近知ったんですが、早速使ってみました。

rainyday.jsとは?

Marek Brodziak氏が開発したJavaScriptのライブラリで、かなりリアルに雨の水滴がブラウザに表示され、雨水が滴る様子まで再現することを可能とします。

HTML5のcanvas機能を使用してレンダリングしているんですが、本当に綺麗に表示されるので見事の一言です!ずっと見てられますねw

rainyday.js demo

公式サイトとgituhubのURLは下記になります。

ブラウザに雨を降らすことができるrainyday.jsを使ってみたよ!

ブラウザに雨を降らすことができるrainyday.jsを使ってみたよ!

対応ブラウザ

公式サイトを見ると対応ブラウザは下記となっています。

  • Internet Explorer 8 and below
  • Internet Explorer 9
  • Internet Explorer 10
  • Firefox 23 and below Firefox 24
  • Safari 5.1
  • Google Chrome 27 and below Google Chrome 28 Google Chrome 29 Google Chrome 30
  • Opera 11.60 Opera 12.00 Opera 12.16 Opera mobile Konqueror 4.10.5
  • Android 4
  • Chrome mobile
  • Safari mobile

上記以外に僕が確認したところ、下記も動作OKでした。

  • Win7のIE11
  • Win7/Mac OSX Yosemite及びEl Capitan‎のChrome、Firefoxそれぞれ最新版
  • MacのSafari最新版
  • iPhone6のChrome最新版とSafari最新版
  • Android4及び5

デモどおりの使い方

/dist/rainyday.min.js

を読み込んだ上で、

[javascript] <script>
function demo() {
var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;

engine.rain([
engine.preset(0, 2, 500)
]);

engine.rain([
engine.preset(3, 3, 0.88),
engine.preset(5, 5, 0.9),
engine.preset(6, 2, 1),
], 100);
}
</script>
[/javascript]

のようにscriptタグ内に記述するか、外部ファイルとして読み込みます。

その上で、bodyタグのonloadを指定します。


	&lt;body onload=&quot;demo();&quot;&gt;


	&lt;/body&gt;

こんな書き方もいけます

/dist/rainyday.min.js

を同様に読み込み、下記のような外部ファイルを用意します。
※僕のような素人が書いたので、冗長な書き方は直してくださいね。

これならbodyタグにIDを振らなくても動作します。

[javascript] $(function () {
// 4パターンの雨の表示方法をランダムで切り替える
var val = Math.ceil( Math.random()*4 );
if(val == 1) {
run1();
} else if(val == 2) {
run2();
} else if(val == 3) {
run3();
} else {
run4();
}
});

function run1() {
var image = document.getElementById('background');
image.onload = function() {
var engine = new RainyDay({
image: this,
position: 'fixed',
});
engine.rain([ [1, 2, 500] ]);
engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
};
image.crossOrigin = 'anonymous';
image.src = '/img/rain/img_rain_bg01.jpg';
}

function run2() {
…say anything…
}

function run3() {
…say anything…
}

function run4() {
…say anything…
}
[/javascript]

position: 'fixed'」オプションを付けることで、デフォルトのabsoluteから変更できました。

さらに、HTML内で好きなところに

&lt;img id=&quot;background&quot; alt=&quot;&quot; src=&quot;&quot; /&gt;

を記述します。bodyタグの直下じゃなくてもいいのです。

さらにcssはこんな感じ。


img#background {
  position: fixed;
  width: 100%;
  height: auto;
  border: 1px solid #fff;
  z-index: 0;
  top: 0;
  left: -100%;
}
canvas {
  width: 100%;
  height: auto;
  z-index: 1;
}

もしcanvasにidを付けたい場合は、「/dist/rainyday.min.js」を変更してくださいね。

img#backgroundをbodyタグの直下ではなく、好きなところに記述すると、多分元の画像と雨の降っている画像が2枚表示されてしまいます。

元の画像は非表示にしたいのですが、「display:none;」を指定すると雨の降っている画像まで非表示になってしまうので、「left: -100%;」で画面から非表示にしてみました。

「width: 100%;」と「height: auto;」を指定することで、画面いっぱいに表示します。

rainyday.jsのデモ 「ENDLESS RAIN」

僕が開発・運営している「おと風景」上に、

ENDLESS RAIN

という機能を実装してみました。

こういう遊び的なノリで、なんか面白そうな機能をどんどん実験的に開発してみたいです。

rainyday.jsのライセンス

スクリプトを確認すると

Licensed under the GPLv2 license

と記載されていました。このライセンスは下記のようになります。

GPL v2

Required(必須)
ソースの開示、著作権の表示、変更箇所の表示

Permitted(許可)
商用利用、配布、特許許可、私的利用

Forbidden(禁止)
責任免除、サブライセンス

 

このスクリプトを使って何かできたら紹介しますので、ご連絡くださいね!!

あと、この記事にもしも指摘があれば、TwitterなどでURL付きでつぶやいてください。エゴサーチして絡みにいきます。

以上、「rainyday.js」の紹介でした!
 

ABOUTこの記事を書いた人

とみっち

5年ほど前までバンド活動してました。現在はブログを運営して暮らしています。サウンドクリエイター、webクリエイター。息子は4歳になりました。長野市出身。埼玉県本庄市在住。 【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。 @tomicci 詳しいプロフィール 【主な運営サイト】 ザ・サイベース おと風景