Javascriptでパーティクルのクラスみたいなのを作って等速円運動させてみた

デモ

こちらのサイトを見ていると、等速円運動のやり方が書いてありました。
http://www.fumiononaka.com/Business/html5/FN1401004.html:

パーティクルのクラスを作る

クラスについてよくわかっていない

Javascriptでは正確に言うと、クラスはないというのを聞いたことがあります。過去にいろいろググって、prototypeがどうたらこうたらといろいろ出てきましたが、結局すぐに忘れてしまいました。だからJavascriptにおけるクラスっぽいものについて、ぜんぜん理解していないので、大目に見てください。

今回は今までクラスっぽいものを作ったことがなかったので、その練習として書いてみました。

なぜクラスを作るのか

複数のパーティクルを生成しようとしたときに、変数名を個々に変えて定義するのは非常にめんどくさかったからです。パーティクルのクラスを作って、位置などのプロパティを設ければ、管理が楽になります。

どうやって作るのか

クラスを生成

/*-----------------------------------
    パーティクルを定義
-----------------------------------*/
function Particle(_radius){
    //半径
    this.radius = _radius;
    //色
    this.graphics.beginFill("#61B4CF").drawCircle(0,0,5);
    //回転開始位置
    //this.x = centerX + this.radius;
    //this.y = centerY;
    this.x = 0;
    this.y = 0;
    //ステージに追加
    stage.addChild(this);
}

javascriptには「Class」という文法?が用意されていません。変わりに関数を使います。この関数Particleはコンストラクタとも言い換えられます。Particleクラスをインスタンス化する際にこの関数が呼び出されるからです。

「.」を使ってプロパティを定義します。ここでは半径、色、位置を決めています。

・参考
JavaScript オブジェクト入門 - ウェブ開発を学ぶ | MDN

継承

Particle.prototype = new cj.Shape();

Particleのprototypeプロパティに「new cj.Shape()」を指定します。prototypeプロパティは例えて言うなら、「親」のようなものです。

参考サイトを見ると「Object.create」を使う方法がイケてるようですが、ここでは割愛します。深追いするとブログ書くのが終わらない・・・。
・参考
https://gist.github.com/yoshimuraYuu/3301790
JavaScriptのプロトタイプ継承 - @ledsun blog

メソッドを定義

/*-----------------------------------
    パーティクル移動位置
-----------------------------------*/
Particle.prototype.move = function(){
    angle += speed;
    
    /*
    this.x -= this.radius * speed * Math.sin(angle);
    this.y += this.radius * speed * Math.cos(angle);
    */
    
    this.x = centerX + this.radius * Math.cos(angle);
    this.y = centerY + this.radius * Math.sin(angle);

};

クラス名は下のように定義します。

クラス名,prototype.メソッド名

プロパティと似ていますが、関数であることが大きな違いです。またプロパティに関数として定義すると、インスタンスを生成した時に毎回関数が生成されてしまいます。

・参考
JavaScriptのプロトタイプからオブジェクト指向を学ぶ - Qiita

インスタンスを生成

for(var i = 0;i < 10;i++){
	var radius = i * 20;
	//軌跡
	drawOrbit(centerX,centerY,radius);

	//パーティクル生成
	var particle = new Particle(radius);
	particles.push(particle);
}

for文でループさせて、インスタンスを繰り返し生成します。そのあと配列にインスタンスを追加して、あとで扱えるようにしています。

今回はパーティクルの動きが単純だったので、パーティクルの動きを複雑にしてみたいですね。