How do I get the XY coordinates of a point on this warped platform?
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm trying to create a pseudo-3D effect of a 2D HTML5 Canvas game by slightly warping the platform players stand on. I indented the top left and right corners of the platform inward, and moved the platform's horizontal mid-point line a little upward. Now I need to be able to accordingly warp the x, y values of players' clicks on the rectangle surrounding the platform, and vice versa.

Graphic Demonstrating the Problem

For example, given the warping explained in the above pictures, 5, 48 on the rectangle containing the platform should convert to 0, 50 on the platform and vice versa. I need JavaScript functions for converting coordinates in both directions. This needs to work of course for all numbers in between the example points I drew, so I could e.g. smoothly animate a player across the the platform's 0,0 to 100,100 coordinates placing them on the appropriate warped positions.

EDIT: Here is a JSFiddle which probably explains the problem much better than I have. I've already done the X conversion in one direction. The Y needs to be filled in as well as made reversible. No need to make the X reversible as I have also done that on my own. https://jsfiddle.net/196m5kuf/95/

looking for the example you gave, by shrinking a plan (rectangle) to Trapezoidal don't move the "platform's horizontal mid-point line a little upward" so the center should be always (50, 50). if you would like to have that specific number (50, 48), you have to consider translating all the plan, not only the center axis. for this, (10, 0) for example would be (0, -2) and all the points would have that 2 translating interval difference than the picture. ... this is what looks logical for me, please let me know if i'm mistaking. Thanks.
Chlegou 1 month ago
By moving the mid point I meant what should be considered the mid point of the platform itself for this pseudo-3d perspective effect. Please see the JSFiddle edit, thanks!
nutrl 1 month ago
awarded to CyteBode

Crowdsource coding tasks.

1 Solution

Winning solution

I'm assuming the warping is akin to a perspective-like tapering transformation.

function rectToPlat(point, tapering) {
  var w = 50 / ((point[1]-100)*tapering + 50);
  var x = (point[0] - 50)*w + 50;
  var y = point[1] * w;
  return [x, y];
}

function platToRect(point, tapering) {
  var w = (50 - tapering*point[1]) / (50 - 100*tapering);
  var x = (point[0] - 50)/w + 50;
  var y = point[1] / w;
  return [x, y];
}

The tapering argument is how much the platform is skewed from each side, as a number from 0 to 1. So it's 0.1 in your case.

Edit: Renamed the functions, added a missing semicolon, removed confusion regarding the midpoint.

Please see my edit where I've added a demo and simplified the problem, thanks!
nutrl 1 month ago
I still don't understand how you're getting 48. At 48, the lines is a little too big for the size and if you place it at 50 it's perfectly sized. If it's a perspective transform, it should be 44.4, but if it's just linear, it should be 50.
CyteBode 1 month ago
You're right about it being too wide in my demo. I had it at 50 before realising I needed to move it up to complete the perspective effect. I picked 48 just based on what looked right. EDIT: Oh I understand your answer now, thanks for explaining the better way of doing this
nutrl 1 month ago
Thanks for awarding the bounty! Do you still need me to modify your demo?
CyteBode 1 month ago
No I should be okay now, thank you!
nutrl 1 month ago