Skip to content

JS: convert 2D matrix into another?

I have a 2D matrix with an -1000 to + 1000 X/Y coordinate system. For plotting purposes, I want to transform that into another coordinate system, where 0,0 is at the top left. Any idea how to do that? I know how to do a linear projection of a single axis, but doing that independently yields distortions, especially if the origin matrix is not really rectangular like the target.

Sample data:

[{ "type": 2, "x": 201, "y": -201 }, { "type": 2, "x": 201, "y": -200 }, { "type": 2, "x": 201, "y": -199 }]

Type here is an information about the nature of the point.

I would have liked to post more code, but I am at a loss how the mathematical operation is called…

Answer

you can just map all elements adding + 1000 to x and y like this

const data = [{ "type": 2, "x": 201, "y": -201 }, { "type": 2, "x": 201, "y": -200 }, { "type": 2, "x": 201, "y": -199 }]


const dataWithOrigin = data.map(({x, y, ...d}) => ({...d, x: x + 1000, y: y +1000}))

console.log(dataWithOrigin)