HTML5 Javascript rotation

Question

I'm new to JavaScript (and programming) and am struggling with how to add rotation in a HTML5 Canvas. I'm basically trying to get a JavaScript object to rotate around another object. In my case I need to get a planet to orbit around the sun.

I currently have the planets declared within the draw function and they display fine. I just need help on how to add rotation.

Thanks for your time.

Answer 1

Here's a simple example: http://jsfiddle.net/FTMCv/1/

The CelestialBody class that I've created only accounts for circular orbits, so it's not a perfect simulation, but it might suffice in most instances.

(function(){

    var can = document.getElementById('planetarium'),
        ctx = can.getContext('2d'),
        bodies = [];


    (function init(){
        var orbCenter = {x:can.width/2, y:can.height/2};

        bodies.push(new CelestialBody(
            50, orbCenter , 0, 0));

        bodies.push(new CelestialBody(
            15, orbCenter , 250, -.2));
        bodies.push(new CelestialBody(
            6, orbCenter , 200, .3));
        bodies.push(new CelestialBody(
            7, orbCenter , 150, .5));
        bodies.push(new CelestialBody(
            5, orbCenter , 100, 1));
        bodies.push(new CelestialBody(
            4, orbCenter , 75, 3));
    })();

    function CelestialBody(radius, orbitalCenter, orbitalDistance, orbitalVelocity){
        var pos = {x:0, y:0},
            rad = radius,
            orb = {x: orbitalCenter.x, y:orbitalCenter.y},
            ove = orbitalVelocity,
            odi = orbitalDistance;

        var update = function(){
            var cAng = Math.atan2(pos.y - orb.y, pos.x - orb.x);
            var rAng = cAng + ove * Math.PI/180;

            pos.x = orb.x + Math.cos(rAng) * odi;
            pos.y = orb.y + Math.sin(rAng) * odi;
        };

        this.draw = function(ctx){
            update();

            ctx.beginPath();
            ctx.fillStyle = "#fff";
            ctx.arc(pos.x,pos.y, rad, 0, 2*Math.PI);
            ctx.fill();
        };

        (function init(){
            pos.y = orb.y;
            pos.x = orb.x + odi;
        })();
    }

    (function draw(){
        ctx.clearRect(0,0,can.width,can.height);

        for(var i = 0; i < bodies.length; i++)
            bodies[i].draw(ctx);

        webkitRequestAnimationFrame(draw);
    })();

})();​