セグメントの位置を周期的に動かして、くねくねうごく円を作る

以前CSSでぐにょぐにょする円を作りました。

demo

今回はPaper.jsで作ってみました。
Paper.js Sketch

code

this.path.flatten(this.path.length / this.numSegment);

円をflattenさせて、円をセグメントで分割します。

function onFrame(event){
    for(var i = 0;i < balls[0].path.segments.length;i+=2){
        balls[0].path.segments[i].point.y += Math.sin(event.time * 10 + i);
    }
    balls[0].path.smooth();
    balls[0].path.rotate(1);
}

セグメントそれぞれの位置を時間によって、変えています。それを回転させています。