I don't know how to create an extra orbiting circle in JavaScript

Question

I'am currently pretty new to JavaScript and I really need some help, to understand how certain stuff works. I found one javascript code in fiddle, where one rectangle is moving around on a circular track.

Now i'am trying to make something like solarsystem out of it. Where multiple circles are moving around sun with different speed. I manged to change rectangle to a circle, but I don't know how to create others (with different color, size and speed). If anyone happens to know the answer it would be great!

Ok heres code.

<canvas id="canvas" width=500 height=500></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var dd = 3;
var angle = 0;
var cx = 200;
var cy = 275;
var radius = 80;

ctx.fillStyle = "orange";
ctx.strokeStyle = "lightgray";

function draw(x, y) {
    ctx.clearRect(0, 0, w, h);
    ctx.save();
    ctx.beginPath();
    ctx.beginPath();
    ctx.arc(x - 8/2,y - 5,12 ,0 ,2*Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.restore();
};

var fps = 60;

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / fps);
    };
})();

function animate() {
    setTimeout(function () {
        requestAnimFrame(animate);

        // increase the angle of rotation
        angle += Math.acos(1-Math.pow(dd/radius,2)/2);

        // calculate the new ball.x / ball.y
        var newX = cx + radius * Math.cos(angle);
        var newY = cy + radius * Math.sin(angle);
        // draw
        draw(newX, newY);

        // draw the centerpoint 
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();

    }, 1000 / fps);
}
animate();
</script>

Answer 1

Here is a complete example of animating multiple circles on an HTML canvas :

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="A Whole Lotta' Circles!" name="title">
<title>A Whole Lotta' Circles!</title>

<style>
    body {
        margin: 0px;
        padding: 0px;
    }
    #myCanvas {
        border: 1px #CCC solid;
    }
</style>


</head>

<body>
    <div id="container">
        <canvas id="myCanvas" width="500" height="500">

        </canvas>
    </div>

    <script>

        var mainCanvas = document.getElementById("myCanvas");
        var mainContext = mainCanvas.getContext('2d');

        var circles = new Array();

        var requestAnimationFrame = window.requestAnimationFrame || 
                                    window.mozRequestAnimationFrame ||
                                    window.webkitRequestAnimationFrame ||
                                    window.msRequestAnimationFrame;


        function Circle(radius, speed, width, xPos, yPos) {
            this.radius = radius;
            this.speed = speed;
            this.width = width;
            this.xPos = xPos;
            this.yPos = yPos;
            this.opacity = .05 + Math.random() * .5;

            this.counter = 0;

            var signHelper = Math.floor(Math.random() * 2);

            if (signHelper == 1) {
                this.sign = -1;
            } else {
                this.sign = 1;
            }
        }

        Circle.prototype.update = function () {

            this.counter += this.sign * this.speed;

            mainContext.beginPath();

            mainContext.arc(this.xPos + Math.cos(this.counter / 100) * this.radius, 
                            this.yPos + Math.sin(this.counter / 100) * this.radius, 
                            this.width, 
                            0, 
                            Math.PI * 2,
                            false);

            mainContext.closePath();

            mainContext.fillStyle = 'rgba(185, 211, 238,' + this.opacity + ')';
            mainContext.fill();
        };

        function drawCircles() {
            for (var i = 0; i < 100; i++) {
                var randomX = Math.round(-200 + Math.random() * 700);
                var randomY = Math.round(-200 + Math.random() * 700);
                var speed = .2 + Math.random() * 3;
                var size = 5 + Math.random() * 100;

                var circle = new Circle(100, speed, size, randomX, randomY);
                circles.push(circle);
            }
            draw();
        }
        drawCircles();

        function draw() {
            mainContext.clearRect(0, 0, 500, 500);

            for (var i = 0; i < circles.length; i++) {
                var myCircle = circles[i];
                myCircle.update();
            }
            requestAnimationFrame(draw);
        }
    </script>
</body>

</html>

I don't know how to create an extra orbiting circle in JavaScript

Question

1 answers

solution1
2 2014-01-08 22:32:32

I don't know how to create an extra orbiting circle in JavaScript

Question

1 answers

solution1 2 2014-01-08 22:32:32

solution1
2 2014-01-08 22:32:32