Lanny/gist:5175573

## gistfile1.html
<html>
  <head>
  </head>
  <body>
    <canvas id="primary_canvas" width=800 height=600></canvas>
    <script>
      function loadAssets(callback) {
        var urls = {
          'n.png':'http://i.imgur.com/vEgk9O5.png',
          'e.png':'http://i.imgur.com/lIbMfuW.png',
          'w.png':'http://i.imgur.com/jUd9EhA.png',
          's.png':'http://i.imgur.com/6lS4ybb.png',
          't.png':'http://i.imgur.com/OKBlPKZ.png'},
          assets = {},
          loadedAssets = 0,
          resourceCount = 5

        for (alias in urls) {
          var url = urls[alias]
          assets[alias] = new Image()
          assets[alias].onload = function() {
            if (++loadedAssets == resourceCount) callback(assets)
          }
          assets[alias].src = url
        }
      }

      (function() {
        var canvas = document.getElementById('primary_canvas')
        ctx = canvas.getContext('2d')

        loadAssets(function(assets) {
          var angle = Math.PI/6;

          function block() {
            this.draw = function(t) {
              // Try to divine rendere order
              var rot = t%(Math.PI*2)
              if (rot < Math.PI/2) {
                this.drawNorth(t)
                this.drawEast(t)
                this.drawSouth(t)
                this.drawWest(t)
              }
              else if (rot > Math.PI*0.5 && rot < Math.PI) {
                this.drawEast(t)
                this.drawSouth(t)
                this.drawWest(t)
                this.drawNorth(t)
              }
              else if (rot > Math.PI && rot < Math.PI*1.5) {
                this.drawWest(t)
                this.drawSouth(t)
                this.drawEast(t)
                this.drawNorth(t)
              }
              else if (rot > Math.PI*1.5) {
                this.drawWest(t)
                this.drawNorth(t)
                this.drawSouth(t)
                this.drawEast(t)
              }
              else {
                this.drawSouth(t)
                this.drawWest(t)
                this.drawNorth(t)
                this.drawEast(t)
              }
              this.drawTop(t)
            }
            this.drawTop = function(t) {
              ctx.save()
              ctx.translate(200,201)
              ctx.transform(1,0,0,.5,0,0)
              ctx.rotate(-t)
              ctx.drawImage(assets['t.png'], 0, 0)
              ctx.restore()
            }
            this.drawNorth = function(t) {
              ctx.save()
              ctx.translate(200,200)
              ctx.transform(Math.cos(t),-Math.sin(t)*0.5,0,1,0,0)
              ctx.drawImage(assets['n.png'], 0, 0)
              ctx.restore()
            }
            this.drawSouth = function(t) {
              ctx.save()
              ctx.translate(200,200)
              ctx.transform(Math.cos(t),-Math.sin(t)*0.5,0,1,Math.cos(t-Math.PI/2)*64,-Math.sin(t - Math.PI/2)*32)
              ctx.drawImage(assets['s.png'], 0, 0)
              ctx.restore()
            }
            this.drawWest = function(t) {
              ctx.save()
              ctx.translate(200,200)
              ctx.transform(Math.sin(t),Math.sin(t+Math.PI/2)*0.5,0,1,0,0)
              ctx.drawImage(assets['w.png'], 0, 0)
              ctx.restore()
            }
            this.drawEast = function(t) {
              ctx.save()
              ctx.translate(200,200)
              ctx.transform(Math.sin(t), Math.sin(t+Math.PI/2)*0.5, 0, 1, -Math.cos(t-Math.PI)*64, Math.sin(t-Math.PI)*32)
              ctx.drawImage(assets['e.png'], 0, 0)
              ctx.restore()
            }
          }

          var t = 0,
            blockusMaximus = new block();
          (function tick() {
            ctx.fillStyle = 'rgb(255,255,255)'
            ctx.fillRect(0,0,800,600)

            blockusMaximus.draw(t)

            console.log((t%(Math.PI*2)))
            t += 0.025
            setTimeout(tick, 30)
          })()
        })
      })()
    </script>
  </body>
</html>
	<html>
	<head>
	</head>
	<body>
	<canvas id="primary_canvas" width=800 height=600></canvas>
	<script>
	function loadAssets(callback) {
	var urls = {
	'n.png':'http://i.imgur.com/vEgk9O5.png',
	'e.png':'http://i.imgur.com/lIbMfuW.png',
	'w.png':'http://i.imgur.com/jUd9EhA.png',
	's.png':'http://i.imgur.com/6lS4ybb.png',
	't.png':'http://i.imgur.com/OKBlPKZ.png'},
	assets = {},
	loadedAssets = 0,
	resourceCount = 5

	for (alias in urls) {
	var url = urls[alias]
	assets[alias] = new Image()
	assets[alias].onload = function() {
	if (++loadedAssets == resourceCount) callback(assets)
	}
	assets[alias].src = url
	}
	}

	(function() {
	var canvas = document.getElementById('primary_canvas')
	ctx = canvas.getContext('2d')

	loadAssets(function(assets) {
	var angle = Math.PI/6;

	function block() {
	this.draw = function(t) {
	// Try to divine rendere order
	var rot = t%(Math.PI*2)
	if (rot < Math.PI/2) {
	this.drawNorth(t)
	this.drawEast(t)
	this.drawSouth(t)
	this.drawWest(t)
	}
	else if (rot > Math.PI*0.5 && rot < Math.PI) {
	this.drawEast(t)
	this.drawSouth(t)
	this.drawWest(t)
	this.drawNorth(t)
	}
	else if (rot > Math.PI && rot < Math.PI*1.5) {
	this.drawWest(t)
	this.drawSouth(t)
	this.drawEast(t)
	this.drawNorth(t)
	}
	else if (rot > Math.PI*1.5) {
	this.drawWest(t)
	this.drawNorth(t)
	this.drawSouth(t)
	this.drawEast(t)
	}
	else {
	this.drawSouth(t)
	this.drawWest(t)
	this.drawNorth(t)
	this.drawEast(t)
	}
	this.drawTop(t)
	}
	this.drawTop = function(t) {
	ctx.save()
	ctx.translate(200,201)
	ctx.transform(1,0,0,.5,0,0)
	ctx.rotate(-t)
	ctx.drawImage(assets['t.png'], 0, 0)
	ctx.restore()
	}
	this.drawNorth = function(t) {
	ctx.save()
	ctx.translate(200,200)
	ctx.transform(Math.cos(t),-Math.sin(t)*0.5,0,1,0,0)
	ctx.drawImage(assets['n.png'], 0, 0)
	ctx.restore()
	}
	this.drawSouth = function(t) {
	ctx.save()
	ctx.translate(200,200)
	ctx.transform(Math.cos(t),-Math.sin(t)0.5,0,1,Math.cos(t-Math.PI/2)64,-Math.sin(t - Math.PI/2)*32)
	ctx.drawImage(assets['s.png'], 0, 0)
	ctx.restore()
	}
	this.drawWest = function(t) {
	ctx.save()
	ctx.translate(200,200)
	ctx.transform(Math.sin(t),Math.sin(t+Math.PI/2)*0.5,0,1,0,0)
	ctx.drawImage(assets['w.png'], 0, 0)
	ctx.restore()
	}
	this.drawEast = function(t) {
	ctx.save()
	ctx.translate(200,200)
	ctx.transform(Math.sin(t), Math.sin(t+Math.PI/2)0.5, 0, 1, -Math.cos(t-Math.PI)64, Math.sin(t-Math.PI)*32)
	ctx.drawImage(assets['e.png'], 0, 0)
	ctx.restore()
	}
	}

	var t = 0,
	blockusMaximus = new block();
	(function tick() {
	ctx.fillStyle = 'rgb(255,255,255)'
	ctx.fillRect(0,0,800,600)

	blockusMaximus.draw(t)

	console.log((t%(Math.PI*2)))
	t += 0.025
	setTimeout(tick, 30)
	})()
	})
	})()
	</script>
	</body>
	</html>