**New here?**Learn about Bountify and follow @bountify to get notified of new bounties! Follow @bountify 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/

## 1 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.