paper.js | Swiss Army Knife of Vector Graphics Scripting –

Your error comes down to the way variable scoping works in Javascript: variables are scoped to the containing function or script. By the time you come along and drag the circle, i === 5 from the for loop, and thus path[i] is undefined (out of bounds) in the drag function. Hence, your error.

If you would like to learn more, this answer provides an in-depth look into this "closure inside loop" problem.

This answer provides some common solutions to this problem.

The ES6 let statement is the modern solution to this problem, avoiding many of the scope "quirks" of the var statement. Variables scope to the containing block, so each pass of the loop gets its own instance of i.

To use ES6 features within PaperScript, you first need to load a newer version of the Acorn parser (thanks sasensi and Geddes). Then simply declare let i in the loop:

After a quick look at your code, I would say that:

1. you are passing a promise to the importSVG function
2. the importSVG function expects to receive a SVG string and your promise will resolve with a PNG image data url

A clone is just a copy of an item that makes it an independent instance which can have its own properties (fill, stroke, ...). The most common use case for it is having a quick way to create an item similar to another, avoiding creating it from scratch.
When the source of the cloned item is modified, the cloned item doesn't change.

A symbol item is an identical copy of an item (its related symbol definition) that can only have its own matrix tranformations (translation, rotation, ...) but not its own style (fill, stroke, ...). The most common use case for it is performance optimization when the same item has to be repeated multiple time (e.g. drawing a sky full of stars).
When the symbol definition of the symbol item is modified, the symbol item is updated.

I think that your problem is coming from the fact that you base your scaling calculation on event.delta which represents the time elapsed since the last event fired.
The thing is that, if I'm not mistaken, under the hood, Paper.js onFrame event relies on requestAnimationFrame which does not fire when the tab if inactive.
So when you switch tab, wait for a while and get back to your tab event.delta value is big and your scaling value too, hence the size of your petals. This basic sketch showcase this behavior.

So in my opinion, you should simply check event.delta value and limit it if it's too high.

There are certainly tons of ways to do this but here's how I would do it: sketch.
This should help you finding the proper solution to your own use case.

You should use another path than the original one to build your zigzag because you are mutating it and this might alter the points/normals calculations.
Here is a corrected sketch which you should easily be able to adapt to your use case.

In PaperScript, you can use mathematical operators on Point instances but you can't do this in JavaScript so you have to use the corresponding methods instead.
point1 + point2 => point1.add(point2), etc...

Here is the corrected code:

I finally managed to solve it! I had to make sure to not unite paths that were used as clipMask AND making sure all paths were closed by using the closePath() method. The final code looks like this:

Make projection of mouse move vector onto rectangle side vectors (they depends on rotation angle) and apply corresponding changes to rectangle side lengths.

One rectangle side has unit direction vector (cos(fi), sin(fi)), another (neighbor) side - (-sin(fi), cos(fi)) and for mouse shift (mx, my) applied to vertex between these sides: