ポーラークロック

PolarClock.js

/////////////////////////////////////////////////////////////////////////////////
// PolarClock
// ポーラークロック
// 
// Copyright (c) 2010 Minoru Nakanow
// Licensed under the MIT licenses.
// http://www.opensource.org/licenses/mit-license.html
// 
// Usage:
// var point = new Point(120, 120, 120);
// var clock = new PolarClock(canvas, point, 10, 2);
// clock.color = ["#DDD", "#BBB", "#999", "#777", "#555", "#333"];
// clock.start(25);
// 
////////////////////////////////////////////////////////////////////////////////
(function() {
	//--------------------------------------------------------------------------
	//  Point
	//--------------------------------------------------------------------------
	/**
	 * ポイントオブジェクト
	 * 
	 * @param {Number} x canvas上のX座標
	 * @param {Number} y canvas上のY座標
	 * @param {Number} radius 半径
	 */
	var Point = function(x, y, radius) {
		this.x = x;
		this.y = y;
		this.radius = radius;
	};
	
	//--------------------------------------------------------------------------
	//  Polar Clock
	//--------------------------------------------------------------------------
	/**
	 * ポーラークロック
	 * 
	 * @param {Object} canvas キャンバス
	 * @param {Point} point ポイントオブジェクト
	 * @param {Number} line 線幅
	 * @param {Number} margin 線の間隔
	 * @param {Array.<String>} color 線の色
	 */
	var PolarClock = function (canvas, point, line, margin, color) {
		this.canvas = canvas;
		this.context = canvas.getContext("2d");
		this.point = point;
		this.line = line;
		this.margin = margin;
		this.color = color || ["#333", "#555", "#777", "#999", "#BBB", "#DDD"];
	};
	
	/**
	 * ループ処理の開始
	 * 
	 * @param {Number} interval ループ間隔(ms)
	 */
	PolarClock.prototype.start = function(interval) {
		var self = this;
		var point = this.getPoint();
		
		setInterval(function() {
			self.step(point)
		}, interval);
	};
	
	/**
	 * 描画のクリア
	 */
	PolarClock.prototype.clear = function() {
		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
	};
	
	/**
	 * ポイントオブジェクトの取得
	 * 
	 * @return {Point}
	 */
	PolarClock.prototype.getPoint = function() {
		return new Point(this.point.x, this.point.y, this.point.radius);
	};
	
	/**
	 * ループ処理
	 * 
	 * @param {Point} point
	 */
	PolarClock.prototype.step = function(point) {
		var now = getTimeRadian();
		var line = this.line;
		var margin = this.margin;
		var color = this.color;
		
		this.clear();
		if (color[0]) this.draw(0, point, now.second);
		if (color[1]) this.draw(1, point, now.minute);
		if (color[2]) this.draw(2, point, now.hour);
		if (color[3]) this.draw(3, point, now.weekday);
		if (color[4]) this.draw(4, point, now.date);
		if (color[5]) this.draw(5, point, now.month);
	};
	
	/**
	 * 円弧の描画位置
	 * 
	 * @param {Number} index 外周からのインデックス
	 * @param {Point} point ポイントオブジェクト
	 * @param {Number} radian 角度
	 */
	PolarClock.prototype.draw = function(index, point, radian) {
		this.point = new Point(
			point.x,
			point.y,
			point.radius - (this.line + this.margin) * index
		);
		
		this.arc(this.color[index], this.line, 0, radian);
	};
	
	/**
	 * 円弧の描画
	 * 
	 * @param {String} color 描画色
	 * @param {Number} width 線の幅
	 * @param {Number} start 円弧の開始角度
	 * @param {Number} end 円弧の終了角度
	 */
	PolarClock.prototype.arc = function(color, width, start, end) {
		var context = this.context;
		var point = this.point;
		var x = -point.y;
		var y = point.x;
		var r = point.radius-width;
		
		context.save();
		context.rotate(-Math.PI/2);
		context.strokeStyle = color;
		context.lineWidth = width;
		context.beginPath();
		context.arc(x, y, r, start, end, false);
		context.stroke();
		context.restore();
	};
	
	//--------------------------------------------------------------------------
	//  Private methods
	//--------------------------------------------------------------------------
	/**
	 * 角度の取得
	 */
	var getTimeRadian = function() {
		var now = new Date();
		var eom = getEndOfMonth(now);
		
		var second = (now.getSeconds() + now.getMilliseconds() / 1000) * Math.PI / 30;
		var minute = (now.getMinutes() * Math.PI / 30) + second / 60;
		var hour = (now.getHours() * Math.PI / 12) + minute / 24;
		var weekday = (now.getDay() * Math.PI / 3.5) + hour / 7;
		var date = ((now.getDate() - 1) * Math.PI / (eom/2)) + hour / eom;
		var month = (now.getMonth() * Math.PI / 6) + date / 12;
		
		return {
			second: second,
			minute: minute,
			hour: hour,
			weekday: weekday,
			date: date,
			month: month
		};
	};
	
	/**
	 * 月末の日付
	 */
	var getEndOfMonth = function(date) {
		var eom;
		var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		var year = date.getYear();
		var month = date.getMonth();
		
		if (month == 1 && year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
			return 29;
		} else {
			return days[month]
		}
	}
	
	//--------------------------------------------------------------------------
	//  Accessor
	//--------------------------------------------------------------------------
	window.Point = Point;
	window.PolarClock = PolarClock;
	
})();