前回作った雪の軌跡を表示するをアニメーション化してみた。
JavaScript：canvasに雪の軌跡を表示する
sinやcosは、中学の数学で習ったが何の役に立つのかわからなかった。
それはわたしの想像力が足りなかったせいもある。sinやcosの波打つグラフを見て日常のゆらゆらした動きや雪が降ってくるような動きに想像力が及ばなかった。
サンプ...
torisky.com
2013.11.25
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 torisky.com
// -------------------------------------------------------------------------
/*
* 定数
*/
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();
};
コメント