SamAsEnd/clock.html

## clock.html
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>SVG Example: Analog Clock</title>
	<meta name="author" content="Sam As End <4sam21{guess}gmail.com>"/>
	<style>
		svg#plate {
			height: 500px;
			width: 500px;
			display: block;
			margin: auto auto;
		}
	</style>
</head>
<body>

<svg id="plate">

	<circle cx="250" cy="250" r="200"
					stroke="black" stroke-width="10" fill="white"></circle>

	<line id="sec" x1="250" y1="250" x2="250" y2="250"
				stroke="firebrick" stroke-width="2"></line>

	<line id="min" x1="250" y1="250" x2="250" y2="250"
				stroke="firebrick" stroke-width="4"></line>

	<line id="hour" x1="250" y1="250" x2="250" y2="250"
				stroke="firebrick" stroke-width="6"></line>

	<circle cx="250" cy="250" r="8"
					fill="firebrick"></circle>

	<text x="195" font-size="25" y="190"
				stroke="firebrick" fill="firebrick" stroke-width="1">
		Sam As End
	</text>

	<line id="stubLine" stroke="black" stroke-width="6"></line>
	<text id="stubText" stroke="black">0</text>
</svg>

<script>
	// i don't wanna divide 3.14159265 by 180
	// over and over again
	PI_OVER_180 = Math.PI / 180;
	CENTER = {x: 250, y: 250};

	svg_node = document.getElementById('plate');
	second_node = document.getElementById('sec');
	minute_node = document.getElementById('min');
	hour_node = document.getElementById('hour');

	function paint_ticks() {
		var i, line_node, text_node, line_start, line_end, hour_indicator,
				line_stub = document.getElementById('stubLine'),
				text_stub = document.getElementById('stubText');

		// for each ticks 1 ... 12
		for (i = 1; i <= 12; i++) {
			// clone the stub node and text
			line_node = line_stub.cloneNode(false);
			text_node = text_stub.cloneNode(false);

			// get the point
			hour_indicator = get_point(CENTER, i * 30 + 270, 145);
			line_start = get_point(CENTER, i * 30 + 270, 160);
			line_end = get_point(CENTER, i * 30 + 270, 185);

			// write the indicator
			text_node.setAttribute('x', hour_indicator.x);
			text_node.setAttribute('y', hour_indicator.y);
			text_node.innerHTML = '' + i;

			// move the clone start point
			line_node.setAttribute('x1', line_start.x);
			line_node.setAttribute('y1', line_start.y);

			// move the clone end point
			line_node.setAttribute('x2', line_end.x);
			line_node.setAttribute('y2', line_end.y);

			// append the clones
			svg_node.appendChild(line_node);
			svg_node.appendChild(text_node);
		}
	}

	function get_point(point, theta, distance) {
		//           p2(x,y)
		//          /|
		//      d /  |        sin()  = y / d
		//      /    | y      cos()  = x / d
		//    /     |
		//  /________|
		//(0,0)		  x
		var sin_theta = Math.sin(theta * PI_OVER_180),
				cos_theta = Math.cos(theta * PI_OVER_180),

				p2_x = Math.round(cos_theta * distance),
				p2_y = Math.round(sin_theta * distance);

		return {
			x: point.x + p2_x,
			y: point.y + p2_y
		};
	}

	loop = function () {
		var now = new Date(), // the current time

		// the degree of the pointer

				sec_degree = (now.getSeconds() + now.getMilliseconds() / 1000.0)
						* 6, // 6 <= 360 / 60 sec
				min_degree = (now.getMinutes() + now.getSeconds() / 60.0)
						* 6, // 6 <= 360 / 60 min
				hour_degree = (now.getHours() + (now.getMinutes() / 60.0))
						* 30; // 6 <= 360 / 12 hour

		// change to clockwise
		sec_degree -= 90;
		min_degree -= 90;
		hour_degree -= 90;

		var wiggle = function (degree, distance) {
			// move the second a bit further
			second_pointer = get_point(CENTER, degree+0.8, distance);
			second_node.setAttribute('x2', second_pointer.x);
			second_node.setAttribute('y2', second_pointer.y);

			// back some more
			setTimeout(function () {
				second_pointer = get_point(CENTER, degree-0.3, distance);
				second_node.setAttribute('x2', second_pointer.x);
				second_node.setAttribute('y2', second_pointer.y);
			}, 50);

			// where it should be
			setTimeout(function () {
				second_pointer = get_point(CENTER, degree, distance);
				second_node.setAttribute('x2', second_pointer.x);
				second_node.setAttribute('y2', second_pointer.y);
			}, 200);
		};

		wiggle(sec_degree, 130);

		// move the minute
		min_pointer = get_point(CENTER, min_degree, 120);
		minute_node.setAttribute('x2', min_pointer.x);
		minute_node.setAttribute('y2', min_pointer.y);

		// move the hour
		hour_pointer = get_point(CENTER, hour_degree, 60);
		hour_node.setAttribute('x2', hour_pointer.x);
		hour_node.setAttribute('y2', hour_pointer.y);
	};

	paint_ticks();

	// update every sec
	setInterval(loop, 1000);
