こんにちは。
初回は「processing」というブログラム言語についてです。
「processing」はデジタルアート的な、絵を描くことに特化したプログラム言語ですが、何か動きがあった方が面白いと思う質なので、今後更新していく中ではゲームやシミュレータ的なものが多くなると思います。
加えて、processingに関してはある程度触れてしまっているので、「今から始めたい！」という方にはこのブログから読み始めると発展的な内容から始まることになると思いますので、レファレンスやなんかを参照していろいろ遊んでからの方がよいかもしれません。
さて本編ですが、「クラス」の話をしていこうと思います。
「クラス」は、同じ処理をするものを複数つくりたいときに便利なものです。
1組、2組、・・・の「クラス」では無いですが、そう考えるとわかりやすい部分もあるので説明では学校の「クラス」として考えています。
丸の運動を例にして話を進めます。
まず、1つの円が動くプログラムを書いてみます。
float x; void setup(){ size(500, 500); x = 0; } void draw(){ background(0); x += 3; if(x > width){ x = 0; } ellipse(x, 250, 20, 20); }
これで、画面の左端から右端へループして動く円を表せました。
早速「クラス」を導入します。
Circle maru; //「maru」さんという人が「Circle」組であることを示す void setup(){ size(500, 500); maru = new Circle(); //「maru」は「Circle」組の新入生らしい maru.x = 0; //「maru」の初期位置を決める } void draw(){ background(0); maru.x += 3; //「maru」はx方向に3ずつ動く if(maru.x > width){ maru.x = 0; } ellipse(maru.x, 250, 20, 20); //「maru」の姿を描く } class Circle{ //「Circle」組の設定 float x; }
これで、「クラス」を使うときの文法のようなものを組み込めました。
つぎに「Circle」組の設定の中に動き方、姿の描き方の情報を入れ込みます。
Circle maru; void setup(){ size(500, 500); maru = new Circle(); maru.x = 0; } void draw(){ background(0); maru.move(); //「Circle」組の設定の中にある情報を引き出す maru.display(); } class Circle{ float x; void display(){ //姿の描き方の情報をまとめる ellipse(x, 250, 20, 20); } void move(){ //動き方の情報をまとめる x += 3; if(x > width){ x = 0; } } }
これで、「draw」の中身がすっきりしました。
つづいて、「maru」さん以外の人を追加しやすいように変えます。
Circle maru; void setup(){ size(500, 500); maru = new Circle(0); //「maru」さんの初期情報を、新入生であることを説明すると同時に決める } void draw(){ background(0); maru.move(); maru.display(); } class Circle{ float x; Circle(float _x){ //「Circle」組の人たちを増やしやすいように変える x = _x; } void display(){ ellipse(x, 250, 20, 20); } void move(){ x += 3; if(x > width){ x = 0; } } }
さらに、「maru」さん以外の人を横に並べられるように、y座標の情報も追加します。
Circle maru; void setup(){ size(500, 500); maru = new Circle(0, 250); //「maru」のy座標も同時に決める } void draw(){ background(0); maru.move(); maru.display(); } class Circle{ //y軸方向の情報を追加する float x, y; Circle(float _x, float _y){ x = _x; y = _y; } void display(){ ellipse(x, y, 20, 20); } void move(){ x += 3; if(x > width){ x = 0; } } }
さて、これで新入生をさらに迎える準備が整いました。
「a」さん、「b」さん、「c」さんを追加してみます。「maru」さんのときと同様です。
Circle maru, a, b, c; //「a」「b」「c」を「Circle」組に迎える void setup(){ size(500, 500); maru = new Circle(0, 250); a = new Circle(0, 50); //以下3行で、「a」「b」「c」の初期情報を決める b = new Circle(0, 100); c = new Circle(0, 150); } void draw(){ background(0); maru.move(); maru.display(); a.move(); //以下8行で「a」「b」「c」の動き方、姿の描き方を引き出す a.display(); b.move(); b.display(); c.move(); c.display(); } class Circle{ float x, y; Circle(float _x, float _y){ x = _x; y = _y; } void display(){ ellipse(x, y, 20, 20); } void move(){ x += 3; if(x > width){ x = 0; } } }
これを実行してみると、y座標で50, 100, 150, 250の位置で丸が動くのが見えると思います。
しかしこれでは、せっかくきれいにした「draw」の中身が煩雑になってしまいます。
きれいにするために、「配列」を使います。
「maru」「a」「b」「c」をそれぞれ0, 1, 2, 3と番号付けして、まとめて表してみます。
int n; //「n」は数字であると宣言 Circle[] circles; //配列を宣言 void setup(){ size(500, 500); n = 4; //「n」は4とする circles = new Circle[n]; //n人の新入生を迎える for(int i = 0; i < n; i ++){ //「i」を0から始めて、「i」が「n」より小さい間、「i」に1を足し続ける float yi = 50+100*i; //それぞれの人のy座標を計算 circles[i] = new Circle(0, yi); //先ほど決めた「yi」を用いて、それぞれの初期位置を決める } } void draw(){ background(0); for(int i = 0; i < n; i ++){ //それぞれの人の動き方、姿の描き方を引き出す circles[i].move(); circles[i].display(); } } class Circle{ float x, y; Circle(float _x, float _y){ x = _x; y = _y; } void display(){ ellipse(x, y, 20, 20); } void move(){ x += 3; if(x > width){ x = 0; } } }
これで、さらに3人を迎えることができました。
10行目の処理の都合上、これまでとは違った位置に丸が描かれることになりますが、ここをうまく変えればこれまでと同じように位置を指定できるかもしれません。
また、「n」の値を変えれば、人数はいくらでも（パソコンが処理できる範囲内で）増やすことができます。
これが「クラス」の強みで、同じような処理を行うものをまとめて書くことができるようになります。
以上で「クラス」のことは説明できました。
長くなってしまったので、今回はここまでにしますが、また書きたいことができれば「processing」の話題を取り上げようと思います。
最後まで読んでいただきありがとうございました。また次回。
おまけ
丸の位置だけでなく、大きさ、速さも変えられるようにすればこんな風にもできます。
色を変えてみるのも面白いかもしれません。
