1. プログラミング技法特論#09 N. Shimizu chikoski at kaetsu.ac.jp

2. 前回まで float x, y, r, dx, dy; void setup(){ size(400, 400); noStroke(); fill(255, 0, 0, 255); x = width / 2; y = height / 2; r = 20; dx = 0.5; dy = 0.5; } void draw(){ background(0, 0, 0); ellipse(x, y, r, r); x = constrain(x + dx, r / 2, width – r / 2); y = constrain(y + dy, r / 2, height – r /2); reflectByWall(); } void reflectByWall(){ if(x <= r / 2 || width – r / 2 <= x){ dx = dx * -1; } if(y <= r / 2 || height– r / 2 <= y){ dy = dy * -1; } } float dx(){ float ret = (mouseX – x) * 0.01; return ret; } float dy(){ float ret = (mouseY – y) * 0.01; return ret; } void mousePressed(){ dx = dx(); dy = dy(); }

3. 円の動きに関する部分 float x, y, r, dx, dy; void setup(){ size(400, 400); noStroke(); fill(255, 0, 0, 255); x = width / 2; y = height / 2; r = 20; dx = 0.5; dy = 0.5; } void draw(){ background(0, 0, 0); ellipse(x, y, r, r); x = constrain(x + dx, r / 2, width – r / 2); y = constrain(y + dy, r / 2, height – r /2); reflectByWall(); } void reflectByWall(){ if(x <= r / 2 || width – r / 2 <= x){ dx = dx * -1; } if(y <= r / 2 || height– r / 2 <= y){ dy = dy * -1; } } float dx(){ float ret = (mouseX – x) * 0.01; return ret; } float dy(){ float ret = (mouseY – y) * 0.01; return ret; } void mousePressed(){ dx = dx(); dy = dy(); }

4. クラスにまとめよう

5. クラス 変数とメソッドをまとめたもの なぜまとめるのか？ プログラムが構造化される 抽象化できる->クラスの中身をしらなくても 他のプログラムが書ける->独立して開発ができる

6. クラスの定義方法 class クラス名{ 変数の宣言 メソッドの定義 }

7. ステップ1：まとめる部分を決める float x, y, r, dx, dy; void setup(){ size(400, 400); noStroke(); fill(255, 0, 0, 255); x = width / 2; y = height / 2; r = 20; dx = 0.5; dy = 0.5; } void draw(){ background(0, 0, 0); ellipse(x, y, r, r); x = constrain(x + dx, r / 2, width – r / 2); y = constrain(y + dy, r / 2, height – r /2); reflectByWall(); } void reflectByWall(){ if(x <= r / 2 || width – r / 2 <= x){ dx = dx * -1; } if(y <= r / 2 || height– r / 2 <= y){ dy = dy * -1; } } float dx(){ float ret = (mouseX – x) * 0.01; return ret; } float dy(){ float ret = (mouseY – y) * 0.01; return ret; } void mousePressed(){ dx = dx(); dy = dy(); }

8. ステップ2：クラス名を決める 何を表しているものなのかを考えよう 今回の場合 まとめる部分では「円」を動かしたり、描いたりしている クラスは「円」を表す名前が良さそう Disk, Circle, BallいろいろあるがDiskにする

9. ステップ3：定義する class Disk{ }

10. ステップ4：クラス定義にまとめる class Disk{ float x, y, r, dx, dy; void reflectByWall(){ if(x <= r / 2 || width – r / 2 <= x){ dx = dx * -1; } if(y <= r / 2 || height– r / 2 <= y){ dy = dy * -1; } } float dx(){ float ret = (mouseX – x) * 0.01; return ret; } float dy(){ float ret = (mouseY – y) * 0.01; return ret; } }

11. ステップ5：必要なメソッドを足す class Disk{ float x, y, r, dx, dy; void reflectByWall(){ if(x <= r / 2 || width – r / 2 <= x){ dx = dx * -1; } if(y <= r / 2 || height– r / 2 <= y){ dy = dy * -1; } } void dx(){ dx= (mouseX – x) * 0.01; } void dy(){ dy = (mouseY – y) * 0.01; } void draw(){ ellipse(x, y, r, r); x = constrain(x + dx, r / 2, width – r / 2); y = constrain(y + dy, r / 2, height – r /2); reflectByWall(); } }

12. 定義したクラスを使おう クラス：型の一種 変数の宣言で使える new 代入

13. 定義したクラスを使った宣言 Disk d; void setup(){ size(400, 400); smooth(); colorMode(RGB, 100, 100, 100, 100); } void draw(){ background(0, 0, 0); } void mousePressed(){ }

14. new Disk d; void setup(){ size(400, 400); smooth(); colorMode(RGB, 100, 100, 100, 100); d = new Disk(); } void draw(){ background(0, 0, 0); } void mousePressed(){ }

15. インスタンス Disk d; void setup(){ size(400, 400); smooth(); colorMode(RGB, 100, 100, 100, 100); d = new Disk(); } void draw(){ background(0, 0, 0); } void mousePressed(){ }

16. インスタンスメソッドを使おう Disk d; void setup(){ size(400, 400); smooth(); colorMode(RGB, 100, 100, 100, 100); d = new Disk(); d.x = 200; d.y = 200; d.r = 20; d.r = 20; } void draw(){ background(0, 0, 0); d.draw(); } void mousePressed(){ d.dx(); d.dy(); }

17. 問題その1：Diskを二つに増やそう

18. 円と円との重なり 中心(x2, y2) 直径r2 中心(x1, y1), 直径r1 dist(x1, y1, x2, y2); <= (r2 + r1) / 2 2010.6.7 18 プログラミング技法特論#08 N.Shimizu <chiko at kaetsu.ac.jp>

19. 問題その2：反射させてみよう これまでのプログラムを改良しよう 二つのDiskがぶつかったとき、二つともを反射させよう dxとdy両方に-1をかける 2010.6.7 19 プログラミング技法特論#08 N.Shimizu <chiko at kaetsu.ac.jp>