Zhyohzhy Zhyohzhy - 5 months ago 7
jQuery Question

Switch rotation between objects

I’ve worked out a function that rotates objects around a main object, like planets around a sun.

I want to be able to change the object that the other objects rotate around at the click of a button. Example, I’ve got objects A, B and C. B and C rotate around A. But I want to be able to have C rotate around B, while B stays rotating around A. I’m trying to work this out in this code:

var objectX = "black";
function switchObject(){
objectX = "blue";

function rotation(coorX, coorY, object) {
object.side += (1.0 / object.speed);
var ang = object.side * 2.0 * Math.PI / 180.0;
var r = object.spin;

return {
x: Math.cos(ang) * r - Math.sin(ang) * r + coorX,
y: Math.sin(ang) * r + Math.cos(ang) * r + coorY

function rotationball ( circle ) {
var x, y, x_black, y_black, e, newpos;
e = document.getElementById ( circle );
x_black = parseFloat ( document.getElementById ( objectX ).getAttribute ( "cx" ) );
y_black = parseFloat ( document.getElementById ( objectX ).getAttribute ( "cy" ) );
newpos = rotation( x_black, y_black, ball[circle] );

e.setAttribute ( "cx", newpos.x );
e.setAttribute ( "cy", newpos.y );

I already know how to easily switch through which object is the object that the others rotate around by the objectX variable you see in the code. But that happens instantly, and I need it to be gradually, which infers a lot more difficult mathemathical code I think.

My question to you is:

What should my code have to look like in order for the red object to start rotating around the blue object, while the blue object keeps rotating around the black one. This needs to be done gradually though, in numerous rotations. I appreciate any help that comes my way, be it some of the code I would need or pointers in the right direction! Thanks in advance.

Here's my JsFiddle


I've wrote relative move ball. Just set relative coordinates for second "planet", mathematics remains the same, just change frame of reference. please see JsFiddle

relativeRotationBall("blue", "red");

var ball = { 
  blue: {speed: 1.2,    spin: 100,  side: 0.0} , 
  red:  {speed: 2.2,    spin: 200,  side: 0.0} // speed up

Update: Change reference frame on click switch button.

function preSetObjectRotation(dedfaultObject, frameReference) {    
    var self = this;
      this.defaultObject = dedfaultObject;
      this.defaultFrameReference = frameReference;
      this.setFrameReference = function (frameReference) {
          self.defaultFrameReference = frameReference;
      this.relativeRotationBall = function relativeRotationBall () {
        var e, newpos;
        e = document.getElementById ( self.defaultObject );
        newpos = relativeRotation( self.defaultFrameReference, ball[self.defaultObject] );
        e.setAttribute ( "cx", newpos.x );
        e.setAttribute ( "cy", newpos.y );

update JsFiddle

Update auto switch when dots on one line