CODEWITHSUNDEEP
javascriptcanvashtml5-canvascreatejseaseljs
Fleming Slone
Fleming Slone

Reputation: 177

Rotating One Object Around Another In createJS/easelJS

In easelJS, what is the best way to rotate an object around another? What I'm trying to accomplish is a method to rotate the crosshair around the circle pictured below, just like a planet orbits the sun:

enter image description here

I've been able to rotate objects around their own center point, but am having a difficult time devising a way to rotate one object around the center point of a second object. Any ideas?

Upvotes: 1

Views: 717

Answers (3)

Nay Oo Kyaw DS
Nay Oo Kyaw DS

Reputation: 1

Put another point respect to origin point with the same direction

var one_meter = 1 / map_resolution;

// get one meter distance from pointed points
var extra_x = one_meter * Math.cos(temp_rotation);
var extra_y = one_meter * Math.sin(-temp_rotation);

var new_x = mapXY.x + extra_x;
var new_y = mapXY.y + extra_y;

var home_point = new createjs.Shape().set({ x: new_x, y: new_y });
home_point.graphics.beginFill("Blue").drawCircle(0, 0, 10);

stage.addChild(home_point);
stage.update();

enter image description here

enter image description here

Upvotes: 0

Andrew
Andrew

Reputation: 1030

To build on what Lanny is suggesting, there may be cases where you don't want to rotate the entire container. An alternative would be to use trigonometric functions and an incrementing angle to calculate the x/y position of the crosshair. You can find the x/y by using an angle (converted to radians) and Math.cos(angleInRadians) for x and Math.sin(angleInRadians) for y, the multiply by the radius of the orbit.

See this working example for reference.

Here's a complete snippet.

var stage = new createjs.Stage("stage");
var angle = 0;

var circle = new createjs.Shape();
circle.graphics.beginFill("#FF0000").drawEllipse(-25, -25, 50, 50).endFill();
circle.x = 100;
circle.y = 100;

var crosshair = new createjs.Shape();
crosshair.graphics.setStrokeStyle(2).beginStroke("#FF0000").moveTo(5, 0).lineTo(5, 10).moveTo(0, 5).lineTo(10, 5).endStroke();

stage.addChild(circle);
stage.addChild(crosshair);

createjs.Ticker.addEventListener("tick", function(){

  angle++;
  if(angle > 360)
    angle = 1;

    var rads = angle * Math.PI / 180;
    var x = 100 * Math.cos(rads);
    var y = 100 * Math.sin(rads);
    crosshair.x = x + 100;
    crosshair.y = y + 100;

    stage.update();
});

Upvotes: 1

Lanny
Lanny

Reputation: 11294

Might make sense to wrap content in a Container. Translate the coordinates so the center point is where you want it, and then rotate the container.

Upvotes: 1

Related Questions