Question

I’m working on a project that uses SVG with Raphael.js. One component is a group of circles, each of which “wiggles” around randomly – that is, slowly moves along the x and y axes a small amount, and in random directions. Think of it like putting a marble on your palm and shaking your palm around slowly.

Is anyone aware of a Raphael.js plugin or code example that already accomplishes something like this? I’m not terribly particular about the effect – it just needs to be subtle/smooth and continuous.

If I need to create something on my own, do you have any suggestions for how I might go about it? My initial idea is along these lines:

• Draw a circle on the canvas.
• Start a loop that:
  • Randomly finds x and y coordinates within some circular boundary anchored on the circle’s center point.
  • Animates the circle from its current location to those coordinates over a random time interval, using in/out easing to smooth the effect.

My concern is that this might look too mechanical – i.e., I assume it will look more like the circle is tracing a star pattern, or having a a seizure, or something like that. Ideally it would curve smoothly through the random points that it generates, but that seems far more complex.

If you can recommend any other code (preferably JavaScript) that I could adapt, that would be great too – e.g., a jQuery plugin or the like. I found one named jquery-wiggle, but that seems to only work along one axis.

Thanks in advance for any advice!

Answer 1

Something like the following could do it:

    var paper = Raphael('canvas', 300, 300);
    var circle_count = 40;
    var wbound = 10; // how far an element can wiggle.
    var circleholder = paper.set();

    function rdm(from, to){
           return Math.floor(Math.random() * (to - from + 1) + from);
    }

    // add a wiggle method to elements
    Raphael.el.wiggle = function() {
        var newcx = this.attrs.origCx + rdm(-wbound, wbound);
        var newcy = this.attrs.origCy + rdm(-wbound, wbound);
        this.animate({cx: newcx, cy: newcy}, 500, '<');
    }

    // draw our circles
    // hackish: setting circle.attrs.origCx
    for (var i=0;i<circle_count;i++) {
        var cx = rdm(0, 280);
        var cy = rdm(0, 280);
        var rad = rdm(0, 15);
        var circle = paper.circle(cx, cy, rad);
        circle.attrs.origCx = cx;
        circle.attrs.origCy = cy;
        circleholder.push(circle);
    } 

    // loop over all circles and wiggle
    function wiggleall() {
        for (var i=0;i<circleholder.length;i++) {
            circleholder[i].wiggle();
        }
    }
    // call wiggleAll every second
    setInterval(function() {wiggleall()}, 1000);

http://jsfiddle.net/UDWW6/1/

Changing the easing, and delays between certain things happening should at least help in making things look a little more natural. Hope that helps.