CODEWITHSUNDEEP
htmlanimationcanvasfor-loop
ToddN
ToddN

Reputation: 2961

HTML5 Multiple Circle Animations onclick of Button

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();
});

Upvotes: 1

Views: 994

Answers (1)

Marc Marta
Marc Marta

Reputation: 542

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();
});

Upvotes: 2

Related Questions