de314 · August 24, 2015 18:03
diff --git a/index.html b/index.html
 <html>
  <head>
    <style>
      * { margin:0; padding:0; } /* to remove the top and left whitespace */
      html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
      canvas { display:block; } /* To remove the scrollbars */
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script type="text/javascript">
      (function() {
        /**
         * THIS IS WHAT YOU EDIT
         * @return {[type]} [description]
         */
        function animate() {
          var i=0;
          var j=0;
          for (;i<colCount;i++) {
            for (j=0;j<rowCount;j++) {
              var m = clocks[i][j].minute;
              clocks[i][j].minute = (m + 1) % 60;
              var h = clocks[i][j].hour;
              clocks[i][j].hour = (h + 12/12/60) % 12;
            }
          }
          context.clearRect(0, 0, canvas.width, canvas.height);
          drawStuff();
        }

        /*
         * No need to touch this stuff.
         */
        var canvas = document.getElementById('myCanvas'),
                context = canvas.getContext('2d'),
                rowCount = 8,
                colCount = 15,
                clocks = [];

        // resize the canvas to fill browser window dynamically
        window.addEventListener('resize', resizeCanvas, false);

        function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                initCircles();
                drawStuff();
        }
        resizeCanvas();

        function initCircles() {
          var colW = canvas.width / (colCount + 2);
          var rowH = canvas.height / (rowCount + 2);
          var radius = Math.min(colW, rowH) / 2;
          var colPadding = radius * 2 / colCount;
          var rowPadding = radius * 2 / rowCount;
          clocks = [];
          var i=0;
          var j=0;
          for (;i<colCount;i++) {
            clocks[i] = [];
            for (j=0;j<rowCount;j++) {
              clocks[i].push({
                x: colW + i * colW + (i + 1) * colPadding,
                y: rowH + j * rowH + (j + 1) * rowPadding,
                r: radius,
                hour: 0,
                minute: 0
              });
            }
          }
        }

        setInterval(animate, 50);

        function drawStuff() {
          var i=0;
          var j=0;
          for (;i<colCount;i++) {
            for (j=0;j<rowCount;j++) {
              drawClock(clocks[i][j]);
            }
          }
        }

        function drawClock(c) {
          context.beginPath();
          context.arc(c.x, c.y, c.r, 0, 2 * Math.PI, false);
          context.lineWidth = 5;
          context.strokeStyle = '#000000';
          context.stroke();

          drawLine(c, c.hour, hourToAngle);
          drawLine(c, c.minute, minuteToAngle);
        }

        function drawLine(c, value, conFunc) {
          context.beginPath();
          context.moveTo(c.x, c.y);
          var offset = angleToOffset(conFunc(value), c.r);
          context.lineTo(c.x + offset.x, c.y + offset.y);
          context.stroke();
        }

        function hourToAngle(h) { return (h - 3) / 12 * 2 * Math.PI; }
        function minuteToAngle(m) { return (m - 15) / 60 * 2 * Math.PI; }
        function angleToOffset(a, r) { return { x: Math.cos(a) * r, y: Math.sin(a) * r }; }
      })();
    </script>
  </body>
 </html>
	<html>
	<head>
	<style>
	* { margin:0; padding:0; } /* to remove the top and left whitespace */
	html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
	canvas { display:block; } /* To remove the scrollbars */
	</style>
	</head>
	<body>
	<canvas id="myCanvas"></canvas>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
	<script type="text/javascript">
	(function() {
	/**
	* THIS IS WHAT YOU EDIT
	* @return {[type]} [description]
	*/
	function animate() {
	var i=0;
	var j=0;
	for (;i<colCount;i++) {
	for (j=0;j<rowCount;j++) {
	var m = clocks[i][j].minute;
	clocks[i][j].minute = (m + 1) % 60;
	var h = clocks[i][j].hour;
	clocks[i][j].hour = (h + 12/12/60) % 12;
	}
	}
	context.clearRect(0, 0, canvas.width, canvas.height);
	drawStuff();
	}

	/*
	* No need to touch this stuff.
	*/
	var canvas = document.getElementById('myCanvas'),
	context = canvas.getContext('2d'),
	rowCount = 8,
	colCount = 15,
	clocks = [];

	// resize the canvas to fill browser window dynamically
	window.addEventListener('resize', resizeCanvas, false);

	function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	initCircles();
	drawStuff();
	}
	resizeCanvas();

	function initCircles() {
	var colW = canvas.width / (colCount + 2);
	var rowH = canvas.height / (rowCount + 2);
	var radius = Math.min(colW, rowH) / 2;
	var colPadding = radius * 2 / colCount;
	var rowPadding = radius * 2 / rowCount;
	clocks = [];
	var i=0;
	var j=0;
	for (;i<colCount;i++) {
	clocks[i] = [];
	for (j=0;j<rowCount;j++) {
	clocks[i].push({
	x: colW + i * colW + (i + 1) * colPadding,
	y: rowH + j * rowH + (j + 1) * rowPadding,
	r: radius,
	hour: 0,
	minute: 0
	});
	}
	}
	}

	setInterval(animate, 50);

	function drawStuff() {
	var i=0;
	var j=0;
	for (;i<colCount;i++) {
	for (j=0;j<rowCount;j++) {
	drawClock(clocks[i][j]);
	}
	}
	}

	function drawClock(c) {
	context.beginPath();
	context.arc(c.x, c.y, c.r, 0, 2 * Math.PI, false);
	context.lineWidth = 5;
	context.strokeStyle = '#000000';
	context.stroke();

	drawLine(c, c.hour, hourToAngle);
	drawLine(c, c.minute, minuteToAngle);
	}

	function drawLine(c, value, conFunc) {
	context.beginPath();
	context.moveTo(c.x, c.y);
	var offset = angleToOffset(conFunc(value), c.r);
	context.lineTo(c.x + offset.x, c.y + offset.y);
	context.stroke();
	}

	function hourToAngle(h) { return (h - 3) / 12 * 2 * Math.PI; }
	function minuteToAngle(m) { return (m - 15) / 60 * 2 * Math.PI; }
	function angleToOffset(a, r) { return { x: Math.cos(a) * r, y: Math.sin(a) * r }; }
	})();
	</script>
	</body>
	</html>