JavaScript：canvasを使って雪を一つずつ降らす

前回作った雪の軌跡を表示するをアニメーション化してみた。

canvasを使ってarc関数で描かれた雪が、ランダムに一つずつ降ってくる。

雪の落下速度（speed）と揺れ（swing）はランダムに変えている。
やはりsinカーブ通りのきれいなカーブなので、もっと他の要素を加えないと自然に見えないようだ。

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="fallSnow.js"></script>
<title>fallsnow</title>
<style>
body, #canvas {
	margin: 0;
	padding: 0;
}
</style>
 
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
</body>
</html>

JavaScript部分

// -------------------------------------------------------------------------
// fallSnow.js
//
// 					created at 2013-11-25 on take3.asia
// -------------------------------------------------------------------------

/*
* 定数
*/
var SCREEN_WIDTH = 320;
var SCREEN_HEIGHT = 480;
var TICK = 10;

/*
* グローバル変数
*/
var $id = function(id){ return document.getElementById(id); };
var canvas = null;					// キャンバス
var g = null;						// コンテキスト
var snowX = 0;					// 雪のx座標
var snowY = 0;					// 雪のy座標
var title;							// タイトル文字列
var speed;						// 雪の落下速度
var swing;							// 雪のゆれ具合

var init = function(){
	// パラメタ設定
	title = "snow";
	speed = Math.floor(Math.random() * 5) + 1;	// 落下速度 1～5
	swing = Math.floor(Math.random() * 3) + 1;	// ゆれ 1～3
	// 雪の初期位置
	snowX = SCREEN_WIDTH / 3;
	snowY = 0;
};

/*
 * 描画処理
 */
var draw = function(e){
	// 画面をクリア
	g.clearRect(0, 0, canvas.width, canvas.height);
	// パラメタ表示
	g.fillStyle = "rgba(0, 0, 0, 0.5)";
	g.fillStyle = "rgba(0, 0, 200, 1.0)";
	g.fillText(title, 8, 16);
	g.fillText("speed = " + speed, 8, 32);
	g.fillText("swing = " + swing, 8, 48);
	// 雪を描く
	g.beginPath();
	g.arc(snowX, snowY, 5, 0, Math.PI*2, false);
	g.stroke();
	// 次の雪の位置を計算
	snowX = snowX + Math.sin((snowY + speed) * Math.PI/180) * swing;
	snowY = snowY + speed;
	if(snowY > SCREEN_HEIGHT){
		init();
	}
	// アニメーション
	setTimeout(draw, TICK);
};

/*
 メイン処理
 */

window.onload = function()
{
	// キャンバス情報取得
	canvas = $id("canvas");
	g = canvas.getContext("2d");
	// 初期化
	init();
	// 雪を降らせる
	draw();
};