Usando Raphael JS para flutuar formas ao redor da tela

Question

Estou trabalhando para ter algumas formas flutuando ao redor da tela aleatoriamente. Eventualmente, eles interagirão entre si, assim como as funções do OnClick. Eu posso fazer com que os círculos renderizem na tela, mas não consigo fazer com que eles tenham movimento. Parece que a função .animate () não é o que eu preciso aqui.

Alguém sabe como eu iria fazer isso?

Aqui está o que eu tenho:

jQuery(function ($) {

    // Global Vars
    var items = 30,
    width = window.innerWidth,
    height = window.innerHeight,
    paper = Raphael("galaxy", width, height),
    frameRate = 100,
    i,
    galaxy = [],
    star = [],
    stars = [];

    // Do some variants for each item
    for (i = 0; i<items; i++ ) {
        stars[i] = {
            x : Math.random() * width,
            y : Math.random() * height,
            r : Math.random()*255,
            g : Math.random()*255,
            b : Math.random()*255,
            size :  Math.random() * 20
        }
    }

    // Creates canvas 320 × 200 at 10, 50
    // Creates circle at x = 50, y = 40, with radius 10
    for (i = 0; i<items; i++ ) {
        star[i] = paper.circle(stars[i].x, stars[i].y, stars[i].size);
        star[i].attr("fill", "rgb("+stars[i].r+", "+stars[i].g+", "+stars[i].b+")");
        star[i].attr("stroke", "none"); 

    }//end for

});

Answer 1

poderia funcionar com o Animate (). Se você, por exemplo, adicione isso à função acima:

(function anim() {
    for (i = 0; i<items; i++ ) {
         newX = Math.random() * width;
         newY = Math.random() * height;
         star[i].animate({cx: newX, cy: newY}, 1000);
    }
    setTimeout(anim, 1000);
})();

Seus círculos voam por aí. É claro que ainda é um longo caminho a percorrer para tê -los realmente flutuantes ou até interação, mas talvez seja um ponto de partida.