読者です 読者をやめる 読者になる 読者になる

not good but great

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

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

Javascript Paper.js


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

demo

f:id:naoyashiga:20140317202259p:plain
今回はPaper.jsで作ってみました。
Paper.js Editor

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);
}

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