hatenaブログでpaper.jsとjqueryのテスト

追加用ボタン

paper.js内でjqueryを記述して問題ないかテスト。
数値を入力してボタンを押せば数値の分だけ円の追加。されるはずなのだがうまくいかない。次回への課題。
はてなブログでは元々jqueryを読み込んでいるようなので、そちらを流用。

成功すればこういった画面になるはず。

以下ソース

var paths = new Array();
var num = 6;
var added = 0;

function addCircle( num ){
	for(var i= 0;i<num;i++){
		var circle  = new Path.Circle(new Point(40+i*50,40+added*15),30);
		circle.strokeColor = '#fff';
		circle.fillColor = new HsbColor(200,0.7,0.9,0.5);
		circle.strokeWidth = 4;
		circle.prescale =1;
		paths.push(circle);
	}
	added++;
}
addCircle( num );

function onFrame( event ){
	for(var i= 0;i<paths.length;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;
	}
}

$('#button_test3').click(function(){
	num = $('#input_test3')[0].value;
	addCircle(num);
});

paperscriptといってもjavascirptに変換されるので多分問題はないと思っていた。懸念していた変数のスコープも問題なく使え、jqueryで動作設定→paperscript操作ができた。ただし、ローカル環境では。
カエルの歌のように輪唱のようなものを目指したていたが諦めた。
canvasタグの後ろにinputタグを書くと、なぜかcanvasのなかにinputが飲み込まれたので文字を書いて無理やり離した。