JavaScript：円の軌跡を表示してみる

JavaScriptを使って中心点から同心円上の軌跡を描画するプログラムを作った。
必要な情報は、中心点の座標（cx,cy）、同心円の半径（r）、角度（angle）だ。

JavaScriptのsin関数、cos関数は、角度をラジアンで指定するため、角度に円周率3.14を掛けて180で割ってあげなければならない。

例）

Math.cos(angle / 180 * Math.PI)

半径rと中心点cx,cyを含めた式は、

// 中心から半径r、角度angleの真円上の座標を計算
x = r * Math.cos(angle / 180 * Math.PI) + cx;
y = r * Math.sin(angle / 180 * Math.PI) + cy;

時計の針の表示などもこれで作れる。
中学生時代に意味が無いと考えていたsin関数とcos関数が意味を持つ瞬間だ。

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
<title>円の軌跡を表示してみる</title>
<style>
#canvas {
	border: solid 1px #000;
	margin: 32px;
}
</style>
 
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
</body>
</html>

JavaScript部分

// -------------------------------------------------------------------------
// main.js 中心から指定した半径の円上をなぞるアニメーション
//			つまりは時計の秒針のようなもの
//
// 					created at 2014-05-29 on torisky.com
// -------------------------------------------------------------------------

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

/*
* グローバル変数
*/
var $id = function(id){ return document.getElementById(id); };
var canvas = null;			// キャンバス
var g = null;					// コンテキスト
var cx, cy;					// 中心座標
var x, y;						// 中心から半径r、角度angleの真円上の座標
var r = 100;					// 円の半径
var angle = 0;				// 角度
var speed = 30;				// 1秒間の描画回数

/*
 * イベント処理
 */
// タッチしたら半径とスピードを変更
window.onmousedown = touchDownHandler;
window.ontouchdown = touchDownHandler;

function touchDownHandler(){
	r = Math.random() * SCREEN_WIDTH /2;
	speed = Math.random() * 970 + 30;
}

/*
 * 描画処理
 */
var draw = function(e){
	// 画面をクリア
	g.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
	// 中心座標設定
	cx = SCREEN_WIDTH / 2;
	cy = SCREEN_HEIGHT / 2;
	// 中心を描画
	g.beginPath();
	g.strokeStyle = "rgba(255, 0, 0, 1.0)";
	g.arc(cx, cy, 5, 0, Math.PI*2, false);
	g.stroke();
	// 中心から半径r、角度angleの真円上の座標を計算
	x = r * Math.cos(angle / 180 * Math.PI) + cx;
	y = r * Math.sin(angle / 180 * Math.PI) + cy;
	// 中心から真円上の座標に円を描画（わかりやすくするため）
	g.beginPath();
	g.strokeStyle = "rgba(0, 0, 0, 1.0)";
	g.moveTo(cx, cy);
	g.lineTo(x, y);
	g.stroke();
	// 真円上の座標に円を描画
	g.beginPath();
	g.strokeStyle = "rgba(0, 0, 0, 1.0)";
	g.arc(x, y, 5, 0, Math.PI*2, false);
	g.stroke();
	// 角度を変える
	angle += 1;
	if(angle >= 360) angle = 0;
	// アニメーション
	setTimeout(draw, 1000/speed);
};

/*
 メイン処理
 */

window.onload = function()
{
	// キャンバス情報取得
	canvas = $id("canvas");
	g = canvas.getContext("2d");
	// 円の軌跡を描画
	draw();
};