Forums » Help » Need to draw animated paths - best method?

I need to do something very basic but it is really not obvious to me how to do this around the framework of Impact.

I need to animate a path between a set of entities.

A demo of what I mean by path animating: http://jsfiddle.net/d7d3Z/1/

I've seen on the forums people discuss PaperJs, a vector drawing library, and researching online I found RaphaelJS (the demo link uses RaphaelJS). My problem is that I don't understand how to integrate either library into Impact and I'm sort of walking around in the dark.

Can anyone provide any insight into this problem of mine?

I'm open to any solution.

EDIT:

Ummm. So yeah, I didn't read carefully at all, so the following is not a solution to your problem. Sorry...

ORIGINAL POST

You would like to move an entity from point A to B smoothly over a certain amount of time? This plugin could help you with that...

EntityPlayer = ig.Entity.extend({
    interpolation: { x: null, y: null },
    init: function(x, y, settings) {
        this.parent(x, y, settings);
        // When spawned, move down 100px 
        // and right 20px, in 3 seconds.
        this.moveToPos(this.pos.x + 100, this.pos.y + 20, 3);
    },
    update: function() {
        // For each axis...
        for(var axis in this.interpolation) {
            // .. check if entity is currently moving...
            if(this.interpolation[axis] !== null) {
                // .. it is!! So update position.
                this.pos[axis] = this.interpolation[axis].value;
                // Check if destination has been reached.
                if(this.interpolation[axis].done) {
                    // It has, mark as "not moving".
                    this.interpolation[axis] = null;
                }
            }
        }
        
    },
    moveToPos: function(x, y, seconds) {
        var start = { x: this.pos.x, y: this.pos.y };
        var end = { x: x, y: y };
        this.interpolation.x = 
            new ig.Interpolation(start.x, end.x, seconds);
        this.interpolation.y = 
            new ig.Interpolation(start.y, end.y, seconds);
    }
});

No problem. Yeah, it's not that I need to move an entity. I need to essentially animate a series of lines in sequence.

You could still use the above plugin to accomplish this. You'd have an array containing points:

// Points forming a closed square...
points = [
    { x: 0, y: 0 },
    { x: 100, y: 0 },
    { x: 100, y: 100 },
    { x: 0, y: 100 },
    { x: 0, y: 0 }
];

Start at the first point in the array. Your line would start at that point.

Create an interpolation to the next point in the array. In update, continue to redraw the line using the start point and the interpolation-point value.

Once the interpolation is done, you are at the next point in the array. Repeat the process.

You would also need to draw the previous lines so that the path doesn't disappear over time.