stevenklise · January 30, 2013 18:35 · ghost · May 8, 2020
diff --git a/index.html b/index.html
 <html>
  <head>
 		<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>		
 		<script>
 			function sketchProc(processing) {
 			  // Override draw function, by default it will be called 60 times per second
 				// void draw() { ... }
 				processing.draw = function() {
 				// determine center and max clock arm length
 				var centerX = processing.width / 2, centerY = processing.height / 2;
 				var maxArmLength = Math.min(centerX, centerY);
 			
 				function drawArm(position, lengthScale, weight) {
 				  processing.strokeWeight(weight);
 				  processing.line(centerX, centerY,
 					centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
 					centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
 				}
 			
 				// erase background
 				processing.background(224);
 			
 				var now = new Date();
 			
 				// Moving hours arm by small increments
 				var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
 				drawArm(hoursPosition, 0.5, 5);
 			
 				// Moving minutes arm by small increments
 				var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
 				drawArm(minutesPosition, 0.80, 3);
 			
 				// Moving hour arm by second increments
 				var secondsPosition = now.getSeconds() / 60;
 				drawArm(secondsPosition, 0.90, 1);
 			  };
 			}
 			
 			window.onload = function () {
 				var canvas = document.getElementById("canvas1");
 				// attaching the sketchProc function to the canvas
 				var processingInstance = new Processing(canvas, sketchProc);
 			}
 		</script>
 	</head>

 	<body>
 		<canvas id="canvas1"></canvas>
 	</body>
 </html>
	<html>
	<head>
	<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
	<script>
	function sketchProc(processing) {
	// Override draw function, by default it will be called 60 times per second
	// void draw() { ... }
	processing.draw = function() {
	// determine center and max clock arm length
	var centerX = processing.width / 2, centerY = processing.height / 2;
	var maxArmLength = Math.min(centerX, centerY);

	function drawArm(position, lengthScale, weight) {
	processing.strokeWeight(weight);
	processing.line(centerX, centerY,
	centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
	centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
	}

	// erase background
	processing.background(224);

	var now = new Date();

	// Moving hours arm by small increments
	var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
	drawArm(hoursPosition, 0.5, 5);

	// Moving minutes arm by small increments
	var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
	drawArm(minutesPosition, 0.80, 3);

	// Moving hour arm by second increments
	var secondsPosition = now.getSeconds() / 60;
	drawArm(secondsPosition, 0.90, 1);
	};
	}

	window.onload = function () {
	var canvas = document.getElementById("canvas1");
	// attaching the sketchProc function to the canvas
	var processingInstance = new Processing(canvas, sketchProc);
	}
	</script>
	</head>

	<body>
	<canvas id="canvas1"></canvas>
	</body>
	</html>