tag:blogger.com,1999:blog-6029629494508626591.post360038932077645735..comments2024-03-27T07:26:29.743+00:00Comments on Pedro's Tech Mumblings: Maps and Boardgames (Part 3 - Client Side drawing + Optimizing)Pedro Sousahttp://www.blogger.com/profile/17058685497255714267noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-6029629494508626591.post-5442564067257643122013-09-09T21:54:24.439+01:002013-09-09T21:54:24.439+01:00I noticed a small flaw in one of your demos:
http...I noticed a small flaw in one of your demos:<br /><br />http://psousa.net/demos/maps-and-boardgames-part-3/canvas2.html<br /><br />If you click near the right or left most point of a hexagon it does not accurately detect which hexagon you clicked on. Instead it highlights one up or down to the left or the right. jjhhttps://www.blogger.com/profile/13697730943222093026noreply@blogger.comtag:blogger.com,1999:blog-6029629494508626591.post-39374531046661435752012-11-16T16:19:07.672+00:002012-11-16T16:19:07.672+00:00Ouch, you're right. Thanks a lot, I'm goin...Ouch, you're right. Thanks a lot, I'm going to update my post ;)Pedro Sousahttps://www.blogger.com/profile/17058685497255714267noreply@blogger.comtag:blogger.com,1999:blog-6029629494508626591.post-35457709312657112372012-11-16T14:10:26.193+00:002012-11-16T14:10:26.193+00:00Cool posts, thanks for the examples. The real reas...Cool posts, thanks for the examples. The real reason your example 1 takes soo long is because you're drawing too many hexes! (Though on Chrome and a nice computer it only takes me ~50ms)<br /><br />When I replace the drawHexagonGrid function like so,<br />{code}<br /> function drawHexagonGrid(context) {<br /><br /> var date1 = new Date().getTime();<br /><br /> var rows = 100;<br /> var columns = 100;<br /><br /> var topLeftHex = hex.getReferencePoint(0 - xOffset,0 - yOffset);<br /> var bottomLeftHex = hex.getReferencePoint(0 - xOffset,600 - yOffset);<br /> var topRightHex = hex.getReferencePoint(800 - xOffset,0 - yOffset);<br /> /*<br /> for (var i = 0; i < columns; i++) {<br /> for (var j = Math.round(0 - (i / 2)); j < Math.round(rows - (i / 2)); j++) {<br /> drawHex(context, {u:i, v:j});<br /> }<br /> }*/<br /> <br /> var offset = 0;<br /> for (var i = topLeftHex.u - 1; i <= topRightHex.u + 1; i++) {<br /> for (var j = topLeftHex.v - 1 - Math.round(offset); j < bottomLeftHex.v + 1 - Math.round(offset); j++) {<br /> drawHex(context, {u:i, v:j});<br /> }<br /> offset = offset + 0.5;<br /> }<br /><br /> var date2 = new Date().getTime();<br /><br /> document.getElementById("result").innerHTML = "Draw Time: " + (date2 - date1) + " ms";<br /> }<br />{code}<br /><br />It only takes in the single digits, I've re-enabled the drag code you had and it works fine.Sadohttps://www.blogger.com/profile/17652296382459603925noreply@blogger.com