Using Raphael JS to float shapes around the screen

Question

I am working on having some shapes floating around the screen at random. Eventually they will interact with each other, as well as have onclick functions. I can get the circles to render on screen, but I cannot get them to have motion. It seems that the .animate() function is not what I need here.

Does anyone know how I would go about this?

Here is what I have:

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

it could work with animate(). If you e.g. add this to the above function:

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

your circles fly around. Of course it's still a long way to go to have them really floating or even interaction, but it's maybe a starting point.