はてなブログでpaper.jsのテスト２

paperscript部分の改行とタブを全て消したら、記事中にコード直接貼り付けて動作させることができた。

var paths = new Array();
for(var i= 0;i<7;i++){
	var circle  = new Path.Circle(new Point(i*50,50),30);
	circle.strokeColor = '#fff';
	circle.fillColor = new HsbColor(i*360/7,0.7,0.9,0.5);
	circle.strokeWidth = 4;
	circle.prescale = 1;
	paths.push(circle);
}


function onFrame( event ){
	for(var i= 0;i<7;i++){
		var sinValue  = Math.sin((event.count+i*5)/15);
		if(sinValue <= -0.95){
			paths[i].fillColor = new HsbColor(event.count+i*10,0.7,0.9,0.5);
		}
		var scale = ( sinValue+1.3)/2;
		paths[i].scale(scale/paths[i].prescale);
		paths[i].prescale = scale;
	}
//	console.log(event.count);
}

詰まった点など

• はてなブログのプレビューではヘッダのjavscirptを読んでくれないようで、一旦公開しなければ本当に動作しているのか確かめられない。
• 上記のプログラムのパラメータ調整で時間がかかった。この手のプログラムでは、色合いが気に入らないと延々と調整し続けることになる。
• 円が一番小さくなった瞬間に色を変えるようにした。本当であればsinValueが-1になった時であるが、計算式の都合上-1になるかは保証できないので-0.95以下の時とした。