JavaScript でアナログ時計を作る p5.js & Canvas

JavaScript でアナログ時計を作ってみました。

前回のデジタル時計の続きです。

▼ p5.js 版

まずは、p5.js バージョンです。

↓p5js_analog-clock.js

	let angleSecond, angleMinute, angleHour;
	let jikoku_hour, jikoku_minute, jikoku_second;
	let posX, posY;
	let cX, cY;
	let secondWidth, minuteWidth, hourWidth;
	function setup() {
	createCanvas(600, 400, P2D);
	frameRate(60);
	angleSecond = 0;
	angleMinute = 0;
	angleHour = 0;
	}
	function draw() {
	background(200, 100);
	jikoku_hour = hour();
	jikoku_minute = minute();
	jikoku_second = second();
	// center
	cX = width / 2;
	cY = height / 2;
	// second
	angleSecond = jikoku_second * 6 - 90;
	secondWidth = 200;
	line(
	cX,
	cY,
	cX + cos(radians(angleSecond)) * secondWidth,
	cY + sin(radians(angleSecond)) * secondWidth
	);
	// minute
	angleMinute = jikoku_minute * 6 - 90;
	minuteWidth = 150;
	line(
	cX,
	cY,
	cX + cos(radians(angleMinute)) * minuteWidth,
	cY + sin(radians(angleMinute)) * minuteWidth
	);
	// hour
	if (jikoku_hour > 12) {
	angleHour = (jikoku_hour - 12) * 30 - 90;
	} else {
	angleHour = jikoku_hour * 30 - 90;
	}
	hourWidth = 100;
	line(
	cX,
	cY,
	cX + cos(radians(angleHour)) * hourWidth,
	cY + sin(radians(angleHour)) * hourWidth
	);
	}

view raw p5js_analog-clock.js hosted with ❤ by GitHub

簡単にできると思いましたが、時間とか時計は奥が深そうですね。

▼ canvas 版

次は、Canvas バージョンです。

ちょっと冗長な気もするけど、確実にできそうな方法を選択しました。

↓canvas_analog-clock.js

	(() => {
	let canvas = null;
	let ctx = null;
	window.addEventListener(
	'load',
	() => {
	initialize();
	render();
	},
	false
	);
	function initialize() {
	canvas = document.getElementById('canvas');
	canvas.width = 600;
	canvas.height = 400;
	ctx = canvas.getContext('2d');
	}
	function render() {
	ctx.fillStyle = 'gray';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	// date
	let dt = new Date();
	console.log(dt);
	// center
	let cx = canvas.width / 2;
	let cy = canvas.height / 2;
	// -------- second ----------------
	let secondWidth = 200;
	let secondAngle = dt.getSeconds();
	console.log(secondAngle);
	let secondDegrees = secondAngle * 6 - 90;
	let secondRadians = (Math.PI / 180) * secondDegrees;
	// second line
	ctx.beginPath();
	ctx.moveTo(cx, cy);
	ctx.lineTo(
	cx + Math.cos(secondRadians) * secondWidth,
	cy + Math.sin(secondRadians) * secondWidth
	);
	ctx.stroke();
	// -------- minute ----------------
	let minuteWidth = 150;
	let minuteAngle = dt.getMinutes();
	console.log(minuteAngle);
	let minuteDegrees = minuteAngle * 6 - 90;
	let minuteRadians = (Math.PI / 180) * minuteDegrees;
	// minute line
	ctx.beginPath();
	ctx.moveTo(cx, cy);
	ctx.lineTo(
	cx + Math.cos(minuteRadians) * minuteWidth,
	cy + Math.sin(minuteRadians) * minuteWidth
	);
	ctx.stroke();
	// -------- hour ----------------
	let hourWidth = 100;
	let hourAngle = dt.getHours();
	console.log(hourAngle);
	let hourDegrees = hourAngle * 30 - 90;
	let hourRadians = (Math.PI / 180) * hourDegrees;
	// hour line
	ctx.beginPath();
	ctx.moveTo(cx, cy);
	ctx.lineTo(
	cx + Math.cos(hourRadians) * hourWidth,
	cy + Math.sin(hourRadians) * hourWidth
	);
	ctx.stroke();
	// animation
	window.requestAnimationFrame(render);
	}
	})();

view raw canvas_analog-clock.js hosted with ❤ by GitHub

classとか使ったら、もっと単純になりそうです。