-# http://jsbin.com/nuhozo/7/edit?js,output
+# http://jsbin.com/nuhozo/8/edit?js,output
 
-WIDTH = 500
-HEIGHT = 500
+WIDTH = 720
+HEIGHT = 720
 MID = [WIDTH/2, HEIGHT/2]
 COUNT = 7
 SPACING = WIDTH / (COUNT + 1)
-SIZE = 20
+SIZE = SPACING / 4
 SIZE_HALF = SIZE / 2
-Z_OFFSET = -0.333333
+Z_OFFSET = -1/8
+
+BG = 'hsl(60, 10%, 95%)'
+GRID = 'hsl(60, 10%, 70%)'
+FG = 'hsl(60, 10%, 20%)'
 
 scrollX = 0
 scrollY = 0

      posY = y * SPACING + scrollY
      topX = posX + (MID[0] - posX) * Z_OFFSET
      topY = posY + (MID[1] - posY) * Z_OFFSET

      # bottom
      context.strokeRect(posX - SIZE_HALF, posY - SIZE_HALF, SIZE, SIZE)

      # sides

canvas.width = WIDTH
canvas.height = HEIGHT

context.fillStyle = BG
context.strokeStyle = FG

draw = () ->
  context.fillRect(0, 0, WIDTH, HEIGHT)
  
  for x in [-1...COUNT+2]
    for y in [-1...COUNT+2]
