本記事では JavaScript を使って、赤い雨の再現をするプログラムについて紹介しています。
YouTubeに動画もあるので、ぜひご覧ください。
【早送り】プログラミングで赤い雨を再現 / JavaScript
プログラミングで血の雨を再現
DEMO
まず、はじめにこちらが完成品のサンプルです。
まず、背景写真を読み込み、赤い長方形を描画して、それが下に少しずつ落ちていくようにします。
一番下までいったら、描画する座標をまた一番上に戻し、雨が降っているように見せます。
また図形の透明度も、変更できるようにします。
長い棒ほど、くっきり映るようにし、短い棒はぼやけて見えるようにしています。
HTML ファイルの作成
まず最初に下記のような html ファイルを作成します。
“img.png” という名前の背景写真を html ファイルと同じディレクトリ内に用意します。
JavaScript ファイルの作成
index.js、rain.js という二つのファイルを作ります。
changeScale() という関数は長い棒ほどくっきり映り、短い棒ほど少しボヤけて見えるようするためのものです。
この関数を使い、alpha の値を決めています。
alpha の値は図形の透明度をあらわします。
0~1の数で表され、0だと全く見えない状態、1だと普通の状態ということになります。
draw() 関数で、描画を行い、update() 関数内で情報の更新についての動作を行っています。
- GitHubのコード

以上、血の雨を再現するプログラムのソースコードについてでした。
コメント