ReK42/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Animating xkcd #1335 with HTML5

The result: http://xkcd.reknet.ca
Idea

After seeing a nice HTML/JS version of xkcd #1340 and a comment wondering if the same was possible for the world clock in xkcd #1335 I decided to try my hand at it. The original is loaded from a set of static images, one for every 15 minutes, and refreshed via javascript. Let's see if I can do something similar dynamically.
Execution

After quickly pulling up the GIMP to cut the image into an inner and outer circle I put them into a simple HTML file and started to delve into the HTML5 canvas docs. It turns out they're quite simple, you just have to clear the canvas, centre and rotate it and redraw the image at the centre.
The big problem is, of course, that thing that was created to specifically screw with computers and the people who work with them: Daylight Savings Time. As with Randall's original, the image assumes DST doesn't exist. If you are in DST right now it will be an hour behind.
The source is included completely in the single HTML file since it wasn't very long. You can view it all, and the two halves of the image, just by right clicking.
Acknowledgements

Many thanks to Randall Munroe for the excellent comics and for releasing them as CC BY-NC 2.5 so I could do this.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>xkcd #1335</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <style>
      div#xkcdnow {
        position: relative;
        width: 706px;
        height: 705px;
        margin: auto;
      }

      img#ring {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 100;
      }

      canvas#centre {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 110;
      }

      img#fallback {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 110;
      }
    </style>
    <script>
      function drawxkcd() {
        var canvas = document.getElementById('centre');
        var ctx = canvas.getContext('2d');
        var img = document.getElementById('fallback');

        // Get current UTC time in seconds since midnight
        var d = new Date();
        var secs = (d.getUTCHours()*60 + d.getUTCMinutes())*60 + d.getUTCSeconds()

        // Express the time as a fraction of a day, offset by
        // 12h because we're working from midnight not noon
        var time = (secs - 12*60*60)/(24*60*60)

        // Get amount of radians to rotate by
        var rads = time * 2 * Math.PI

        // Restore canvas and create new save
        ctx.restore();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();

        // Recentre and rotate
        ctx.translate(canvas.width/2, canvas.height/2);
        ctx.rotate(rads);

        // Draw image centred
        ctx.drawImage(img, canvas.width/-2, canvas.height/-2);

        // Redraw in 5 seconds
        window.setTimeout(drawxkcd, 5000);
      }

      window.onload = function() {
        var canvas = document.getElementById('centre');
        if (canvas.getContext) {
          // Begin drawing loop if the browser supports canvas
          drawxkcd();
        }
      };
    </script>
  </head>
  <body>
    <div id="xkcdnow">
      <img id="ring" src="./ring.png" alt="" />
      <canvas id="centre" width="706" height="705">
        <img id="fallback" src="./centre.png" alt="" />
      </canvas>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>xkcd #1335</title>
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
	<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
	<style>
	div#xkcdnow {
	position: relative;
	width: 706px;
	height: 705px;
	margin: auto;
	}

	img#ring {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 100;
	}

	canvas#centre {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 110;
	}

	img#fallback {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 110;
	}
	</style>
	<script>
	function drawxkcd() {
	var canvas = document.getElementById('centre');
	var ctx = canvas.getContext('2d');
	var img = document.getElementById('fallback');

	// Get current UTC time in seconds since midnight
	var d = new Date();
	var secs = (d.getUTCHours()60 + d.getUTCMinutes())60 + d.getUTCSeconds()

	// Express the time as a fraction of a day, offset by
	// 12h because we're working from midnight not noon
	var time = (secs - 126060)/(246060)

	// Get amount of radians to rotate by
	var rads = time * 2 * Math.PI

	// Restore canvas and create new save
	ctx.restore();
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.save();

	// Recentre and rotate
	ctx.translate(canvas.width/2, canvas.height/2);
	ctx.rotate(rads);

	// Draw image centred
	ctx.drawImage(img, canvas.width/-2, canvas.height/-2);

	// Redraw in 5 seconds
	window.setTimeout(drawxkcd, 5000);
	}

	window.onload = function() {
	var canvas = document.getElementById('centre');
	if (canvas.getContext) {
	// Begin drawing loop if the browser supports canvas
	drawxkcd();
	}
	};
	</script>
	</head>
	<body>
	<div id="xkcdnow">
	<img id="ring" src="./ring.png" alt="" />
	<canvas id="centre" width="706" height="705">
	<img id="fallback" src="./centre.png" alt="" />
	</canvas>
	</div>
	</body>
	</html>