ooooooo_qの日記

脆弱性の話とか

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

マウスオーバーでアニメーション

はてなブログでヘッダに色々書けるようになったということなので、paper.jsを使ってみる。ブラウザが対応していれば上のタイトルとの隙間にマウスを載せれば動作するはず。

以下paperscirptのソース

var circle1 = new Path.Circle(new Point(0,0),100);
    circle1.strokeColor = '#101030';
	circle1.fillColor = "#435892";
    circle1.strokeWidth = 6;
	var prescale1 = 1;
	var circle2 = new Path.Circle(new Point(0,0),50);
    circle2.strokeColor = '#202030';
	circle2.fillColor = "#cfdffc";
    circle2.strokeWidth = 4;
	circle2.opacity = 0.8;
	var prescale2 = 1;

	function onMouseMove( event ){
		circle1.position = event.point;
		circle2.position = event.point;
		var scale = (Math.sin(event.count/20)+1.1)/2;
		circle2.scale(scale/prescale2) ;
		prescale2 = scale;
	//	console.log(Math.sin(event.count) +1);
	}

	function onFrame( event ){
		var scale = (Math.sin(event.count/10)+1.1)/3;
		circle1.scale(scale/prescale1) ;
		prescale1 = scale;
	}

やったこと

  1. ヘッダにpaper.jsのリンクを記載
  2. canvasタグを記事に書く
  3. ヘッダにpaperscrpit書く

時間かかった箇所

  • scaleの指定

円の大きさを変化させるのにpath.scale()の関数を使用している。これは図形を現在の状態の何倍にするかを指定できる関数だが、周期的に大きさを変えたい場合は、そのままほうっておくと良くない。0倍になった瞬間に大きさが戻せなくなる。
 以前の倍率を変数に持たせてやれば解決するが、最大時の大きさや、時間変化の速さを直感的に変え難いので根本的にあまり良くない方法。

  1. 記事中にpaperscriptを書く→ pタグやbrタグが自動的に入る
  2. paperscriptを外部ファイルにする → クロスドメインで実行できない
  3. ヘッダにpaperscriptをかく → 成功

成功したけれど、大変よろしくない。この方法では、なにか試すたびにヘッダファイルが長くなっていってしまう。なので後で別の方法ためす。paperscriptに改行いなければ、他のタグが勝手に入らないようにならないだろうか。

→(2013/01/20) paperscriptをhtmlヘッダから記事内に移動