You’ll perhaps remember the box kicking script from a few days ago. That kick was the result of a series of finite steps. As I chained them together they looked like a relatively smooth move (for an ex-lax). Let’s say I have another action I want boxy to perform. I’d be stuck scripting it up mostly from scratch. Sure, I’d be able to cut and paste, but all of the heavy lifting I did before would be tossed away. So why not make my own life easier?

Which parts of the kick are reusable and which are not? In order to figure this out I break out the work into pieces. In this case there’s all the chaining and the moving boxy around nonsense, and then there’s the description of how it moves. If I’m lucky, next time I want to move boxy I only need tell it where to move, and not how it should go about moving. Enter my base animation class:

Animate = new Class({
    options: {
            defDur: 200
    },
    initialize: function(el){
            this.target = el;
            this.d = [];
            this.t = [];
    },
    run: function(d, t){
         var tfx = new Fx.Styles(this.target, {
                 wait: false,
                 transition: Fx.Transitions.Quad.easeOut
         });
         var n = 0;
         var dly = 0;
         this.t.each(function(tarr) {
                 if(this.d[n] != null) { dur = this.d[n]; }
                 else { dur = this.options.defDur }
                 tfx.options.duration = dur;
                 tfx.start.delay(dly, tfx, tarr);
                 dly += dur;
                 n++;
         }.bind(this));
     }
});
Animate.implement(new Options, new Events);

I will spare you the details of the Mootools syntax here. This class allows me to specify a list of instructions for boxy. I can then extend the base behavior with different instruction sets, making further actions a snap! The boxes blow are all scripted into subclasses of my Animate class. (Again, sparing details…) The first is the good ol’ kick. The second is a scripted random series of steps. It will always be the same. The third is an unspecified set of 40 randomly generated movements. Go ahead, give em a shot!

For those brave and/or interested souls, here’s the third random extension of the base Animation class, which I’ve called Butterfly. Butterfly took me about a sixth of the time to script that the original Kick did.

Butterfly = Animate.extend({
        options:{
                min: 20,
                max: 300
        },
        initialize: function(el, steps){
                this.parent(el);
                for(i = 0; i < steps; i++){
                        this.t.push({
                            'top': this.next(),
                            'left': this.next()
                        });
                }
        },
        next: function() {
                return Math.floor((
                         this.options.max
                         -(this.options.min-1))
                         *Math.random())
                         + this.options.min;
        }
});

This entry was posted on Monday, February 18th, 2008 at 6:17 pm and is filed under #, Art, Bang, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.