Moving a circle around a point

Question

I have a circle (bounding circle) offset from the centre point of my entity and I'm looking on how to move that circle around the entity as it rotates so that it's always in the same spot of the character. For example, say I have a bounding circle for the front of a car, when the car turns, that bounding circle needs to turn too.

So I have two points: position which is the position of the entity's centre point and offset which is the offset of the circle from that position. This assumes an angle of 0.

So if my car is facing 0 degrees: position (150, 150) and offset (50, 0) then the bounding circle would be at 200, 150.

Now if I rotated the car 90 degrees, the bounding circle should be at position 150, 200.

This is what I have now:

var differenceX : Number = _centre.x - _offset.x;
var differenceY : Number = _centre.y - _offset.y;

var rotatedX : Number = differenceX * Math.cos(_angle);
var rotatedY : Number = differenceY * Math.sin(_angle);

var currentOffset : Point = new Point(_centre.x + rotatedX, _centre.y + rotatedY);

But it's giving me these long ovals and now a perfect circle.

Ideas?

Answer 1

Maybe try not using the entity to draw the circle:

var circlePositionX : Number = _centre.x - _offset.x;
var circlePositionY : Number = _centre.y - _offset.y;

var radius : Number = 50;

var rotatedX : Number = circlePositionX + (radius * Math.cos(_angle));
var rotatedY : Number = circlePositionY + (radius * Math.sin(_angle));

Hope that helps...

Answer 2

To rotate the car you effectively take it back to the origin and rotate it there and then translate it back. The circle centre is the same i.e. it is just another point on the car. Just perform the rotation on _offset alone and then translate it by _centre .

Answer 3

You are rotating the difference between the offset and the position of your object. I think you intuitively had the right idea of wanting to rotate the distance between the circle and it's object but might have mistaken the offset for your circle's position?. Either way, since you already have the offset, we don't need to calculate the distance between the two.

Also, when you rotate a 2D vector, you need to use 2D rotation as well. 2D rotations use the x and y component to compose each new x' and y' component. A quick google returns something like this.

Since code is always easier to understand :

var cosAngle : Number = Math.cos(_angle);
var sinAngle : Number = Math.sin(_angle);

var rotatedX : Number = _offset.x * cosAngle - _offset.y * sinAngle;
var rotatedY : Number = _offset.x * sinAngle + _offset.y * cosAngle;

var currentOffset : Point = new Point(_centre.x + rotatedX, _centre.y + rotatedY);

The oval shape of your previous rotation was due to not using a 2D rotation and the distance of your circle was probably off because the differenceX and differenceY weren't the right values.