Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

When I click my button in the following code, a linear animation occurs for a circle. How can I get it to where that original circle keeps moving on its path and start a new animation along the same path with another circle, I would like to be able to do this multiple times, sometimes I may have 10 on there or so.

Currently when I click the button multiple times it either starts from the beginning of the canvas or pulsates between two animating circles.

$('#dSubmit').click(function(){

    var ctx;
    var x = 15;
    var y = 50;
    var dx = 1;
    var dy = 0;
    var WIDTH;
    var HEIGHT; 

    function init() {
      ctx = $('#canvas')[0].getContext("2d");
      WIDTH = $("#canvas").width();
      HEIGHT = $("#canvas").height();
      return setInterval(draw, 10);
    }   

    function circle(x,y,r) {
    ctx.fillStyle = "#81cbf2";
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI*2, true);
      ctx.closePath();
      ctx.fill();
    }

    function rect(x,y,w,h) {
      ctx.beginPath();
      ctx.rect(x,y,w,h);
      ctx.closePath();
      ctx.fill();
    }

    function clear() {
     ctx.clearRect(0, 0, WIDTH, HEIGHT);
    }

    function draw() {
      clear();
      circle(x, y, 10);

      x += dx;
      y += dy;
    }

    init();
});
share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

First off, this whole thing should not be contained in the click function of a jQuery object. It should be outside.

Second, you do not need to make new intervals every time you click, nor do you need to keep getting the dimensions.

Third, some functions expressed do not need to be made. See below.

Finally, the biggest issue is that you only have one variable for x and y. You need to keep track of every circle you want to make, so you need to make x and y a dynamic array for every new circle you want to initialize.

I would do it like this instead:

var ctx;
var x = [];
var y = [];
var dx = 1;
var dy = 0;
var WIDTH;
var HEIGHT;
var interval;

function init() {
    var theCanvas;
    if(ctx === undefined) { //only need this once.
        theCanvas = $('#canvas')[0];
        ctx = theCanvas.getContext("2d");
        WIDTH = theCanvas.width;
        HEIGHT = theCanvas.height;
        interval = setInterval(draw, 10); //Will start after init is completed
    }

    x.push(50); //Start a new path for the next circle: x = 50
    y.push(15); //New path: y = 15
}   

function circle(x, y, r) {
    ctx.fillStyle = "#81cbf2";
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

//rect() isn't needed: ctx.fillRect(x, y, w, h) will do this for you. It's also not used.
//Clear is not needed either. It only calls one function.

function draw() {
    var i = x.length;
    ctx.clearRect(0, 0, WIDTH, HEIGHT);

    while(i--) {    
        circle(x[i], y[i], 10);
        x[i] += dx;
        y[i] += dy;
    }
}

$('#dSubmit').click(function(){
    init();
});
share|improve this answer
 
This worked great. Very precise and I have a much better understanding of how to do this, thank you very much! –  ToddN Jun 11 '13 at 19:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.