Blende ModeのXORを使って模様を作る

demo

XORで模様

this.path = new Path.Circle({
    center: view.center,
    radius: this.radius,
    fillColor:"#3498DB",
    strokeColor:"#81E5FF",
    strokeWidth:15,
    blendMode:"xor"
});

blendModeをxorに設定することで、円同士が重なった領域を排他的にしています。つまり重なったところは円を描画せずに、円の背景になります。

アニメーションはベクトルを使う

アニメーションの部分はドキュメントにあったサンプルデモを参考にしています。
http://paperjs.org/tutorials/animation/creating-animations/

ドキュメントのコード

var destination = Point.random() * view.size;

目的地をランダムで決めます。

var vector = destination - text.position;

テキストから目的地へのベクトルを計算します。

text.position += vector / 30;

テキストから目的地までの距離の1/30を詰めていきます。繰り返すことで、最初の移動距離は大きく、段々移動距離が小さくなっていくので、イージングっぽい動きが出来ます。

・参考
Keijiro's Dev Log — 指数関数を使ったお手軽イーズ・アウト

if (vector.length < 5) {
　destination = Point.random() * view.size;
}

目的地に近づくと、次の目的地を定義します。

今回のデモの説明

ドキュメントのデモではテキストを使用していましたが、今回のデモでは円にしています。マウスクリックで移動できることもしていますが、これは無駄だったかも・・・。

A Pen by naoyashiga.