How to make some small Circles rotate around a Big Central Circle ?

[satya1907]

Hi, Thank you once more.. :) I want to make a Solar system kind of Demo. But, here the Orbit is just one. In that Orbit, i want to rotate small circles around a Center Large Circle.

Can you please help me..

Thanks

[caleb531]

You can specify the translateX or translateY property to offset the center of rotation. Keep in mind that you will need to adjust the x and y coordinates of your planet accordingly.

Here's an example in which the earth will orbit once around the sun. Notice that the x and y properties of the sun and earth and exactly the same. However, the earth is translated to the right so it's not too close to the sun.

$("canvas")
.jCanvas({
  layer: true,
  x: 160, y: 150  
})
.drawArc({
  name: "sun",
  fillStyle: "#fc0",
  radius: 50,
})
.drawArc({
  name: "earth",
  fillStyle: "#36c",
  radius: 10,
  translateX: 100
})
.jCanvas()
.animateLayer("earth", {
  rotate: 360
}, 3650);

[satya1907]

Thanks a lot.. :) But, it only rotates ONCE !! I want it to rotate always !! Moreover, I want to make more planets to rotate at different orbits.. !!

Thanks

[caleb531]

Oh, my apologies. That doesn't require much more work.

Here's a basic example (this time, I've added Mars to accompany Earth). The custom cycle that I've defined is a integer representing the number of earth days for each planet year (1 day per 10 milliseconds).

Let me know if you have any questions. :)

-Caleb

var $canvas = $("canvas");

$canvas
.jCanvas({
  layer: true,
  x: 160, y: 150  
})
.drawArc({
  name: "sun",
  fillStyle: "#fc0",
  radius: 50,
})
.drawArc({
  name: "earth",
  fillStyle: "#36c",
  radius: 10,
  translateX: 80,
  data: {
    cycle: 365
  }
})
.drawArc({
  name: "mars",
  fillStyle: "#c33",
  radius: 15,
  translateX: 120,
  data: {
    cycle: 365 * 1.88
  }
})
.jCanvas();

function orbit(planet) {

  $canvas.animateLayer(planet, {
    rotate: '+=360'
  }, planet.data.cycle*10, 'linear', function() {
    orbit(planet);
  });

}

orbit($canvas.getLayer('earth'));
orbit($canvas.getLayer('mars'));

[satya1907]

Thanks a lot.. :) Have a great day ahead !! :)