Compare Mouse X,Y with Grid X,Y to find the closest grid position [closed]

EDIT: From two very good answers I have decided to use isometric projection instead of my silly grid of cordinates.

I am doing a game entirely in canvas, and I find it quite troublesome right now.

I felt silly trying to post the grid. Here is the code with the grid on hastebin.com

Since I have all the grid cordinates, I am iterating the 2D array and turn each iteration into a vertex that I compare to the mouse vertex. My goal is to find the vertex closest to the mouse vertex. Instead all I am returning right now is (17,0) every time, no matter where I click. Do you have any idea why?

``````function mouse_click(ev) {
var x = ev.clientX - c.offsetLeft;
var y = ev.clientY - c.offsetTop;
// Run click_grid

}

// Find the grid that is nearest the clicked cordinates.
function click_grid(xx,yy){
var result = [];
var result2 = [];
var best = [0,0];
var lastNode = [];
var currentNode = 9000;
for(var y = 0;y < 18; y++){
for(var x = 0; x < 18; x++){
// Distance = |P-E| = |(3,3)-(1,2)| = |(2,1)| = sqrt(2'2+1'2) = sqrt(5) = 2.23
result = [grid.grid_x[y][x] - yy,grid.grid_y[y][x] - xx];
result2 = [result[0] * result[0], result[1] * result[1]];
currentNode = Math.sqrt(result2[0] + result2[1]);
if(currentNode < lastNode){
best = [y,x];
}
lastNode = currentNode;
}
}
return([best]);
}
``````
-

closed as too localized by Byte56♦, bummzack, Sean Middleditch, Trevor Powell, Josh Petrie♦Mar 22 '13 at 15:19

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

I think `currentNode` needs to start "OVER 9000!", it's currently equal to 9000. But seriously, I think this question is a bit too localized for the site. Since it's just a debugging issue with your code. You may want to ask a new question about what the best way to go about this might be, since your current method looks a little overkill. – Byte56 Mar 6 '13 at 22:08
I think you are right :) – Oliver Schöning Mar 6 '13 at 22:10
I create a new, better question – Oliver Schöning Mar 6 '13 at 22:23

Judging from your grid, this is a simple isometric projection. Typically, we use linear algebra to figure out the coordinates, rather than iterating over all the grid coordinates.

For example: we know, based on your data, that the transformation looks something like this.

``````map (0,0) <-> screen (340,0)
map (0,1) <-> screen (360,10)
map (1,0) <-> screen (320,10)
``````

We can derive the formula:

``````mapcoordinates = [-x/40+y/20+8.5, x/40+y/20-8.5 ]
``````

for example, if you try out this code, it should alert the same results (sans bounds checking) I flipped x and y because of the choice of coordinates labels is reversed, and I added 0.5 and then converted to integer (`>>0`) to handle rounding to the "nearest" coordinate:

``````function click_grid(x,y) {
return [-y/40+x/20+9>>0,y/40+x/20-8>>0];
}
``````
-
Does this mean.. I could avoid a messy grid like the one I have on the link and replace it with a 2 coordinate grid and do that calculation to find the positions? That would currently remove two of my 3 arrays. Which would be nice. – Oliver Schöning Mar 6 '13 at 23:28
yes, you don't need a grid of coordinates to search through. That's an extremely wrong way of doing isometric tiles. – Jimmy Mar 6 '13 at 23:29
Thank you! I was starting to think about using a Rectangle Polygon: i1294.photobucket.com/albums/b603/oliverschoening/… – Oliver Schöning Mar 6 '13 at 23:32
I do not fully grasp your example, I am going to to some google searches on isometric tiles and grid coordinates algebra. Does that sound like the correct thing to "google"? – Oliver Schöning Mar 6 '13 at 23:34
Yes, sounds about right. – Jimmy Mar 6 '13 at 23:40

I think you want to move `lastNode = currentNode;` inside the `if` like:

``````        if(currentNode < lastNode){
best = [y,x];
lastNode = currentNode;
}
``````
-
No, then it would never loop through any nodes. – Oliver Schöning Mar 6 '13 at 21:57
currentNode is the distance from the mouse to the currentNode right? lastNode is the distance from the mouse to the previousNode in the list right? – pauld Mar 6 '13 at 22:02
If that's right, you want to initialize last node to something really large (9000), and move "lastNode = currentNode" inside the if statement. Otherwise I guess I don't understand what you are trying to do. – pauld Mar 6 '13 at 22:03
I did that now, it did actually change something although I don't see why it should, it is the best[array] that gets returned, all this did was reduce the amount of times lastNode changes ? – Oliver Schöning Mar 6 '13 at 22:07
"lastNode" should really be named "bestDistance" and "currentNode" is "currentDistance". So you only want to update the "bestDistance" if your current distance is better than your previous best distance. – pauld Mar 6 '13 at 22:11