2
\$\begingroup\$

I have photos distributed as cells. When I click, I get the corresponding row and column. console.log("Col:" + X + "Row:" + Y);

When applying an isometric view conversion like this:

ctx.translate(0, 300); ctx.scale(1, 0.5); ctx.rotate(-45 * Math.PI /180);

I do not know what mathematical formula applies to get the coordinates correctly.

Example of isometric map


Based on feedback so far, I've been able to get this far. The x coordinate seems to work fine, but the y coordinate not.

Isometrico();

function Isometrico(){ 
     ctx.translate(0, 300);
     ctx.scale(1, 0.5);
     var radianes= -45 * Math.PI /180; 
     ctx.rotate(radianes); 
}

/*
document.addEventListener("mousedown", function(e) { 
             CorIsometrico( e.offsetX, e.offsetY); 
});
*/

/*
function CorIsometrico(xI,yI){ 
     //RESPUESTA yI=yI-300;
     yI = yI * 2; 
     xI = xI * Math.cos(45) - yI * Math.sin(45); 
     I  = yI * Math.sin(45) + yI * Math.cos(45); 
     console.log("Coor Isometricas:" + xI + "/"+ + yI); 
}
*/

Edit:

Each cell is 50x50. Having 10 columns and 50 rows, the information of each cell would look like this:

1: 50/50 2: 100/50 3: 150/50 ... 49: 450/250 50: 500/250

Maximum Y value = 250.

xI=xI*Math.cos(45 / 180 * Math.PI)-yI*Math.sin(45 / 180 * Math.PI); yI=yI*Math.sin(45 / 180 * Math.PI)+yI*Math.cos(45 / 180 * Math.PI); yI=yI*2; yI=yI-300;

Click in X:1 / Y:1 = -138.5929291125633/ 531.5575746753798 Click in X:1 / Y:5= 198.69700551341987/ 90.3229432149742

Y exceeds the maximum value.


Edit2:

var xI2=xIMath.cos(45 / 180 * Math.PI)-yIMath.sin(45 / 180 * Math.PI); var yI2=xIMath.sin(45 / 180 * Math.PI)+yIMath.cos(45 / 180 * Math.PI); yI2=yI*2; yI2=yI-300; xI2=xI2+150;

/// console.log("Coor Isometricas:" + xI2 + "/"+ + yI2 );

x coor : 100 to 400 px if x+150; y coor: 0 to -155.

Been thinking that the problem is not necessary on isometry. What I'm looking for can be simplified to get the coordinates of a 2d plane by having it rotated X degrees

\$\endgroup\$
  • 2
    \$\begingroup\$ We have a lot of existing questions about converting to & from isometric coordinates, so you may be able to find your answer faster in those. \$\endgroup\$ – DMGregory May 16 at 13:12
  • 1
    \$\begingroup\$ When you have a series of transforms that take you from world coordinates to screen coordinates, you can invert this process by applying the inverse of each transform in reverse order. ctx.rotate(+45 * Math.PI/180); ctx.scale(1, 2.0); ctx.translate(0, -300); should take you from screen coordinates (mouse click) back to world coordinates. \$\endgroup\$ – amitp May 16 at 14:27
  • 1
    \$\begingroup\$ @amitp I'd upvote an answer along those lines. :) \$\endgroup\$ – DMGregory May 16 at 16:12
  • \$\begingroup\$ Works fine. Solution: yI=yI-300; yI=yI*2; var angle = ((-45 * Math.PI /180) * -1); var x2 = xI; var y2 = yI; var cos = Math.cos(angle); var sin = Math.sin(angle); var xI2 = Math.floor(x2 * cos - y2 * sin); var yI2 = Math.floor(x2 * sin + y2 * cos); \$\endgroup\$ – ALBERT BENAVENT May 21 at 15:26
2
\$\begingroup\$

How you do this depends on the type of isometric surface you have

A diamond shaped surface is basically just a grid rotated by 45 degress and squashed along the y axis. To calculate the coordinate of the clicked tile, just multiply the y coordinate by 2 (or if your tiles don't have the standard 2:1 ratio, just divide the width by the height and multiply by that value), then subtract the position of top tile and apply a +45° rotation (45° clockwise). You can do the last step by using the formula

$$x'=x\cdot cos(45°)-y\cdot sin(45°)$$ $$y'=x\cdot sin(45°)+y\cdot cos(45°)$$

Where \$(x';y')\$ is the new coordinate. This will give you a position in a coordinate system where the top left tile is the (0; 0). Floor the x and y coordinates if you need the tile coordinates.

A staggered isometric projection looks like this:

enter image description here

If you need to convert the coordinates from this to a cartesian coordinate system, follow this answer

\$\endgroup\$
  • \$\begingroup\$ Thanks This is what I am looking for. The x coordinate seems to work fine, but the y coordinate not. See my edited question for the code I'm using. \$\endgroup\$ – ALBERT BENAVENT May 20 at 15:30
  • \$\begingroup\$ @ALBERTBENAVENT "but the y coordinate not" - in what specific way does it "not"? There are a lot of ways for a coordinate to be incorrect, and the specific symptoms of the problem can help us work toward a solution. \$\endgroup\$ – DMGregory May 20 at 15:58
  • \$\begingroup\$ @ALBERTBENAVENT JavaScript Math.cos and Math.sin operate on radians, not on degrees, so you have to convert them. To go from degrees to radians, you divide by 180 and multiply by pi (degree / 180 * Math.PI). Plug the result in the trigonometric functions \$\endgroup\$ – Bálint May 20 at 16:26
  • \$\begingroup\$ Each cell is 50x50. Having 10 columns and 50 rows, the information of each cell would look like this: 1: 50/50 2: 100/50 3: 150/50 ... 49: 450/250 50: 500/250 Maximum Y value = 250. xI=xIMath.cos(45 / 180 * Math.PI)-yIMath.sin(45 / 180 * Math.PI); yI=yIMath.sin(45 / 180 * Math.PI)+yIMath.cos(45 / 180 * Math.PI); yI=yI*2; yI=yI-300; Click in X:1 / Y:1 = -138.5929291125633/ 531.5575746753798 Click in X:1 / Y:5= 198.69700551341987/ 90.3229432149742 Y exceeds the maximum value. \$\endgroup\$ – ALBERT BENAVENT May 20 at 17:43
  • \$\begingroup\$ @ALBERTBENAVENT You have a couple of problems there. First of all, you wrote y = y * sin(angle) + y * cos(angle) instead of y = x * sin(angle) + y * cos(angle). Secondly, you need to store the values in new variables. If you store the new x in xl, then it won't be the same old x value when you do the calculations for the y coordinate. That's why I used \$x'\$ instead of simply \$x\$ in the equations \$\endgroup\$ – Bálint May 20 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.