0

I'm finding the angle between the centre of my circle and the triangle in degrees like so:

atan2((centre.y-triangle.y), (centre.x-triangle.x) * 180 / PI - 90

I'm setting the rotation of my triangle object which takes degrees as a parameter. The issue is all of my triangles are not rotated outwards correctly, which I presume is a result of the calculation of my position which is done like this:

triangle.x = -(width / 2) + (stage.width / 2) + radius * sin((index / total) * (2 * PI))

Here is an example of what happens, as you can see the last few triangles in the circle appear to be facing outwards correctly.

enter image description here

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Aequitas
  • 181
  • 2
  • 13
  • it looks cool. Just leave it like this! ..but no, its too much for me to be thinking about this kind of maths right now. I would imagine you will find the answer faster by tweaking some values and seeing what effect they have. I am wondering if perhaps your triangle positions (i.e. `triangle.y`) are not appropriate. Perhaps they should be the centre of the triangle instead? (its gotta be something to do with rotation point). I don't see many of these types of question get answered here (not that I read everything), perhaps you will have more luck at [GameDev](http://gamedev.stackexchange.com/) – musefan Apr 10 '13 at 10:31
  • The transformation origin is the centre of the triangle. – Aequitas Apr 10 '13 at 10:41
  • Is that also the same point you are using to calculatethe angle from the center of the circle? and the same point you are using to position the triangle? You will need to add half the height of the triangle to the radius when calculating the position I think. – musefan Apr 10 '13 at 10:42
  • Yes it is, and adding the half height to the radius simply moves the position of the triangle, it doesn't affect the rotation. – Aequitas Apr 10 '13 at 11:04
  • I have made some edits to my answer, including be able to test it, and it works. The important bit for you might be my "Note" at the bottom! – musefan Apr 10 '13 at 11:56

2 Answers2

1

OK, I need some answer space to put all this info.

First of all you need to calculate the angle of a given triangle. You can do that with the following:

int angle = (360 / numberOfElements) * triangleIndex;

You also need to work out a "slice" (don't no what that is, just read it) to use for calculating the new positon:

var slice = (2 * Math.PI / numberOfElements) * triangleIndex;

Next, you need to work out the position of each triangle:

int tempRadius = radius + (int)(triangleHeight / 2);
int traingleCentreX = (int)(centre.X + tempRadius * Math.Cos(slice));
int traingleCentreY = (int)(centre.Y + tempRadius * Math.Sin(slice));
//assuming centre is the centre of the circle

[Credit for all this maths goes to this answer ]

Now that you have the correct position of each of your triangles, you should be able to apply the rotation (using angle) and it should look amaze-balls!

NOTE: Positions will be calculating starting at the right (i.e. 90 degrees). So when doing the rotation add an extra 90 degrees!

http://jsfiddle.net/TcENr/ (it as the quickest to test!)

Community
  • 1
  • 1
musefan
  • 47,875
  • 21
  • 135
  • 185
  • So essentially the working out the angle is exactly the same as working out the "slice". This is also exactly the same way I'm currently working out my positioning. The link at the end of your answer is very helpful, thanks. Everything seems correct there. Perhaps edit your answers to reflect this? – Aequitas Apr 10 '13 at 13:45
  • @Aequitas: Cheers, thought I had edited it correctly, seems I copied the same bit twice by mistake – musefan Apr 10 '13 at 14:02
  • I've edited my question after coding an attempt with that angle calculation. It's actually worse off. Any thoughts as to why? – Aequitas Apr 10 '13 at 16:36
  • no, it doesn't make sense. If you are using the code I have used in the asnwer then it should be fine. The only bit I don't know how you are doing it is the rotation stuff. IF you remove the rotation bit do you get accurate looking positions? with each triangle facing up? Try a few different hard-coded angles to see if you can see any pattern. One thing that might be worth mentioning, I have a slight memory of doing something with Matrix rotation that required the angle to be between 0 and 1, rather than 0 and 360. So perhaps try `angle = 100 / angle` before passing it to the rotation function – musefan Apr 10 '13 at 16:45
  • Yes, the positioning is fine without applying any rotation, they all face up. The rotation parameter is also calculated in degrees. What's really strange is that your example obviously looks perfect, so there must be some other factor influences the outcome. – Aequitas Apr 10 '13 at 17:01
0

The issue with the subtle offset of the rotation was because I wasn't adding the half width and height of the triangle to it's position, this fixed the problem:

rotation = atan2(centreY-(triangleY+triangleHalfHeight),centreX-(triangleX+triangleHalfWidth)) * 180 / Math.PI - 90;
Aequitas
  • 181
  • 2
  • 13