</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>SVG Example: Analog Clock</title>
	<meta name="author" content="Sam As End <4sam21{guess}gmail.com>"/>
	<style>
	svg#plate {
	height: 500px;
	width: 500px;
	display: block;
	margin: auto auto;
	}
	</style>
	</head>
	<body>

	<svg id="plate">

	<circle cx="250" cy="250" r="200"
	stroke="black" stroke-width="10" fill="white"></circle>

	<line id="sec" x1="250" y1="250" x2="250" y2="250"
	stroke="firebrick" stroke-width="2"></line>

	<line id="min" x1="250" y1="250" x2="250" y2="250"
	stroke="firebrick" stroke-width="4"></line>

	<line id="hour" x1="250" y1="250" x2="250" y2="250"
	stroke="firebrick" stroke-width="6"></line>

	<circle cx="250" cy="250" r="8"
	fill="firebrick"></circle>

	<text x="195" font-size="25" y="190"
	stroke="firebrick" fill="firebrick" stroke-width="1">
	Sam As End
	</text>

	<line id="stubLine" stroke="black" stroke-width="6"></line>
	<text id="stubText" stroke="black">0</text>
	</svg>

	<script>
	// i don't wanna divide 3.14159265 by 180
	// over and over again
	PI_OVER_180 = Math.PI / 180;
	CENTER = {x: 250, y: 250};

	svg_node = document.getElementById('plate');
	second_node = document.getElementById('sec');
	minute_node = document.getElementById('min');
	hour_node = document.getElementById('hour');

	function paint_ticks() {
	var i, line_node, text_node, line_start, line_end, hour_indicator,
	line_stub = document.getElementById('stubLine'),
	text_stub = document.getElementById('stubText');

	// for each ticks 1 ... 12
	for (i = 1; i <= 12; i++) {
	// clone the stub node and text
	line_node = line_stub.cloneNode(false);
	text_node = text_stub.cloneNode(false);

	// get the point
	hour_indicator = get_point(CENTER, i * 30 + 270, 145);
	line_start = get_point(CENTER, i * 30 + 270, 160);
	line_end = get_point(CENTER, i * 30 + 270, 185);

	// write the indicator
	text_node.setAttribute('x', hour_indicator.x);
	text_node.setAttribute('y', hour_indicator.y);
	text_node.innerHTML = '' + i;

	// move the clone start point
	line_node.setAttribute('x1', line_start.x);
	line_node.setAttribute('y1', line_start.y);

	// move the clone end point
	line_node.setAttribute('x2', line_end.x);
	line_node.setAttribute('y2', line_end.y);

	// append the clones
	svg_node.appendChild(line_node);
	svg_node.appendChild(text_node);
	}
	}

	function get_point(point, theta, distance) {
	// p2(x,y)
	// /\|
	// d / \| sin() = y / d
	// / \| y cos() = x / d
	// /  \|
	// /________\|
	//(0,0) x
	var sin_theta = Math.sin(theta * PI_OVER_180),
	cos_theta = Math.cos(theta * PI_OVER_180),

	p2_x = Math.round(cos_theta * distance),
	p2_y = Math.round(sin_theta * distance);

	return {
	x: point.x + p2_x,
	y: point.y + p2_y
	};
	}

	loop = function () {
	var now = new Date(), // the current time

	// the degree of the pointer

	sec_degree = (now.getSeconds() + now.getMilliseconds() / 1000.0)
	* 6, // 6 <= 360 / 60 sec
	min_degree = (now.getMinutes() + now.getSeconds() / 60.0)
	* 6, // 6 <= 360 / 60 min
	hour_degree = (now.getHours() + (now.getMinutes() / 60.0))
	* 30; // 6 <= 360 / 12 hour

	// change to clockwise
	sec_degree -= 90;
	min_degree -= 90;
	hour_degree -= 90;

	var wiggle = function (degree, distance) {
	// move the second a bit further
	second_pointer = get_point(CENTER, degree+0.8, distance);
	second_node.setAttribute('x2', second_pointer.x);
	second_node.setAttribute('y2', second_pointer.y);

	// back some more
	setTimeout(function () {
	second_pointer = get_point(CENTER, degree-0.3, distance);
	second_node.setAttribute('x2', second_pointer.x);
	second_node.setAttribute('y2', second_pointer.y);
	}, 50);

	// where it should be
	setTimeout(function () {
	second_pointer = get_point(CENTER, degree, distance);
	second_node.setAttribute('x2', second_pointer.x);
	second_node.setAttribute('y2', second_pointer.y);
	}, 200);
	};

	wiggle(sec_degree, 130);

	// move the minute
	min_pointer = get_point(CENTER, min_degree, 120);
	minute_node.setAttribute('x2', min_pointer.x);
	minute_node.setAttribute('y2', min_pointer.y);

	// move the hour
	hour_pointer = get_point(CENTER, hour_degree, 60);
	hour_node.setAttribute('x2', hour_pointer.x);
	hour_node.setAttribute('y2', hour_pointer.y);
	};

	paint_ticks();

	// update every sec
	setInterval(loop, 1000);
	</script>

	</body>
	</html>