I'm trying to write a script (javascript) in an API of a Virtual Table Top program so I can manipulate some tokens (Car Wars :)).
I'm sort of finding the answer, but it seems like I'm struggling and reinventing the wheel so I thought I'd ask for help. One reason I'm getting confused is the program returns results based on +y is down and Deg go clockwise which is different than what all the trig formulas want (counter clockwise and +y is up).
Here is what I have access to. Rectangle rotates around centre, Centre point(x,y), width, height, and rotation. I've got the code working for moving the rectangle in the direction of the rotation, side to side, up and down, etc. Now I need to be able to rotate it around any of the four corners or any point would be nice, but four corners are all thats needed.
It won't let me include an image since I'm new so I hope the description is good enough. I had an image all done up. :(
In the API I can't actually draw the rectangle, I can only set its rotation, and centre value. So my thought was if I can find the x,y of one corner currently, then rotate it the desired degs around the centre (I can do this easily by setting the rectangles rotation), find the new x,y of that same corner. Then I will know the offset and apply that to the centre (thats how the rectangle is moved as well).
So I need to be able to find the x,y of any corner of a rectangle at any given starting angle, then again at a new angle rotated at its centre. This offset would then be easily applied to the centre x,y and the rectangle would see to have rotated along one of its corners.
Thanks for any help you can give. I'm hoping I will eventually figure it out, just writing this description out actually has helped me think it through. But I'm currently stuck!
Konrad
The trick to rotating around an arbitrary point in 2d (eg, one of the four corners of the rectangle), is to first translate the vertices of the shape so that the point around which you want to rotate is in the origin (ie 0,0).
To achieve this:
1. Translate your rectangle by (-x, -y).
2. Rotate your rectangle by the desired angle.
3. Translate your rectangle by (x, y) to place it back where it originally was.
where (x,y) is the x/y coordinates of the point around which to rotate.
You can use negative angles to adjust for clockwise rotations.
There is a lot of info about this on the net, for example:
http://www.siggraph.org/education/materials/HyperGraph/modeling/mod_tran/2drota.htm
Related
I have some coordinates which i want to display as points, but they are in the negative range. I need to redefine the center of the canvas, so it won't be {width/2, height/2}, but it will be truly the {0,0}, or origo of the canvas.
I tried flipping scales and translating coordinates so far, but it just skews the coordinates. If what I mentioned in the title cannot be done, i need some tips to overcome this problems, since im not that great with this kind of stuff.
Since it's coordinates of a game's map, i would like to see the exact copy of that.
I am absolutely confused on what the clipAngle method in d3 does. I've poked in the wiki and in the library its self but am not able to put it in plain vanilla English.
https://github.com/mbostock/d3/wiki/Geo-Projections#clipAngle
I see that my orthographic projection gets sliced in half if the clip angle is set to 90.
If set to 180 I see the front and the back of the sphere
Zero I se nothing
So basically I can imagine this as a plane slicing the sphere?
thanks!
Imagine a pin that's anchored in the center of the sphere pointing straight at you, it's now at 0 degrees, and this doesn't render anything. Change the angle of this pin by moving the end pointing at you up. At 90° the pin is pointing straight up and it renders everything between 0° and 90°. Rotate it a bit further and it starts to render the back half of the sphere.
For reference, here's one clipped at 107° so that it renders a bit of the backside and appears to "wrap" around the inner globe:
Im going to try to explain this as best as I can.
I have a centerpoint defined on a canvas element where I am using Kinetic JS to draw triangles.
What I want to do, is create an array of coordinates based on the center point of the excircle radius of a triangle (Kinetic draws regular polygons by using the excircle radius) to see how many of the triangle center points will fit on the canvas in a grid structure. Think this but bigger:
Now Ive already done this with squares because they fall in the same interval from the centerpoint on both the X axis and the Y axis. However with triangles this ends up being different due to where the radius center point of the excircle on a triangle is. Here is a semi clear picture illustrating the interval difference:
Now these coordinates HAVE to be pushed into an array in a very specific way, or else the way I have planned for them to interact will not work correctly.
Ultimately I want to find the bottom most triangle coordinate possible. Find out if that triangle is flipped at 180 degrees or 0 degrees respectively while making sure the centerpoint of the entire canvas is touching the vertex of a triangle.
Sounds complicated? It is. Ive been trying several different methods and racking my brain for two weeks now, and I cant figure out an algorithm that will allow me to do this from any canvas size possible.
I'm doing some graphing around a center X,Y of 0,0. When it's time to render, I reposition with translate, and then use scale to make the graph fill the canvas (ie scale everything by 50% for example).
I notice that it matters whether you call scale and then translate, or translate and then scale and I can't quite get my head around it. This is a problem since everything doesn't always fit, but my mental model isn't complete so having a hard time fixing it.
Can someone explain why the order of the scale and translate calls matter?
So let's draw a grid on a 300x300 canvas:
http://jsfiddle.net/simonsarris/4uaZy/
This will do. Nothing special. A red line denotes where the origin is located by running through (0,0) and extending very very far, so when we translate it we'll see something. The origin here is the top left corner, where the red lines meet at (0,0).
All of the translations below happen before we draw the grid, so we'll be moving the grid. This lets you see exactly what's happening to the orgiin.
So lets translate the canvas by 100,100, moving it down+right:
http://jsfiddle.net/simonsarris/4uaZy/1/
So we've translated the origin, which is where the red X is centered. The origin is now at 100,100.
Now we'll translate and then scale. Notice how the origin is in the same place as the last image, everything is just twice as large.
http://jsfiddle.net/simonsarris/4uaZy/2/
Boom. The orgin is still at 100,100. Everything is puffed up by 2 though. The origin changed, then everything gets puffed up in place.
Now lets look at them in reverse. This time we scale first, so everything is fat from the start:
http://jsfiddle.net/simonsarris/4uaZy/3/
Everything is puffed by 2. The origin is at 0,0, its starting point.
Now we do a scale and then a translate.
http://jsfiddle.net/simonsarris/4uaZy/4/
We're translating by 100,100 still, but the origin has moved by 200,200 in real pixels. Compare this to two images previous.
This is because everything that happens after a scale must be scaled, including additional transforms. So transforming by (100,100) on a scaled canvas leads to it moving by 200, 200.
The takeaway thing to remember here is that changing the transformation affects how things are drawn (or transformed!) from then on. If you scale x2, and then translate, the translation will be x2
If you want to see, mathematically, what is happening at each step I encourage you to take a look at the code here:
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
This mimics the entire transformation process done by canvas and lets you see how previous transforms modify those that come afterwards.
Scaling and rotation are done respect to the origin so if your transform has a translation, for example, then this will make the order important.
Heres a good read:
Why Transformation Order Is Significant
What I want to achieve is a camera rotation like http://www.keithclark.co.uk/labs/3dcss/demo/ . It's not perfect and sometimes the camera breaks, but that's the idea.
I like the rotation to be similar like a human view, but I only managed to obtain a rotation across a certain point. This is an example of what I obtained http://jsfiddle.net/gaAXk/3/.
As i said before, i would like a human like behaviour.
I also tried with -webkit-transform-origin but with no better result.
Any help/suggestion will be highly appreciated.
The problem here is the following:
To give a human-like behavior, when the point of view moves, you should calculate the new positions on the x/y/z axis for the objects (not just the rotation angle in case of a rotation, for instance).
CSS transform should work in the follwing way, we give a perspective, for example of 800px to a scene. Then the objects will be visible with a Z position up to 800px, if the Z position is, for example 1000px, it will be behind our point of view, so we won't be able to see the element.
That said, after a rotation you should calculate the new position for the items based on our new point of view.
To be clearer I've updated your example with much simpler code (it only supports rotation and there's just one image): http://jsfiddle.net/gaAXk/12/
The perspective in the example is 800px.
The image is initially placed at x=0px, y=0px, z=0px. So it will be visible in front of us at a "distance" of 800px.
When we rotate the point of view, the element should move along a circumference around the point of view, so the x,z positions and the rotation angle of the element, needs to be updated.
The element in the example moves along a circumference with 800px radius (the calculatePos() function does the trick).
The same calculation should be updated if we change position (if the point of view gets closer to some objects, and further from others).
This isn't so trivial. If anyone has better solutions (I'm not a 3D expert), I will be glad to hear some.