not good but great

プログラミング、アート、映画・本の感想について書きます。

パスをSmoothing、Simplifying、Flatteningさせる

まずは用語解説

セグメントとは?

Paper.jsにおいて出てくるセグメントとは、イラストレーターにおけるセグメントと同じ意味だと思います。

セグメントはポイントとポイントを結ぶ線です。ここでいうポイントはイラストレータで言うアンカーポイントを指します。

パスとは?

ポイントとセグメントを合わせた1本の曲線をパスと言います。

方向線とは?

ポイントから出るセグメントの方向と強さを決めます。Paper.jsでは方向線のことをハンドルと呼んでいます。らぶん。

詳しくは参考ページを見てください。

・参考

path.smooth()

この関数は最適なセグメントのハンドルを計算するものです。最適というのは最も曲線を滑らかにするという意味です。ポイントは変えずにハンドルだけを変えます。

http://paperjs.org/tutorials/paths/smoothing-simplifying-flattening/

path.simplify()

セグメントの情報が入った配列を分析して、簡単にする関数です。「細かい位置を全部計算してると、時間がかかるからざっと位置を計算しちゃおうよ!元のパスとは微妙に異なってしまうけどさ!」ということをやっているのだと思います。たぶん。
http://paperjs.org/reference/path/#simplify

path.flatten(maxDistance)

曲線でつないでいるところにポイントを設けて、直線で表してくれる関数です。カクカクになります。maxDistanceはポイント同士の距離を指します。

demo

Paper.js Editor

var path = new Path.Circle({
    center:[80,150],
    radius:50
});

path.selected = true;

var copy = path.clone();
copy.position.x += 150;

copy.flatten(40);

簡単に記述できますね!

広告を非表示にする