旧それなりブログの跡地、画像やスタイルやJSなどが壊れてることがあります。

javascript用の円運動クラス

2007年8月4日

Amazonトップページの一番下の方に、たまに出てくるんですが
商品をぐるぐる回して紹介するFlashアプリがあります。

たまたま休日出勤してたt-matsudaさんに、「貴様にこれが作れるのか?あああん?」って言われたので(言われてないです)、作るついでに円運動と三角関数の調査をするついでにjavascriptで円運動クラスを作りました。

で、アプリは出来ずに円運動クラスだけ出来ました。

/**
* 円運動クラス
*
* @author kjirou <kjirou.webあっとまーくgmail.com>
*/
var Circulator = function(){
// 円の中心座標
this._circleTop = 150;
this._circleLeft = 300;
// 円の半径
this._radiusY = 20;
this._radiusX = 200;
// 開始角度
this._startAngle = 0;
// イベント毎の角度の幅
this._stepAngle = 0.5;
// イベント毎の間隔
this._timerPeriod = 10;
// タイマーID保持用
this._timerId;
};
/**
* 角度をラジアン値に変換する
*
* @param number angle  角度
* @return number ラジアン値
*/
Circulator.prototype.toRadian = function(angle){
return angle * 0.017453290;
};
/**
* 円運動を開始する
*
* @param function hander タイマーイベントハンドラ用関数
* @return void
*/
Circulator.prototype.start = function(hander){
var self = this;
var angle = this._startAngle;
this._timerId = setInterval(function(){
var coords = [];
coords[0] = self._circleTop + Math.sin(self.toRadian(angle)) * self._radiusY;
coords[1] = self._circleLeft + Math.cos(self.toRadian(angle)) * self._radiusX;
hander.call(self, coords, angle);
angle += self._stepAngle;
if (angle >= 360) angle -= 360;
}, this._timerPeriod);
};
/**
* 円運動を終了する
*
* @return void
*/
Circulator.prototype.stop = function(){
clearInterval(this._timerId);
};

サンプルはココです。WinXP-IE6とWinXP-FireFox2で動作確認をしています。(若干、IEの方が動きが良い)

一応ですけど、ライセンスはパブリックドメインです。
全くサンプルのレベルなので、実際に使う場合は適当に書き直して使ってくださいまし。

三角関数の参考リンク

ご意見・ご要望・強い口調の批判があれば、コメントください!