Smooth drag scrolling of an Isometric map - Html5 - html

Question

I have implemented a basic Isometric tile engine that can be explored by dragging the map with the mouse. Please see the fiddle below and drag away:
http://jsfiddle.net/kHydg/14/
The code broken down is (CoffeeScript):
The draw function
draw = ->
requestAnimFrame draw
canvas.width = canvas.width
for row in [0..width]
for col in [0..height]
xpos = (row - col) * tileHeight + width
xpos += (canvas.width / 2) - (tileWidth / 2) + scrollPosition.x
ypos = (row + col) * (tileHeight / 2) + height + scrollPosition.y
context.drawImage(defaultTile, Math.round(xpos), Math.round(ypos), tileWidth, tileHeight)
Mouse drag-scrolling control
scrollPosition =
x: 0
y: 0
dragHelper =
active: false
x: 0
y: 0
window.addEventListener 'mousedown', (e) =>
handleMouseDown(e)
, false
window.addEventListener 'mousemove', (e) =>
handleDrag(e)
, false
window.addEventListener 'mouseup', (e) =>
handleMouseUp(e)
, false
handleDrag = (e) =>
e.preventDefault()
if dragHelper.active
x = e.clientX
y = e.clientY
scrollPosition.x -= Math.round((dragHelper.x - x) / 28)
scrollPosition.y -= Math.round((dragHelper.y - y) / 28)
handleMouseUp = (e) =>
e.preventDefault()
dragHelper.active = false
handleMouseDown = (e) =>
e.preventDefault()
x = e.clientX
y = e.clientY
dragHelper.active = true
dragHelper.x = x
dragHelper.y = y
The Problem
As you can see from the fiddle the dragging action is ok but not perfect. How would I change the code to make the dragging action more smooth? What I would like is the point of the map you click on to stay under the mouse point whilst you drag; the same as they have done here: http://craftyjs.com/demos/isometric/

Answer 1

Lots of libraries help with things like this. I would recommend using the data manipulation abilities of d3 to help, for several reasons.
First, in d3, there is a drag behavior where the origin of the object is stored and a mouse position relative to the origin is computed when the drag starts. Then, you can use the absolute position of the mouse to determine where the object should be and avoid the incremental errors that occur when you use relative changes - which get far worse when you start rounding them, as above.
dragMap = (d) ->
d.x = d3.event.x # d3.event.x, y are computed relative to the origin for you!
d.y = d3.event.y
dragBehavior = d3.behavior.drag()
.origin(Object) # equivalent to (d) -> d
.on("drag", dragMap)
d3.select(canvas)
.datum(x: 0, y: 0) # Load your canvas with an arbitary origin
.call(dragBehavior) # And now you can drag it!
Second, by using d3's linear or other numerical scales you can avoid doing typical drawing math yourself which is error-prone especially when you have to do it all over the place. Before you were scaling the drag by 28. In my current approach it's unnecessary, but if you change your drawing algorithm to use tiles instead of pixels, you can change this scale which will automatically convert mouse pixels into tile sizes.
pixelToTile = d3.scale.linear()
.domain([0, 1])
.range([0, 1])
Here's your fiddle re-done with d3 help. No dragHelper and all that extraneous code necessary. All the Math.round calls are also unnecessary except the one for canvas draw, which prevents antialiasing.
http://jsfiddle.net/kHydg/23/
Isn't that much shorter and sweeter?
P.S. Isometric real-time browser games are an awesome idea. I will definitely try making one when I have time.