Upcoming SlideShare
×

# プログラミング技法特論

871 views

Published on

Published in: Education
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

### プログラミング技法特論

1. 1. プログラミング技法特論#09<br />N. Shimizu<br />chikoski at kaetsu.ac.jp<br />
2. 2. 前回まで<br />float x, y, r, dx, dy;<br />void setup(){<br /> size(400, 400);<br />noStroke();<br /> fill(255, 0, 0, 255);<br />x = width / 2;<br />y = height / 2;<br />r = 20;<br />dx = 0.5;<br />dy = 0.5;<br />}<br />void draw(){<br /> background(0, 0, 0); <br />ellipse(x, y, r, r);<br />x = constrain(x + dx, r / 2, width – r / 2);<br />y = constrain(y + dy, r / 2, height – r /2);<br />reflectByWall();<br />}<br />void reflectByWall(){<br />if(x <= r / 2 || width – r / 2 <= x){<br />dx = dx * -1;<br /> }<br />if(y <= r / 2 || height– r / 2 <= y){<br />dy = dy * -1;<br /> }<br />}<br />float dx(){<br /> float ret = (mouseX – x) * 0.01;<br /> return ret;<br />}<br />float dy(){<br /> float ret = (mouseY – y) * 0.01;<br /> return ret;<br />}<br />void mousePressed(){<br />dx = dx();<br />dy = dy();<br />}<br />
3. 3. 円の動きに関する部分<br />float x, y, r, dx, dy;<br />void setup(){<br /> size(400, 400);<br />noStroke();<br /> fill(255, 0, 0, 255);<br />x = width / 2;<br />y = height / 2;<br />r = 20;<br />dx = 0.5;<br />dy = 0.5;<br />}<br />void draw(){<br /> background(0, 0, 0); <br />ellipse(x, y, r, r);<br />x = constrain(x + dx, r / 2, width – r / 2);<br />y = constrain(y + dy, r / 2, height – r /2);<br />reflectByWall();<br />}<br />void reflectByWall(){<br />if(x <= r / 2 || width – r / 2 <= x){<br />dx = dx * -1;<br /> }<br />if(y <= r / 2 || height– r / 2 <= y){<br />dy = dy * -1;<br /> }<br />}<br />float dx(){<br /> float ret = (mouseX – x) * 0.01;<br /> return ret;<br />}<br />float dy(){<br /> float ret = (mouseY – y) * 0.01;<br /> return ret;<br />}<br />void mousePressed(){<br />dx = dx();<br />dy = dy();<br />}<br />
4. 4. クラスにまとめよう<br />
5. 5. クラス<br />変数とメソッドをまとめたもの<br />なぜまとめるのか？<br />プログラムが構造化される<br />抽象化できる->クラスの中身をしらなくても　他のプログラムが書ける->独立して開発ができる<br />
6. 6. クラスの定義方法<br />class クラス名{<br />変数の宣言<br />メソッドの定義<br />}<br />
7. 7. ステップ1：まとめる部分を決める<br />float x, y, r, dx, dy;<br />void setup(){<br /> size(400, 400);<br />noStroke();<br /> fill(255, 0, 0, 255);<br />x = width / 2;<br />y = height / 2;<br />r = 20;<br />dx = 0.5;<br />dy = 0.5;<br />}<br />void draw(){<br /> background(0, 0, 0); <br />ellipse(x, y, r, r);<br />x = constrain(x + dx, r / 2, width – r / 2);<br />y = constrain(y + dy, r / 2, height – r /2);<br />reflectByWall();<br />}<br />void reflectByWall(){<br />if(x <= r / 2 || width – r / 2 <= x){<br />dx = dx * -1;<br /> }<br />if(y <= r / 2 || height– r / 2 <= y){<br />dy = dy * -1;<br /> }<br />}<br />float dx(){<br /> float ret = (mouseX – x) * 0.01;<br /> return ret;<br />}<br />float dy(){<br /> float ret = (mouseY – y) * 0.01;<br /> return ret;<br />}<br />void mousePressed(){<br />dx = dx();<br />dy = dy();<br />}<br />
8. 8. ステップ2：クラス名を決める<br />何を表しているものなのかを考えよう<br />今回の場合<br />まとめる部分では「円」を動かしたり、描いたりしている<br />クラスは「円」を表す名前が良さそう<br />Disk, Circle, BallいろいろあるがDiskにする<br />
9. 9. ステップ3：定義する<br />class Disk{<br />}<br />
10. 10. ステップ4：クラス定義にまとめる<br />class Disk{<br /> float x, y, r, dx, dy;<br /> void reflectByWall(){<br />if(x <= r / 2 || width – r / 2 <= x){<br />dx = dx * -1;<br /> }<br />if(y <= r / 2 || height– r / 2 <= y){<br />dy = dy * -1;<br /> }<br /> }<br /> float dx(){<br /> float ret = (mouseX – x) * 0.01;<br /> return ret;<br /> }<br /> float dy(){<br /> float ret = (mouseY – y) * 0.01;<br /> return ret;<br /> }<br /> }<br />
11. 11. ステップ5：必要なメソッドを足す<br />class Disk{<br /> float x, y, r, dx, dy;<br /> void reflectByWall(){<br />if(x <= r / 2 || width – r / 2 <= x){<br />dx = dx * -1;<br /> }<br />if(y <= r / 2 || height– r / 2 <= y){<br />dy = dy * -1;<br /> }<br /> }<br /> void dx(){<br />dx= (mouseX – x) * 0.01;<br /> }<br /> void dy(){<br />dy = (mouseY – y) * 0.01;<br /> }<br /> void draw(){<br />ellipse(x, y, r, r);<br />x = constrain(x + dx, r / 2, width – r / 2);<br />y = constrain(y + dy, r / 2, height – r /2);<br />reflectByWall();<br /> }<br /> }<br />
12. 12. 定義したクラスを使おう<br />クラス：型の一種<br />変数の宣言で使える<br />new<br />代入<br />
13. 13. 定義したクラスを使った宣言<br />Disk d;<br />void setup(){<br /> size(400, 400);<br /> smooth();<br /> colorMode(RGB, 100, 100, 100, 100);　　　<br />}<br />void draw(){<br /> background(0, 0, 0);<br />}<br />void mousePressed(){<br />}<br />
14. 14. new<br />Disk d;<br />void setup(){<br /> size(400, 400);<br /> smooth();<br /> colorMode(RGB, 100, 100, 100, 100);　　　<br />d = new Disk();<br />}<br />void draw(){<br /> background(0, 0, 0);<br />}<br />void mousePressed(){<br />}<br />
15. 15. インスタンス<br />Disk d;<br />void setup(){<br /> size(400, 400);<br /> smooth();<br /> colorMode(RGB, 100, 100, 100, 100);　　　<br />d = new Disk();<br />}<br />void draw(){<br /> background(0, 0, 0);<br />}<br />void mousePressed(){<br />}<br />
16. 16. インスタンスメソッドを使おう<br />Disk d;<br />void setup(){<br /> size(400, 400);<br /> smooth();<br />colorMode(RGB, 100, 100, 100, 100);<br />d = new Disk();<br />d.x = 200;<br />d.y = 200;<br />d.r = 20;<br />d.r = 20;<br />}<br />void draw(){<br /> background(0, 0, 0);<br />d.draw();<br />}<br />void mousePressed(){<br />d.dx();<br />d.dy();<br />}<br />
17. 17. 問題その1：Diskを二つに増やそう<br />
18. 18. 円と円との重なり<br />中心(x2, y2)<br />直径r2<br />中心(x1, y1),<br />直径r1<br /> dist(x1, y1, x2, y2); <= (r2 + r1) / 2<br />2010.6.7<br />18<br />プログラミング技法特論#08 N.Shimizu <chiko at kaetsu.ac.jp><br />
19. 19. 問題その2：反射させてみよう<br />これまでのプログラムを改良しよう<br />二つのDiskがぶつかったとき、二つともを反射させよう<br />dxとdy両方に-1をかける<br />2010.6.7<br />19<br />プログラミング技法特論#08 N.Shimizu <chiko at kaetsu.ac.jp><br />