Convert OpenGL canvas coordinates to HTML5 canvas coordinates
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 +60开发者_C百科0y, while my canvas get from 0x to 400x and from 0y to 600y without negative coordinates.
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
精彩评论