I am attempting to create a very simple beacon-like animation in Paper JS. The idea is that a circle starts off very small and totally opaque and then gets larger and more transparent until it disappears and the animation restarts.

I'm using scaling to make the image larger but resetting it to it's original size is being problematic and at the moment I have resorted to cloning a second circle to reset it rather than just working with a single shape, there has to be a simpler way of doing this.

I've create a jsFiddle to demonstrate my rough code so far, any help would be appreciated.

I am attempting to create a very simple beacon-like animation in Paper JS. The idea is that a circle starts off very small and totally opaque and then gets larger and more transparent until it disappears and the animation restarts.

I'm using scaling to make the image larger but resetting it to it's original size is being problematic and at the moment I have resorted to cloning a second circle to reset it rather than just working with a single shape, there has to be a simpler way of doing this.

I've create a jsFiddle to demonstrate my rough code so far, any help would be appreciated.

http://jsfiddle/colethecoder/Y3S9n/1

• javascript
• canvas
• paperjs

• Do you have more information on this question? Or have you solved it in the past year? – beaslera Commented Aug 2, 2013 at 15:55

3 Answers 3

Paperjs does not store the original Path, nor does it remember any operations that have been applied to reach the current state, so it can be difficult to reset to a previous state. The easiest approach is to use the this.scale that your current code is calculating and when you want to reset do this.circle.scale(1/this.scale); Here is a jsfiddle that way.

FYI, here is the code path for scaling:

• Item.scale()
• Item.transform()
• Item.apply()
• Path._apply()
• Segment._transformCoordinates()

So the end result is that _transformCoordinates() is called on each of the four segments in the circle, and it simply moves the point coordinates...nothing is remembered to "undo" the scaling later.

Alternatively to remembering the scale yourself, you can use the Path.fitBounds() function to shrink the circles to an arbitrary size...for instance you could save the bounding rectangle right after creating the Circle, and then fitBounds back to that size.

Set item.applyMatrix = false if you don't want to persist transformations alongside item.

For example, the following code linearly (i.e. "additively") animates item.scaling:

var item = new Path.Rectangle({
    point: [75, 75],
    size: [5, 5],
    strokeColor: 'black',
    applyMatrix: false
});

function onFrame(event) {
    item.scaling += 0.1;
}

The way i approached this issue was attaching a new object called originalBounds to the paper.js shapes immediately after their instantiation. If i needed to play with its size, ing back its original one became fairly trivial.