CODEWITHSUNDEEP
javascriptjqueryrotation
ZoEM
ZoEM

Reputation: 852

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

PS: I was also going to program that each added planet would be positioned a bit farther from the central point (the sun) than the previously added planet.

Upvotes: 3

Views: 110

Answers (1)

VelikiiNehochuha
VelikiiNehochuha

Reputation: 4373

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

rotationball("red"); 
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 );
      }  
 }

JsFiddle

Update 2 Auto switch when dots on one line, in isEclipse function (JsFiddle )

Upvotes: 1

Related Questions