複数のパーティクルを表現する[prototype][canvas]

2017年4月13日

複数のパーティクル(粒子)が動く様子を表現してみます。

 

デモ画面

 

デモ画面では、半径r=5の円のパーティクルを30個Canvas中央(300,250)にて生成しています。各パーティクルの進行方向(速度)はランダムに設定しています。

 

パーティクルの描写や動き方などのメソッドは、prototypeを利用して記述していきます。prototypeの役割については以下の関連ページをご覧下さい。

 

関連ページ

prototype(プロトタイプ)について

 

 

 

流れとしては、まずParticleコンストラクタ関数を作成。パーティクルの描写や移動等のメソッドは、prototypeプロパティを利用して宣言しています。

 

66〜73行目では、30個生成するインスタンスに対して、具体的な生成位置座標(固定)と速度(ランダム)を指定し、配列に格納しています。

 

 

参照文献


 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー