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

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

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

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

HTML部分

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="fallSnow.js"></script>
6<title>fallsnow</title>
7<style>
8body, #canvas {
9    margin: 0;
10    padding: 0;
11}
12</style>
13  
14</head>
15<body>
16    <canvas id="canvas" width="320" height="480"></canvas>
17</body>
18</html>

JavaScript部分

1// -------------------------------------------------------------------------
2// fallSnow.js
3//
4//                  created at 2013-11-25 on take3.asia
5// -------------------------------------------------------------------------
6 
7/*
8* 定数
9*/
10var SCREEN_WIDTH = 320;
11var SCREEN_HEIGHT = 480;
12var TICK = 10;
13 
14/*
15* グローバル変数
16*/
17var $id = function(id){ return document.getElementById(id); };
18var canvas = null;                  // キャンバス
19var g = null;                       // コンテキスト
20var snowX = 0;                  // 雪のx座標
21var snowY = 0;                  // 雪のy座標
22var title;                          // タイトル文字列
23var speed;                      // 雪の落下速度
24var swing;                          // 雪のゆれ具合
25 
26var init = function(){
27    // パラメタ設定
28    title = "snow";
29    speed = Math.floor(Math.random() * 5) + 1;  // 落下速度 1～5
30    swing = Math.floor(Math.random() * 3) + 1;  // ゆれ 1～3
31    // 雪の初期位置
32    snowX = SCREEN_WIDTH / 3;
33    snowY = 0;
34};
35 
36/*
37 * 描画処理
38 */
39var draw = function(e){
40    // 画面をクリア
41    g.clearRect(0, 0, canvas.width, canvas.height);
42    // パラメタ表示
43    g.fillStyle = "rgba(0, 0, 0, 0.5)";
44    g.fillStyle = "rgba(0, 0, 200, 1.0)";
45    g.fillText(title, 8, 16);
46    g.fillText("speed = " + speed, 8, 32);
47    g.fillText("swing = " + swing, 8, 48);
48    // 雪を描く
49    g.beginPath();
50    g.arc(snowX, snowY, 5, 0, Math.PI*2, false);
51    g.stroke();
52    // 次の雪の位置を計算
53    snowX = snowX + Math.sin((snowY + speed) * Math.PI/180) * swing;
54    snowY = snowY + speed;
55    if(snowY > SCREEN_HEIGHT){
56        init();
57    }
58    // アニメーション
59    setTimeout(draw, TICK);
60};
61 
62/*
63 メイン処理
64 */
65 
66window.onload = function()
67{
68    // キャンバス情報取得
69    canvas = $id("canvas");
70    g = canvas.getContext("2d");
71    // 初期化
72    init();
73    // 雪を降らせる
74    draw();
75};