How can I make Raphael.js elements “wiggle” on the canvas?

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 - ie, I assume it will look more like the circle is tracing a star pattern, or having aa 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 - eg, 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

You can accomplish a similar effect by extending Raphael's default easing formulas:

Raphael.easing_formulas["wiggle"] = function(n) { return Math.random() * 5 };
[shape].animate({transform:"T1,1"}, 500, "wiggle", function(e) {
    this.transform("T0,0");
});

Easing functions take a ratio of time elapsed to total time and manipulate it. The returned value is applied to the properties being animated.

This easing function ignores n and returns a random value. You can create any wiggle you like by playing with the return formula.

A callback function is necessary if you want the shape to end up back where it began, since applying a transformation that does not move the shape does not produce an animation. You'll probably have to alter the transformation values.

Hope this is useful!

Answer 2

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.

Answer 3

There is a very good set of easing effects available in Raphael.

Here's a random set of circles that are "given" bounce easing. Dynamically add animation to objects

The full range of easing effects can be found here . You can play around with them and reference the latest documentation at the same time.

Putting calls in a loop is not the thing to do, though. Use callbacks, which are readily available.