Question

I’m have a Java Applet OpenGL simulation and I’m trying to convert
to a HTML5 canvas. Anyone know how can I convert these coordinates?

OpenGL get from -400x to +400x and from -600y to +600y,
while my canvas get from 0x to 400x and from 0y to 600y
without negative coordinates.

Answer 1

It’s just a simple linear function you need to have. Linear functions have the form f(x) = m * x + n

For the x-coordinate:

You want to map -400 to 0 and 400 to 400, so you have two points (-400, 0), (400, 400) that describe your linear relation.

You now compute the gradient m with (y2-y1)/(x2-x1), in this example: m = (400-0)/(400–400) = 1/2

So your function now looks like: f(x) = 1/2 * x + n

To compute n (the y-intercept) you just insert a point (e. g. (-400, 0)):

0 = 1/2 * (-400) + n

You get n as 200. So the final function is f(x) = 1/2 * x + 200

For the y-coordinate you get g(y) = 1/2 * y + 300